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

package/overlay/hover-trigger.d.ts

@@ -0,0 +1,54 @@
+import { type OverlayTriggerState } from "../state/overlays.js";
+import type { ElementSource } from "./position.js";
+/** Which interaction opens the overlay (DialogTrigger `trigger`, RAC vocabulary). */
+export type OverlayTriggerMode = "press" | "longPress" | "hover" | "focus";
+export interface HoverTriggerProps {
+    /** `"hover"`: hover (mouse / pen) or keyboard focus opens; `"focus"`: keyboard focus only. @default 'hover' */
+    trigger?: "hover" | "focus";
+    /** Delay before opening on hover (ms; or an accessor read at event time: live). @default 300 */
+    delay?: number | (() => number | undefined);
+    /** Delay before closing once the pointer left the safe area (ms; or an accessor read at event time: live). @default 200 */
+    closeDelay?: number | (() => number | undefined);
+    /** Disable hover / focus opening. */
+    isDisabled?: boolean;
+    /** The trigger element. */
+    triggerRef: ElementSource;
+    /** The overlay element (popover). */
+    overlayRef: ElementSource;
+}
+export declare const HOVER_TRIGGER_DELAY = 300;
+export declare const HOVER_TRIGGER_CLOSE_DELAY = 200;
+/** Open after `delay` (immediately with `immediate` or a delay of 0); cancels a pending close. */
+export declare function hoverTriggerOpen(props: Pick<HoverTriggerProps, "delay">, state: OverlayTriggerState, immediate?: boolean): void;
+/** Close after `closeDelay` unless the pointer is in the safe area or focus is within; cancels a pending open. */
+export declare function hoverTriggerCheckClose(props: Pick<HoverTriggerProps, "closeDelay">, state: OverlayTriggerState): void;
+/** The trigger's `rv-focus-scope-restore` (the overlay's FocusScope restores focus): restore it without reopening. */
+export declare function hoverTriggerFocusScopeRestore(e: Event, state: OverlayTriggerState): void;
+/** The trigger's `onPointerEnter` (useHover start). */
+export declare function hoverTriggerPointerEnter(e: PointerEvent, props: HoverTriggerProps, state: OverlayTriggerState): void;
+/** The trigger's `onPointerLeave` (useHover end): before opening, cancel; once open the safe area decides. */
+export declare function hoverTriggerPointerLeave(e: PointerEvent, props: HoverTriggerProps, state: OverlayTriggerState): void;
+/** The trigger's `onFocus`: keyboard focus opens (focus-visible only, as useTooltipTrigger). */
+export declare function hoverTriggerFocus(e: FocusEvent, props: HoverTriggerProps, state: OverlayTriggerState): void;
+/** The trigger's `onBlur`: focus moving into the overlay keeps it open, elsewhere closes. */
+export declare function hoverTriggerBlur(e: FocusEvent, props: HoverTriggerProps, state: OverlayTriggerState): void;
+/** The overlay's `onFocusWithin` (focus entered it). */
+export declare function hoverTriggerOverlayFocusWithin(state: OverlayTriggerState): void;
+/** The overlay's `onBlurWithin`: focus left it; back to the trigger keeps it open, elsewhere closes. */
+export declare function hoverTriggerOverlayBlurWithin(e: FocusEvent, props: HoverTriggerProps, state: OverlayTriggerState): void;
+/**
+ * While open (client effect of the open overlay; returns the release): the safe area between the trigger
+ * and the overlay keeps it open while the pointer travels into it; leaving it closes after `closeDelay`.
+ */
+export declare function attachHoverTrigger(props: HoverTriggerProps, state: OverlayTriggerState): () => void;
+export interface HoverTriggerAria {
+    /** Props for the trigger element. */
+    triggerProps: Record<string, unknown>;
+    /** Props for the overlay element (Popover: `onFocusWithin` / `onBlurWithin` through PopoverContext). */
+    overlayProps: {
+        onFocusWithin: () => void;
+        onBlurWithin: (e: FocusEvent) => void;
+    };
+}
+/** Hover / focus opening for an overlay trigger (Rivet; see the header). */
+export declare function hoverTriggerProps(props: HoverTriggerProps, state: OverlayTriggerState): HoverTriggerAria;

package/overlay/hover-trigger.jsx

@@ -0,0 +1,221 @@
+// Ported from @react-aria/tooltip (useTooltipTrigger.ts hover / focus handling, usePreviewTrigger.ts
+// safe area, useSafeArea.ts), Apache-2.0, © Adobe.
+// Rivet extension: hover / focus opening for any overlay trigger (DialogTrigger `trigger="hover" |
+// "focus"`, Popover triggers) with React Aria's own hover-intent rules — open after `delay`, close after
+// `closeDelay`, and a safe area (the trigger, the overlay and the convex hull between them,
+// `./safe-area.ts`) that keeps the overlay open while the pointer travels from the trigger into it,
+// diagonally and across any gap (offset / arrow), even with `closeDelay` 0.
+// - hover: mouse / pen only (useHover rules: emulated mouse events after touch are ignored); touch keeps
+//   the press behaviour of the trigger.
+// - focus: keyboard focus only (focus-visible, as useTooltipTrigger); focus moving into the overlay keeps
+//   it open, leaving both closes it.
+// - the focus the overlay's FocusScope restores to the trigger (Escape / close) does not reopen it
+//   (`rv-focus-scope-restore` → `ignoreFocus`, as RA usePreviewTrigger).
+// - free functions over the serializable `OverlayTriggerState` (call them from inline arrows; resumable);
+//   per-state timers / flags in a browser-side WeakMap. `attachHoverTrigger` runs while open (client
+//   effect of the open overlay): the safe area. `.tsx`: the `hoverTriggerProps` bag's closures may be
+//   captured by resumed bindings.
+import { untrack } from "@rivetjs/reactivity";
+import { getInteractionModality, isFocusVisible, setInteractionModality, setupGlobalFocusEvents } from "../interactions/focus-visible.jsx";
+import { nodeContains } from "../interactions/utils.js";
+import { closeOverlay, openOverlay } from "../state/overlays.js";
+import { safeArea } from "./safe-area.js";
+export const HOVER_TRIGGER_DELAY = 300;
+export const HOVER_TRIGGER_CLOSE_DELAY = 200;
+const refsByState = new WeakMap();
+const refsOf = (state) => {
+    let r = refsByState.get(state);
+    if (!r)
+        refsByState.set(state, (r = { openTimer: null, closeTimer: null, inSafeArea: false, hasFocus: false, ignoreFocus: false }));
+    return r;
+};
+/** A live delay (accessor, untracked: event time) or a static one. */
+const delayOf = (delay) => (typeof delay === "function" ? untrack(delay) : delay);
+const read = (source) => (typeof source === "function" ? untrack(source) : source) ?? null;
+// useHover: iOS fires an emulated mouse pointer event right after a touch.
+const touch = { ignoreEmulatedMouse: false, tracking: false };
+function trackTouch(doc) {
+    if (touch.tracking)
+        return;
+    touch.tracking = true;
+    doc.addEventListener("pointerup", (e) => {
+        if (e.pointerType !== "touch")
+            return;
+        touch.ignoreEmulatedMouse = true;
+        setTimeout(() => (touch.ignoreEmulatedMouse = false), 500);
+    });
+}
+function cancelOpen(r) {
+    if (r.openTimer)
+        clearTimeout(r.openTimer);
+    r.openTimer = null;
+}
+function cancelClose(r) {
+    if (r.closeTimer)
+        clearTimeout(r.closeTimer);
+    r.closeTimer = null;
+}
+/** Open after `delay` (immediately with `immediate` or a delay of 0); cancels a pending close. */
+export function hoverTriggerOpen(props, state, immediate) {
+    const r = refsOf(state);
+    cancelClose(r);
+    if (untrack(state.isOpen) || r.openTimer)
+        return;
+    const delay = immediate ? 0 : (delayOf(props.delay) ?? HOVER_TRIGGER_DELAY);
+    if (delay <= 0)
+        return openOverlay(state);
+    r.openTimer = setTimeout(() => {
+        r.openTimer = null;
+        openOverlay(state);
+    }, delay);
+}
+/** Close after `closeDelay` unless the pointer is in the safe area or focus is within; cancels a pending open. */
+export function hoverTriggerCheckClose(props, state) {
+    const r = refsOf(state);
+    cancelOpen(r);
+    if (r.inSafeArea || r.hasFocus || !untrack(state.isOpen) || r.closeTimer)
+        return;
+    const closeDelay = delayOf(props.closeDelay) ?? HOVER_TRIGGER_CLOSE_DELAY;
+    if (closeDelay <= 0)
+        return closeOverlay(state);
+    r.closeTimer = setTimeout(() => {
+        r.closeTimer = null;
+        if (!r.inSafeArea && !r.hasFocus)
+            closeOverlay(state);
+    }, closeDelay);
+}
+const installed = new WeakSet();
+/**
+ * RA usePreviewTrigger's `useEvent(triggerRef, 'react-aria-focus-scope-restore')`: installed on the trigger at
+ * its first pointerenter / focus (an overlay opens only after one of them; nothing at load on a resumed page).
+ */
+function installRestoreListener(trigger, state) {
+    if (!trigger || installed.has(trigger))
+        return;
+    installed.add(trigger);
+    trigger.addEventListener("rv-focus-scope-restore", (e) => hoverTriggerFocusScopeRestore(e, state));
+}
+/** The trigger's `rv-focus-scope-restore` (the overlay's FocusScope restores focus): restore it without reopening. */
+export function hoverTriggerFocusScopeRestore(e, state) {
+    e.preventDefault();
+    const trigger = e.currentTarget;
+    // Already focused: no focus event follows, nothing to ignore.
+    if (trigger && trigger.ownerDocument.activeElement !== trigger)
+        refsOf(state).ignoreFocus = true;
+    trigger?.focus();
+}
+/** The trigger's `onPointerEnter` (useHover start). */
+export function hoverTriggerPointerEnter(e, props, state) {
+    const target = e.currentTarget;
+    installRestoreListener(target, state);
+    trackTouch(target.ownerDocument);
+    // Resumed page: modality tracking installs on first use; the hover's own pointer event is the evidence.
+    setupGlobalFocusEvents(target);
+    if (getInteractionModality() === null)
+        setInteractionModality("pointer");
+    if (props.isDisabled || props.trigger === "focus" || e.pointerType === "touch")
+        return;
+    if (touch.ignoreEmulatedMouse && e.pointerType === "mouse")
+        return;
+    refsOf(state).inSafeArea = true;
+    hoverTriggerOpen(props, state);
+}
+/** The trigger's `onPointerLeave` (useHover end): before opening, cancel; once open the safe area decides. */
+export function hoverTriggerPointerLeave(e, props, state) {
+    if (props.isDisabled || props.trigger === "focus" || e.pointerType === "touch")
+        return;
+    const r = refsOf(state);
+    if (!untrack(state.isOpen)) {
+        r.inSafeArea = false;
+        cancelOpen(r);
+        return;
+    }
+    // Open but the overlay is not tracking yet (no safe area attached): treat the leave as leaving.
+    if (!read(props.overlayRef)) {
+        r.inSafeArea = false;
+        hoverTriggerCheckClose(props, state);
+    }
+}
+/** The trigger's `onFocus`: keyboard focus opens (focus-visible only, as useTooltipTrigger). */
+export function hoverTriggerFocus(e, props, state) {
+    installRestoreListener(e.currentTarget, state);
+    const r = refsOf(state);
+    if (r.ignoreFocus) {
+        // Focus restored from the closing overlay (Escape / close): keep it closed (RA usePreviewTrigger).
+        r.ignoreFocus = false;
+        r.hasFocus = true;
+        return;
+    }
+    if (props.isDisabled || !isFocusVisible())
+        return;
+    r.hasFocus = true;
+    hoverTriggerOpen(props, state, true);
+}
+/** The trigger's `onBlur`: focus moving into the overlay keeps it open, elsewhere closes. */
+export function hoverTriggerBlur(e, props, state) {
+    const r = refsOf(state);
+    const overlay = read(props.overlayRef);
+    if (overlay && e.relatedTarget instanceof Node && nodeContains(overlay, e.relatedTarget))
+        return;
+    r.hasFocus = false;
+    hoverTriggerCheckClose({ closeDelay: 0 }, state);
+}
+/** The overlay's `onFocusWithin` (focus entered it). */
+export function hoverTriggerOverlayFocusWithin(state) {
+    const r = refsOf(state);
+    r.hasFocus = true;
+    cancelClose(r);
+}
+/** The overlay's `onBlurWithin`: focus left it; back to the trigger keeps it open, elsewhere closes. */
+export function hoverTriggerOverlayBlurWithin(e, props, state) {
+    const r = refsOf(state);
+    const trigger = read(props.triggerRef);
+    if (trigger && e.relatedTarget instanceof Node && nodeContains(trigger, e.relatedTarget))
+        return;
+    r.hasFocus = false;
+    hoverTriggerCheckClose({ closeDelay: 0 }, state);
+}
+/**
+ * While open (client effect of the open overlay; returns the release): the safe area between the trigger
+ * and the overlay keeps it open while the pointer travels into it; leaving it closes after `closeDelay`.
+ */
+export function attachHoverTrigger(props, state) {
+    const r = refsOf(state);
+    if (props.trigger === "focus")
+        return () => { };
+    const release = safeArea({
+        triggerRef: props.triggerRef,
+        overlayRef: props.overlayRef,
+        isDisabled: props.isDisabled,
+        onSafeAreaChange: (isInSafeArea) => {
+            if (isInSafeArea === r.inSafeArea)
+                return;
+            r.inSafeArea = isInSafeArea;
+            if (isInSafeArea)
+                cancelClose(r);
+            else
+                hoverTriggerCheckClose(props, state);
+        },
+    });
+    return () => {
+        release();
+        cancelOpen(r);
+        cancelClose(r);
+        r.inSafeArea = false;
+    };
+}
+/** Hover / focus opening for an overlay trigger (Rivet; see the header). */
+export function hoverTriggerProps(props, state) {
+    return {
+        triggerProps: {
+            onPointerEnter: (e) => hoverTriggerPointerEnter(e, props, state),
+            onPointerLeave: (e) => hoverTriggerPointerLeave(e, props, state),
+            onFocus: (e) => hoverTriggerFocus(e, props, state),
+            onBlur: (e) => hoverTriggerBlur(e, props, state),
+        },
+        overlayProps: {
+            onFocusWithin: () => hoverTriggerOverlayFocusWithin(state),
+            onBlurWithin: (e) => hoverTriggerOverlayBlurWithin(e, props, state),
+        },
+    };
+}

package/overlay/index.d.ts

@@ -0,0 +1,40 @@
+export type { Placement } from "./position.js";
+export interface AriaOverlayProps {
+    /** Whether the overlay is open (registered in the visible stack). @default true */
+    isOpen?: boolean;
+    /** Called when the overlay should close. */
+    onClose?: () => void;
+    /** Close on interaction outside the overlay (a value, or an accessor read at interaction time). @default false */
+    isDismissable?: boolean | (() => boolean | undefined);
+    /** Close when focus leaves the overlay (not when it is lost to the body). */
+    shouldCloseOnBlur?: boolean;
+    /** Disable closing with Escape (a value, or an accessor read at key time). @default false */
+    isKeyboardDismissDisabled?: boolean | (() => boolean | undefined);
+    /** Filter: return true when an interaction with `element` (outside the overlay) should close it. */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    /**
+     * Rivet: the element React Aria spreads `overlayProps.onKeyDown` on (a popover passes its own element while
+     * `element` is its group, e.g. a submenu's root container). Default `element`.
+     */
+    keyTarget?: Element;
+}
+export interface InteractOutsideProps {
+    onInteractOutside?: (event: PointerEvent) => void;
+    onInteractOutsideStart?: (event: PointerEvent) => void;
+    isDisabled?: boolean;
+}
+/** The top-most open overlay registered with `overlay()`. */
+export declare const topOverlay: () => Element | undefined;
+/**
+ * Interactions outside `element` (React Aria `useInteractOutside`): a pointerdown outside starts
+ * one (`onInteractOutsideStart`), the following click outside completes it (`onInteractOutside`;
+ * click rather than pointerup for Android Chrome). Capture phase. Returns the remove function.
+ */
+export declare function interactOutside(element: Element, props: InteractOutsideProps): () => void;
+/**
+ * Overlay behaviour (React Aria `useOverlay`) on `element`: Escape (keydown inside the overlay)
+ * and, with `isDismissable`, interaction outside close the top-most overlay only;
+ * `shouldCloseOnBlur` closes when focus moves to an element outside. Call on open; the returned
+ * function unregisters (call on close).
+ */
+export declare function overlay(element: Element, props: AriaOverlayProps): () => void;

package/overlay/index.js

@@ -0,0 +1,139 @@
+// Overlays: React Aria's `useOverlay` as `overlay(element, props)`: the stack of visible overlays
+// (only the top-most one closes at once), Escape inside the overlay, interact outside (pointerdown
+// then click outside, `shouldCloseOnInteractOutside` filter), close on blur. Imperative: call when
+// the overlay element is mounted and open (the overlay components call it from a client effect),
+// call the returned function when it closes. Overlays are plain divs in the overlay layer
+// (`<Overlay>`, ../portal/index.tsx), never the native top layer (`popover`, `<dialog>`).
+// Global listeners attach on open and detach on close; nothing runs at import time.
+//
+// `overlay` / `interactOutside` ported from @react-aria/overlays (useOverlay.ts) and
+// @react-aria/interactions (useInteractOutside.ts), Apache-2.0, © Adobe. `interactOutside` is the
+// imperative (element + cleanup) form of `useInteractOutside` (`../interactions/interact-outside.tsx`)
+// and shares its `isValidOutsideEvent`.
+import { isValidOutsideEvent } from "../interactions/interact-outside.jsx";
+import { getEventTarget } from "../utils/dom.js";
+// Stack of visible overlays, top-most last (React Aria `visibleOverlays`).
+const visibleOverlays = [];
+/** The top-most open overlay registered with `overlay()`. */
+export const topOverlay = () => visibleOverlays[visibleOverlays.length - 1];
+/**
+ * Interactions outside `element` (React Aria `useInteractOutside`): a pointerdown outside starts
+ * one (`onInteractOutsideStart`), the following click outside completes it (`onInteractOutside`;
+ * click rather than pointerup for Android Chrome). Capture phase. Returns the remove function.
+ */
+export function interactOutside(element, props) {
+    const { onInteractOutside, onInteractOutsideStart, isDisabled } = props;
+    if (isDisabled)
+        return () => { };
+    const doc = element.ownerDocument;
+    let isPointerDown = false;
+    // Outside-ness: ONE implementation (`../interactions/interact-outside.tsx`).
+    const onPointerDown = (event) => {
+        if (onInteractOutside && isValidOutsideEvent(event, element)) {
+            onInteractOutsideStart?.(event);
+            isPointerDown = true;
+        }
+    };
+    const onClick = (event) => {
+        if (isPointerDown && isValidOutsideEvent(event, element))
+            onInteractOutside?.(event);
+        isPointerDown = false;
+    };
+    doc.addEventListener("pointerdown", onPointerDown, true);
+    doc.addEventListener("click", onClick, true);
+    return () => {
+        doc.removeEventListener("pointerdown", onPointerDown, true);
+        doc.removeEventListener("click", onClick, true);
+    };
+}
+/**
+ * Overlay behaviour (React Aria `useOverlay`) on `element`: Escape (keydown inside the overlay)
+ * and, with `isDismissable`, interaction outside close the top-most overlay only;
+ * `shouldCloseOnBlur` closes when focus moves to an element outside. Call on open; the returned
+ * function unregisters (call on close).
+ */
+export function overlay(element, props) {
+    const { onClose, shouldCloseOnBlur, isOpen = true, isDismissable = false, isKeyboardDismissDisabled = false, shouldCloseOnInteractOutside, keyTarget = element, } = props;
+    const cleanups = [];
+    if (isOpen && !visibleOverlays.includes(element)) {
+        visibleOverlays.push(element);
+        cleanups.push(() => {
+            const index = visibleOverlays.indexOf(element);
+            if (index >= 0)
+                visibleOverlays.splice(index, 1);
+        });
+    }
+    // Only the top-most visible overlay hides.
+    const onHide = () => {
+        if (visibleOverlays[visibleOverlays.length - 1] === element && onClose)
+            onClose();
+    };
+    let lastVisibleOverlay;
+    const allowed = (target) => !shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(target);
+    const onKeyDown = (event) => {
+        const e = event;
+        // useKeyboard shortcut "Escape": no modifiers, no repeats, not composing; handled keys stop
+        // propagating and prevent the default (nested overlays: the inner one handles it).
+        if (e.key !== "Escape" || e.isComposing || e.repeat || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
+            return;
+        if (typeof isKeyboardDismissDisabled === "function" ? isKeyboardDismissDisabled() : isKeyboardDismissDisabled)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        onHide();
+    };
+    // On the overlay element, not its group: a submenu shares the root popover's container as group, and a
+    // listener there sees the submenu's Escape before the submenu's own delegated (DOM v2) keydown handler
+    // could stop it — closing the root menu too (React Aria: `onKeyDown` in the popover's `overlayProps`).
+    keyTarget.addEventListener("keydown", onKeyDown);
+    cleanups.push(() => keyTarget.removeEventListener("keydown", onKeyDown));
+    // Rivet (live props): an accessor `isDismissable` is read at interaction time (React re-renders with the new value).
+    const dismissable = typeof isDismissable === "function" ? () => !!isDismissable() : undefined;
+    if ((dismissable || isDismissable) && isOpen)
+        cleanups.push(interactOutside(element, {
+            onInteractOutsideStart(event) {
+                const topMostOverlay = visibleOverlays[visibleOverlays.length - 1];
+                lastVisibleOverlay = topMostOverlay;
+                if (dismissable && !dismissable())
+                    return;
+                if (allowed(getEventTarget(event)) && topMostOverlay === element)
+                    event.stopPropagation();
+            },
+            onInteractOutside(event) {
+                if (dismissable && !dismissable())
+                    return void (lastVisibleOverlay = undefined);
+                if (allowed(getEventTarget(event))) {
+                    if (visibleOverlays[visibleOverlays.length - 1] === element)
+                        event.stopPropagation();
+                    if (lastVisibleOverlay === element)
+                        onHide();
+                }
+                lastVisibleOverlay = undefined;
+            },
+        }));
+    else
+        cleanups.push(interactOutside(element, {
+            // Still record the top-most overlay at pointerdown (React Aria passes the start handler always).
+            onInteractOutsideStart: () => (lastVisibleOverlay = visibleOverlays[visibleOverlays.length - 1]),
+        }));
+    if (shouldCloseOnBlur) {
+        const onFocusOut = (event) => {
+            const related = event.relatedTarget;
+            // Focus lost to the body (tab switch, VoiceOver quirks): outside press handles real clicks.
+            // Focus moving into a nested overlay (a child layer above this one) does not close it.
+            if (!related || element.contains(related))
+                return;
+            const index = visibleOverlays.indexOf(element);
+            if (visibleOverlays.slice(index + 1).some((layer) => layer.contains(related)))
+                return;
+            if (allowed(related))
+                onClose?.();
+        };
+        element.addEventListener("focusout", onFocusOut);
+        cleanups.push(() => element.removeEventListener("focusout", onFocusOut));
+    }
+    return () => {
+        for (const cleanup of cleanups.splice(0))
+            cleanup();
+    };
+}

package/overlay/modal-overlay.d.ts

@@ -0,0 +1,16 @@
+import { type AriaOverlayProps } from "./index.js";
+import { type OverlayTriggerState } from "../state/overlays.js";
+export interface AriaModalOverlayProps extends Pick<AriaOverlayProps, "shouldCloseOnInteractOutside"> {
+    /** Close on interaction outside the modal (a value, or an accessor read at interaction time). @default false */
+    isDismissable?: boolean | (() => boolean | undefined);
+    /** Disable closing with Escape (a value, or an accessor read at key time). @default false */
+    isKeyboardDismissDisabled?: boolean | (() => boolean | undefined);
+    /** Entry animation running: outside content is hidden only once it completes (call again with false). */
+    isEntering?: boolean;
+    /** Patch focus() so it does not scroll the page (React Aria `UNSTABLE_overrideFocus`). */
+    overrideFocus?: boolean;
+}
+/** Attach modal behaviour to `element` for `state` (call when it opens); returns the release function. */
+export declare function modalOverlay(element: HTMLElement, props: AriaModalOverlayProps, state: OverlayTriggerState): () => void;
+/** `onPointerDown` of a modal's underlay: a press on the underlay itself does not move focus (React Aria `onPointerDownUnderlay`). */
+export declare function modalUnderlayPointerDown(event: PointerEvent): void;

package/overlay/modal-overlay.js

@@ -0,0 +1,38 @@
+// Modal overlay behaviour (React Aria `useModalOverlay`): `overlay()` (Escape, optional dismiss on
+// outside interaction), document scroll lock, and everything outside the modal hidden with `inert`
+// (`ariaHideOutside`; while an entry animation runs, only kept visible in a parent modal's hiding).
+// Call when the modal element is mounted and open; the returned function releases everything (the
+// modal component calls it from a client effect, so unmounting or closing always releases).
+// `modalUnderlayPointerDown` is the underlay's `onPointerDown` (React Aria `underlayProps`).
+//
+// Ported from @react-aria/overlays (useModalOverlay.ts, useOverlay.ts), Apache-2.0, © Adobe.
+import { ariaHideOutside, keepVisible } from "./aria-hide-outside.js";
+import { overlay } from "./index.js";
+import { preventScroll } from "./prevent-scroll.js";
+import { closeOverlay } from "../state/overlays.js";
+/** Attach modal behaviour to `element` for `state` (call when it opens); returns the release function. */
+export function modalOverlay(element, props, state) {
+    const cleanups = [
+        overlay(element, {
+            isOpen: true,
+            onClose: () => closeOverlay(state),
+            isDismissable: props.isDismissable,
+            isKeyboardDismissDisabled: props.isKeyboardDismissDisabled,
+            shouldCloseOnInteractOutside: props.shouldCloseOnInteractOutside,
+        }),
+        preventScroll({ overrideFocus: props.overrideFocus }),
+    ];
+    // Entering: keep this modal visible in a parent modal's hiding; hide outside afterwards.
+    const undo = props.isEntering ? keepVisible(element) : ariaHideOutside([element], { shouldUseInert: true });
+    if (undo)
+        cleanups.push(undo);
+    return () => {
+        for (const cleanup of cleanups.splice(0).reverse())
+            cleanup();
+    };
+}
+/** `onPointerDown` of a modal's underlay: a press on the underlay itself does not move focus (React Aria `onPointerDownUnderlay`). */
+export function modalUnderlayPointerDown(event) {
+    if (event.target === event.currentTarget)
+        event.preventDefault();
+}

package/overlay/overlay-strings.d.ts

@@ -0,0 +1,4 @@
+/** Locale → "Dismiss" label. */
+export declare const dismissStrings: Record<string, string>;
+/** The label for `locale`: exact match, then language match (`de` → `de-DE`), else English. */
+export declare function dismissLabel(locale?: string | null): string;

package/overlay/overlay-strings.js

@@ -0,0 +1,52 @@
+// Localized "Dismiss" label of `DismissButton` (34 locales).
+//
+// Ported from @react-aria/overlays (intl/overlays/*.json), Apache-2.0, © Adobe.
+/** Locale → "Dismiss" label. */
+export const dismissStrings = {
+    "ar-AE": "تجاهل",
+    "bg-BG": "Отхвърляне",
+    "cs-CZ": "Odstranit",
+    "da-DK": "Luk",
+    "de-DE": "Schließen",
+    "el-GR": "Απόρριψη",
+    "en-US": "Dismiss",
+    "es-ES": "Descartar",
+    "et-EE": "Lõpeta",
+    "fi-FI": "Hylkää",
+    "fr-FR": "Rejeter",
+    "he-IL": "התעלם",
+    "hr-HR": "Odbaci",
+    "hu-HU": "Elutasítás",
+    "it-IT": "Ignora",
+    "ja-JP": "閉じる",
+    "ko-KR": "무시",
+    "lt-LT": "Atmesti",
+    "lv-LV": "Nerādīt",
+    "nb-NO": "Lukk",
+    "nl-NL": "Negeren",
+    "pl-PL": "Zignoruj",
+    "pt-BR": "Descartar",
+    "pt-PT": "Dispensar",
+    "ro-RO": "Revocare",
+    "ru-RU": "Пропустить",
+    "sk-SK": "Zrušiť",
+    "sl-SI": "Opusti",
+    "sr-SP": "Odbaci",
+    "sv-SE": "Avvisa",
+    "tr-TR": "Kapat",
+    "uk-UA": "Скасувати",
+    "zh-CN": "取消",
+    "zh-TW": "關閉",
+};
+/** The label for `locale`: exact match, then language match (`de` → `de-DE`), else English. */
+export function dismissLabel(locale) {
+    if (locale) {
+        if (dismissStrings[locale])
+            return dismissStrings[locale];
+        const language = locale.split("-")[0].toLowerCase();
+        for (const key in dismissStrings)
+            if (key.split("-")[0].toLowerCase() === language)
+                return dismissStrings[key];
+    }
+    return dismissStrings["en-US"];
+}

package/overlay/overlay-trigger-state.d.ts

@@ -0,0 +1 @@
+export * from "../state/overlays.js";

package/overlay/overlay-trigger-state.js

@@ -0,0 +1,3 @@
+// Overlay trigger state (React Stately `useOverlayTriggerState`), formerly a second copy with methods:
+// one implementation now, `../state/overlays.ts` (serializable state, free functions that resume).
+export * from "../state/overlays.js";

package/overlay/overlay-trigger.d.ts

@@ -0,0 +1,27 @@
+import { type OverlayTriggerState } from "../state/overlays.js";
+export interface OverlayTriggerProps {
+    /** Type of overlay that is opened by the trigger. */
+    type: "dialog" | "menu" | "listbox" | "tree" | "grid";
+    /** Rivet: id of the overlay element. @default createId() */
+    id?: string;
+}
+export interface OverlayTriggerAria {
+    /** Props for the trigger element. */
+    triggerProps: {
+        "aria-haspopup": true | "listbox" | undefined;
+        "aria-expanded": () => boolean;
+        "aria-controls": () => string | undefined;
+        onPress: () => void;
+    };
+    /** Props for the overlay container element. */
+    overlayProps: {
+        id: string;
+    };
+}
+/**
+ * Handles the behavior and accessibility for an overlay trigger, e.g. a button that opens a popover,
+ * menu, or other overlay that is positioned relative to the trigger (React Aria `useOverlayTrigger`).
+ */
+export declare function overlayTriggerProps(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: () => Element | null | undefined): OverlayTriggerAria;
+/** Share `state.close` with `overlayPosition` for `trigger` (React Aria's onCloseMap effect). */
+export declare function registerTrigger(trigger: Element, state: OverlayTriggerState): void;

package/overlay/overlay-trigger.jsx

@@ -0,0 +1,50 @@
+// Ported from @react-aria/overlays (useOverlayTrigger.ts), Apache-2.0, © Adobe.
+// Overlay trigger (React Aria `useOverlayTrigger` → `overlayTriggerProps`): ARIA attributes of a button
+// that opens an overlay positioned relative to it (popover, menu, listbox, …) and of the overlay.
+// Rivet:
+// - returns RA's bags with RA keys; reactive values are accessors (`aria-expanded`, `aria-controls`),
+//   `onPress` toggles (spread the bag on a cdk `Button`, or call `toggleOverlay(state)` from your own
+//   inline handler on a resumed page: functions created in a `.ts` module do not serialize).
+// - RA's effect sharing `state.close` with useOverlayPosition through `onCloseMap` = `registerTrigger(trigger, state)`
+//   (call when the trigger element exists, e.g. from a client effect; `overlayTriggerProps` registers it
+//   itself when given a ref that is already attached).
+// - `id` option: the overlay id (RA: `useId()`), so the server and the browser agree.
+import { untrack } from "@rivetjs/reactivity";
+import { createId } from "../utils/id.js";
+import { onCloseMap } from "./close-on-scroll.js";
+import { closeOverlay, toggleOverlay } from "../state/overlays.js";
+/**
+ * Handles the behavior and accessibility for an overlay trigger, e.g. a button that opens a popover,
+ * menu, or other overlay that is positioned relative to the trigger (React Aria `useOverlayTrigger`).
+ */
+export function overlayTriggerProps(props, state, ref) {
+    const { type } = props;
+    // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll
+    // without forcing users to pass onClose.
+    const element = ref ? untrack(ref) : null;
+    if (element)
+        registerTrigger(element, state);
+    // Aria 1.1 supports multiple values for aria-haspopup other than just menus.
+    // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
+    // However, we only add it for menus for now because screen readers often
+    // announce it as a menu even for other values.
+    let ariaHasPopup = undefined;
+    if (type === "menu")
+        ariaHasPopup = true;
+    else if (type === "listbox")
+        ariaHasPopup = "listbox";
+    const overlayId = props.id ?? createId();
+    return {
+        triggerProps: {
+            "aria-haspopup": ariaHasPopup,
+            "aria-expanded": () => state.isOpen(),
+            "aria-controls": () => (state.isOpen() ? overlayId : undefined),
+            onPress: () => toggleOverlay(state),
+        },
+        overlayProps: { id: overlayId },
+    };
+}
+/** Share `state.close` with `overlayPosition` for `trigger` (React Aria's onCloseMap effect). */
+export function registerTrigger(trigger, state) {
+    onCloseMap.set(trigger, () => closeOverlay(state));
+}