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

package/date-picker/index.d.ts

@@ -0,0 +1,66 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type GlobalDOMAttributes } from "@rivetjs/cdk/dom-props";
+import { type DOMRenderProps } from "../utils/render.js";
+import type { MaybeAccessor } from "../state/form-validation.js";
+import { type ClassNameOrFunction, type ContextValue, type RACValidation, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import type { DateValue } from "../state/date-field.js";
+import { isInvalid as pickerIsInvalid, type DatePickerState, type DatePickerStateOptions, type DateRangePickerState, type DateRangePickerStateOptions } from "../state/date-picker.js";
+export type { DateValueString, FirstDayOfWeek, PageBehavior, RangeValue } from "../state/date-picker.js";
+export type { DateValue, Granularity } from "../state/date-field.js";
+export interface DatePickerRenderProps {
+    /** Whether an element within the date picker is focused, either via a mouse or keyboard. @selector [data-focus-within] */
+    isFocusWithin: () => boolean;
+    /** Whether an element within the date picker is keyboard focused. @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** Whether the date picker is disabled. @selector [data-disabled] */
+    isDisabled: () => boolean;
+    /** Whether the date picker is read only. @selector [data-readonly] */
+    isReadOnly: () => boolean;
+    /** Whether the date picker is invalid. @selector [data-invalid] */
+    isInvalid: () => boolean;
+    /** Whether the date picker is required. @selector [data-required] */
+    isRequired: () => boolean;
+    /** Whether the date picker's popover is currently open. @selector [data-open] */
+    isOpen: () => boolean;
+    /** State of the date picker. */
+    state: DatePickerState;
+}
+export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, "state"> {
+    /** State of the date range picker. */
+    state: DateRangePickerState;
+}
+interface PickerRootProps extends RACValidation, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** Whether the value is invalid (a value, or an accessor that stays live). */
+    isInvalid?: MaybeAccessor<boolean | undefined>;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onFocusChange?: (isFocused: boolean) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    form?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    ref?: RefValue<HTMLDivElement>;
+}
+export interface DatePickerProps<T extends DateValue = DateValue> extends Omit<DatePickerStateOptions<T>, "locale" | "validationBehavior" | "isInvalid">, PickerRootProps, RenderProps<DatePickerRenderProps>, DOMRenderProps<"div", DatePickerRenderProps> {
+    /** The CSS class of the element (a function of the render props). @default "rv-DatePicker" */
+    class?: ClassNameOrFunction<DatePickerRenderProps>;
+    /** Describes the type of autocomplete functionality the hidden autofill input provides. */
+    autoComplete?: string;
+}
+export interface DateRangePickerProps<T extends DateValue = DateValue> extends Omit<DateRangePickerStateOptions<T>, "locale" | "validationBehavior" | "isInvalid">, PickerRootProps, RenderProps<DateRangePickerRenderProps>, DOMRenderProps<"div", DateRangePickerRenderProps> {
+    /** The CSS class of the element (a function of the render props). @default "rv-DateRangePicker" */
+    class?: ClassNameOrFunction<DateRangePickerRenderProps>;
+}
+export declare const DatePickerContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>;
+export declare const DateRangePickerContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>;
+export declare const DatePickerStateContext: import("@rivetjs/reactivity").Context<DatePickerState | null>;
+export declare const DateRangePickerStateContext: import("@rivetjs/reactivity").Context<DateRangePickerState | null>;
+/** A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value. */
+export declare function DatePicker<T extends DateValue = DateValue>(inProps: DatePickerProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range. */
+export declare function DateRangePicker<T extends DateValue = DateValue>(inProps: DateRangePickerProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;
+export { pickerIsInvalid as isPickerInvalid };
+export type { Signal };

package/date-picker/index.jsx

@@ -0,0 +1,243 @@
+// Ported from react-aria-components (react-spectrum) src/DatePicker.tsx (DatePicker, DateRangePicker),
+// Apache-2.0, © Adobe.
+// Rivet:
+// - RAC parts 1:1: the pickers render no parts themselves. They provide DatePickerStateContext /
+//   DateRangePickerStateContext, GroupContext (the picker group), DateFieldContext (the DateInput: the picker's
+//   field state + `role="presentation"`; slots `start` / `end` in a range picker), ButtonContext (the calendar
+//   button), LabelContext, CalendarContext / RangeCalendarContext, OverlayTriggerStateContext, PopoverContext
+//   (`trigger`, `triggerRef` = the group, `placement: "bottom start"`), DialogContext, TextContext and
+//   FieldErrorContext (`../overlay/contexts.ts`, `../dialog/contexts.ts`). The user composes
+//   `<Label/><Group><DateInput>…</DateInput><Button/></Group><Popover><Dialog><Calendar/></Dialog></Popover>`.
+// - The Popover renders only while open (nothing at SSR); on a resumed page the first open creates it.
+// - Render props are accessors (`class={({ isOpen }) => …}`).
+// `render` (RAC DOMRenderProps): given, the attributes object (reactive entries are accessors) goes to `render(attrs, renderProps)` instead of the default element.
+// Deviations: no `locale` prop (I18nProvider); PopoverContext has no `clearContexts` (Rivet's
+// Popover does not clear contexts: the parts inside the dialog are the Calendar's, which re-provides
+// ButtonContext / HeadingContext / TextContext itself).
+import { computed, createContext, untrack } from "@rivetjs/reactivity";
+import { clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { formValidationBehavior, formValidationErrors } from "../form/index.jsx";
+import { FieldErrorContext } from "../form/field-error.jsx";
+import { Group, GroupContext } from "../group/index.jsx";
+import { Button, ButtonContext } from "../button/index.jsx";
+import { Popover } from "../popover/index.jsx";
+import { Dialog } from "../dialog/index.jsx";
+import { LabelContext } from "../label/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { probeSlots, slotProbing } from "#server";
+import { Calendar, CalendarContext, RangeCalendar, RangeCalendarContext } from "../calendar/index.jsx";
+import { DateFieldContext, DateInput, DateSegment, HiddenDateInput } from "../date-field/index.jsx";
+import { DialogContext } from "../dialog/contexts.js";
+import { OverlayTriggerStateContext, PopoverContext } from "../overlay/contexts.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import {} from "../utils/render.js";
+import { Provider, contextProps, createSlot, renderProps, resumableContext, } from "../slots/index.jsx";
+import { commitOnClose, createDatePickerState, createDateRangePickerState, isInvalid as pickerIsInvalid, } from "../state/date-picker.js";
+import { datePickerFocusIn, datePickerFocusOut, datePickerProps, dateRangePickerProps, pickerValueDescription, syncPickerInputs, valueDescriptionId, } from "./behaviour.jsx";
+import { renderPropsOf } from "../slots/index.jsx";
+import { liveDateProps } from "../date-field/live-value.jsx";
+import { ownerFlag, ownerFlagAttr, ownerFlagNow } from "../date-field/behaviour.jsx";
+import { hasLive, liveOptions } from "../utils/live.jsx";
+export const DatePickerContext = resumableContext(createContext(null, { id: "rv-date-picker" }));
+export const DateRangePickerContext = resumableContext(createContext(null, { id: "rv-date-range-picker" }));
+export const DatePickerStateContext = resumableContext(createContext(null, { id: "rv-date-picker-state" }));
+export const DateRangePickerStateContext = resumableContext(createContext(null, { id: "rv-date-range-picker-state" }));
+const ROOT_OWNED = ["style", "render"];
+/** The preset anatomy (no children): group (DateInput(s) + calendar button), popover dialog with the calendar. */
+function presetChildren(isRange) {
+    const segments = (segment) => <DateSegment segment={segment}/>;
+    return (<>
+      <Group>
+        {isRange ? (<>
+            <DateInput slot="start">{segments}</DateInput>
+            <span aria-hidden="true">–</span>
+            <DateInput slot="end">{segments}</DateInput>
+          </>) : (<DateInput>{segments}</DateInput>)}
+        <Button />
+      </Group>
+      <Popover>
+        <Dialog>{isRange ? <RangeCalendar /> : <Calendar />}</Dialog>
+      </Popover>
+    </>);
+}
+/**
+ * React Stately `setOpen(false)` commits the selection: mounted while the popover is open, so closing it any way
+ * (Escape, outside press, selection) commits. Rivet: not an `onOpenChange` wrapper, which would make the state
+ * reference itself (a cycle the resume format rejects).
+ */
+function PickerCommit(props) {
+    const state = props.state;
+    const commit = {
+        run: () => untrack(() => {
+            commitOnClose(state);
+            syncPickerInputs(state, document);
+        }),
+    };
+    // Mounted while open (own binding site): commits once the popover closes — when the effect re-runs on close,
+    // or when the presence unmounts it first (the cleanup runs either way, once).
+    clientEffect(() => {
+        if (!state.isOpen())
+            return;
+        return () => {
+            if (!untrack(state.isOpen))
+                commit.run();
+        };
+    });
+    return null;
+}
+/** Shared root of DatePicker / DateRangePicker (RAC: two copies of the same markup). */
+function pickerRoot(props, ref, state, aria, labelRef, extra) {
+    // Inside another field's server slot probe (`probeSlots`): this field's subtree holds none of that field's slots.
+    if (slotProbing)
+        return null;
+    const isRange = state.kind === "range";
+    const { groupProps, labelProps, buttonProps, dialogProps, calendarProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails, } = aria;
+    // Live props (P5): the picker state is the owner of the flags (`isDisabled={d()}`: `state.disabled` accessor); a live
+    // flag is an accessor in the spread bag `dom` (default element and `render` attrs).
+    const isDisabled = ownerFlagAttr(state, 0), isReadOnly = ownerFlagAttr(state, 1), isRequired = ownerFlagAttr(state, 2);
+    const values = {
+        state,
+        isFocusWithin: () => state.isFocusWithin(),
+        isFocusVisible: () => state.isFocusWithin() && state.isFocusVisible(),
+        isDisabled: () => ownerFlagNow(state, 0),
+        isInvalid,
+        isOpen: () => state.isOpen(),
+        isReadOnly: () => ownerFlagNow(state, 1),
+        isRequired: () => ownerFlagNow(state, 2),
+    };
+    // Preset (no children): RAC's documented anatomy. Lazy: it renders inside the Provider; an object-literal
+    // function value (resumable wherever the children accessor is encoded).
+    const preset = { content: () => presetChildren(isRange) };
+    const childrenUnset = untrack(() => props.children) === undefined;
+    // Options hoisted: no function in the `rp` initializer (spread sites capture `rp.class` / `rp.style`, not the
+    // children accessor: per-key live views).
+    const rpOptions = {
+        values,
+        defaultClassName: isRange ? "rv-DateRangePicker" : "rv-DatePicker",
+        defaultChildren: childrenUnset ? preset.content : undefined,
+    };
+    const rp = renderPropsOf(props, rpOptions);
+    // A computed (serializable): the FieldError region re-created on a resumed page is re-provided with it.
+    const validation = computed(() => ({
+        isInvalid: isInvalid(),
+        validationErrors: validationErrors(),
+        validationDetails: validationDetails(),
+    }));
+    const dom = globalDOMProps(props, ROOT_OWNED);
+    delete dom.id;
+    // Flags only in the spread bag (a plain JSX attribute after a spread takes the key out of it).
+    dom["data-disabled"] = isDisabled;
+    dom["data-readonly"] = isReadOnly;
+    dom["data-required"] = isRequired;
+    const slot = props.slot || undefined;
+    // The popover positions against the group (RAC `triggerRef: groupRef`).
+    const groupRef = createRef();
+    const providerValues = [
+        [GroupContext, { ...groupProps, ref: groupRef }],
+        [ButtonContext, buttonProps],
+        [LabelContext, { ...labelProps, ref: labelRef, elementType: "span" }],
+        isRange ? [RangeCalendarContext, calendarProps] : [CalendarContext, calendarProps],
+        [OverlayTriggerStateContext, state],
+        [PopoverContext, { trigger: isRange ? "DateRangePicker" : "DatePicker", triggerRef: groupRef, placement: "bottom start" }],
+        [DialogContext, dialogProps],
+        [TextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],
+        [FieldErrorContext, validation],
+        ...extra,
+    ];
+    // Rivet (server): the group renders before its Description / FieldError: probe which slotted parts render (as TextField).
+    if (typeof document === "undefined")
+        probeSlots(providerValues, () => rp.children());
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-rv-date-picker": "",
+            "data-focus-within": () => dataBool(state.isFocusWithin()),
+            "data-invalid": () => dataBool(isInvalid()),
+            "data-focus-visible": () => dataBool(state.isFocusWithin() && state.isFocusVisible()),
+            "data-open": () => dataBool(state.isOpen()),
+            onFocusIn: (event) => datePickerFocusIn(event, state),
+            onFocusOut: (event) => datePickerFocusOut(event, state),
+            children: () => rp.children(),
+        };
+        return (<Provider values={providerValues}>
+        {props.render(attrs, values)}
+        <span id={valueDescriptionId(state)} hidden>
+          {pickerValueDescription(state)}
+        </span>
+        <span data-rv-overlay-anchor="" style={{ display: "contents" }}>
+          {state.isOpen() ? <PickerCommit state={state}/> : null}
+        </span>
+      </Provider>);
+    }
+    return (<Provider values={providerValues}>
+      <div {...dom} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-rv-date-picker="" data-focus-within={dataBool(state.isFocusWithin())} data-invalid={dataBool(isInvalid())} data-focus-visible={dataBool(state.isFocusWithin() && state.isFocusVisible())} data-open={dataBool(state.isOpen())} onFocusIn={(event) => datePickerFocusIn(event, state)} onFocusOut={(event) => datePickerFocusOut(event, state)}>
+        {rp.children()}
+      </div>
+      <span id={valueDescriptionId(state)} hidden>
+        {pickerValueDescription(state)}
+      </span>
+      {/* Own binding site: reading `isOpen` in the fragment root would make the first open of a resumed page
+            re-create the whole picker (the focused segment / group replaced: no focus return, onFocus twice). */}
+      <span data-rv-overlay-anchor="" style={{ display: "contents" }}>
+        {state.isOpen() ? <PickerCommit state={state}/> : null}
+      </span>
+    </Provider>);
+}
+/** A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value. */
+export function DatePicker(inProps) {
+    // Live props (P5): `isDisabled` / `isReadOnly` / `isRequired` / `isInvalid` and a controlled `value` stay live
+    // (accessors into the state); the rest of the body is read once (untracked: a prop change never re-creates it).
+    return untrack(() => datePicker(inProps));
+}
+/** Picker flags that stay live (accessors the state reads at use). */
+const PICKER_LIVE = ["isDisabled", "isReadOnly", "isRequired", "isInvalid"];
+function datePicker(inProps) {
+    const [ctxProps, ref] = contextProps(inProps, inProps.ref, DatePickerContext);
+    const props = hasLive(ctxProps) ? liveOptions(ctxProps, PICKER_LIVE) : ctxProps;
+    const validationBehavior = formValidationBehavior(props.validationBehavior);
+    const live = liveDateProps(props);
+    const state = createDatePickerState({
+        ...live,
+        validationBehavior,
+        validationErrors: formValidationErrors(),
+    });
+    const [labelRef, hasLabel] = createSlot(!props["aria-label"] && !props["aria-labelledby"]);
+    const aria = datePickerProps({ ...live, label: hasLabel, validationBehavior }, state);
+    const { autoComplete, name } = props;
+    const isDisabled = ownerFlag(state, 0);
+    return (<>
+      {pickerRoot(props, ref, state, aria, labelRef, [
+            [DatePickerStateContext, state],
+            [DateFieldContext, aria.fieldProps],
+        ])}
+      <HiddenDateInput autoComplete={autoComplete} name={name} isDisabled={isDisabled} state={aria.fieldProps.pickerField} isPicker/>
+    </>);
+}
+/** A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range. */
+export function DateRangePicker(inProps) {
+    // Live props (P5): as DatePicker.
+    return untrack(() => dateRangePicker(inProps));
+}
+function dateRangePicker(inProps) {
+    const [ctxProps, ref] = contextProps(inProps, inProps.ref, DateRangePickerContext);
+    const props = hasLive(ctxProps) ? liveOptions(ctxProps, PICKER_LIVE) : ctxProps;
+    const validationBehavior = formValidationBehavior(props.validationBehavior);
+    const live = liveDateProps(props);
+    const state = createDateRangePickerState({
+        ...live,
+        validationBehavior,
+        validationErrors: formValidationErrors(),
+    });
+    const [labelRef, hasLabel] = createSlot(!props["aria-label"] && !props["aria-labelledby"]);
+    const aria = dateRangePickerProps({ ...live, label: hasLabel, validationBehavior }, state);
+    return pickerRoot(props, ref, state, aria, labelRef, [
+        [DateRangePickerStateContext, state],
+        [DateFieldContext, { slots: { start: aria.startFieldProps, end: aria.endFieldProps } }],
+    ]);
+}
+export { pickerIsInvalid as isPickerInvalid };

package/dialog/behaviour.d.ts

@@ -0,0 +1,63 @@
+import { type SlotId } from "../slots/index.jsx";
+export interface AriaDialogProps {
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    /**
+     * The accessibility role for the dialog.
+     * @default 'dialog'
+     */
+    role?: "dialog" | "alertdialog";
+    /**
+     * Whether the dialog is currently performing an entry animation. Focus is not moved into the
+     * dialog until the animation completes, since moving the screen reader cursor may cause scrolling
+     * that interrupts the animation.
+     */
+    isEntering?: boolean;
+}
+/** Slot ids of the title / content parts (RA `useSlotId`); read inside the attribute bindings. */
+export interface DialogSlots {
+    title?: SlotId;
+    content?: SlotId;
+}
+export interface DialogAria {
+    /** Props for the dialog container element. */
+    dialogProps: {
+        id?: string;
+        role: "dialog" | "alertdialog";
+        tabIndex: -1;
+        "aria-label"?: string;
+        "aria-labelledby": () => string | undefined;
+        "aria-describedby": () => string | undefined;
+        "aria-details"?: string;
+    };
+    /** Props for the dialog title element. */
+    titleProps: {
+        id: string | undefined;
+    };
+    /** Props for the dialog content/description element. Used for aria-describedby on alertdialogs. */
+    contentProps: {
+        id: string | undefined;
+    };
+}
+/** Attribute bags of a dialog and its title / description (react-aria `useDialog`). */
+export declare function dialogProps(props: AriaDialogProps, slots?: DialogSlots): DialogAria;
+/**
+ * The dialog's mount effect: focus the dialog itself on mount (or once it has entered), unless a child
+ * element is already focused. Returns the cleanup (call from a client effect).
+ */
+export declare function dialogFocus(element: HTMLElement | null | undefined, isEntering?: boolean): (() => void) | undefined;
+/**
+ * The dialog's `onBlur`: prevent blur events from reaching useOverlay, which may cause popovers to
+ * close. Since focus is contained within the dialog, we don't want this to occur due to the refocus in
+ * `dialogFocus`.
+ */
+export declare function dialogBlur(event: FocusEvent): void;
+/**
+ * Warn in dev mode if the dialog has no accessible title (call from a client effect). Checks the DOM
+ * element directly since aria-labelledby may be added by wrapper components (e.g. the RAC Dialog uses
+ * the trigger id as a fallback).
+ */
+export declare function dialogTitleWarning(element: HTMLElement | null | undefined): void;

package/dialog/behaviour.jsx

@@ -0,0 +1,90 @@
+// Ported from packages/react-aria/src/dialog/useDialog.ts, Apache-2.0, © Adobe.
+// Rivet:
+// - `useDialog(props, ref)` → `dialogProps(props, slots?)` (attribute bags, server-safe, call during
+//   render) + `dialogFocus(element, isEntering)` (the mount effect: call from a client effect, returns
+//   the cleanup) + `dialogBlur(event)` (the dialog's `onBlur`) + `dialogTitleWarning(element)` (dev).
+// - `useSlotId()` → the caller passes slot ids (`{ id, rendered }`, `createSlotId()` of `slots/`) read with
+//   `slotIdRef` inside the attribute bindings (server: the id is kept, RA's server HTML); without them the ids
+//   are kept (React's first render does the same).
+// - `useOverlayFocusContain()` → the surrounding `<Overlay>` (`portal/`) contains focus.
+// - `isRefocusing` ref → a WeakSet of dialog elements being re-focused (handlers are free functions).
+import { createId } from "../utils/id.js";
+import { slotIdRef } from "../slots/index.jsx";
+import { focusSafely } from "../focus/index.js";
+import { getActiveElement, isFocusWithin } from "../utils/dom.js";
+/** Attribute bags of a dialog and its title / description (react-aria `useDialog`). */
+export function dialogProps(props, slots = {}) {
+    const role = props.role ?? "dialog";
+    let titleId = slots.title?.id ?? createId();
+    titleId = props["aria-label"] ? undefined : titleId;
+    let contentId = slots.content?.id ?? createId();
+    contentId = role === "alertdialog" && !props["aria-describedby"] ? contentId : undefined;
+    const title = slots.title, content = slots.content;
+    const labelledBy = props["aria-labelledby"], describedBy = props["aria-describedby"];
+    // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+    // on mount when inside an iframe, no matter which element we programmatically focus.
+    // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+    // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+    // even without aria-modal on the dialog itself.
+    return {
+        dialogProps: {
+            id: props.id,
+            "aria-label": props["aria-label"],
+            "aria-details": props["aria-details"],
+            role,
+            tabIndex: -1,
+            // The slot id in use (the part's own `id` prop when it has one: RA mergeIds), else the generated id.
+            "aria-labelledby": () => labelledBy ?? (titleId ? (title ? slotIdRef(title) : titleId) : undefined),
+            "aria-describedby": () => describedBy ?? (contentId ? (content ? slotIdRef(content, false) : contentId) : undefined),
+        },
+        titleProps: { id: titleId },
+        contentProps: { id: contentId },
+    };
+}
+/** Dialog elements currently being blurred and re-focused (iOS VoiceOver workaround). */
+const refocusing = new WeakSet();
+/**
+ * The dialog's mount effect: focus the dialog itself on mount (or once it has entered), unless a child
+ * element is already focused. Returns the cleanup (call from a client effect).
+ */
+export function dialogFocus(element, isEntering) {
+    if (isEntering || !element || isFocusWithin(element))
+        return;
+    focusSafely(element);
+    // Safari on iOS does not move the VoiceOver cursor to the dialog
+    // or announce that it has opened until it has rendered. A workaround
+    // is to wait for half a second, then blur and re-focus the dialog.
+    const timeout = setTimeout(() => {
+        // Check that the dialog is still focused, or focused was lost to the body.
+        const active = getActiveElement(element.ownerDocument);
+        if (active === element || active === element.ownerDocument.body) {
+            refocusing.add(element);
+            element.blur();
+            focusSafely(element);
+            refocusing.delete(element);
+        }
+    }, 500);
+    return () => clearTimeout(timeout);
+}
+/**
+ * The dialog's `onBlur`: prevent blur events from reaching useOverlay, which may cause popovers to
+ * close. Since focus is contained within the dialog, we don't want this to occur due to the refocus in
+ * `dialogFocus`.
+ */
+export function dialogBlur(event) {
+    if (refocusing.has(event.currentTarget))
+        event.stopPropagation();
+}
+/**
+ * Warn in dev mode if the dialog has no accessible title (call from a client effect). Checks the DOM
+ * element directly since aria-labelledby may be added by wrapper components (e.g. the RAC Dialog uses
+ * the trigger id as a fallback).
+ */
+export function dialogTitleWarning(element) {
+    if (!isDev() || !element)
+        return;
+    if (!element.hasAttribute("aria-label") && !element.hasAttribute("aria-labelledby")) {
+        console.warn("A dialog must have a title for accessibility. " + "Either provide an aria-label or aria-labelledby prop, or render a heading element inside the dialog.");
+    }
+}
+const isDev = () => globalThis.process?.env?.NODE_ENV === "development";

package/dialog/contexts.d.ts

@@ -0,0 +1,12 @@
+import type { Signal } from "@rivetjs/reactivity";
+import type { ContextValue } from "../slots/index.jsx";
+import type { DialogProps } from "./index.jsx";
+export type { DialogProps };
+/** What a parent passes to its `<Dialog>`: Dialog props, `aria-labelledby` as a value or an accessor. */
+export interface DialogContextValue extends Omit<DialogProps, "aria-labelledby"> {
+    "aria-labelledby"?: string | (() => string | undefined);
+    /** @private DialogTrigger's overlay id (RA mergeIds target): a Dialog with its own `id` sets it, so `aria-controls` follows. */
+    idRef?: Signal<string>;
+}
+/** Props for the nearest `<Dialog>` from a parent (RAC `DialogContext`). */
+export declare const DialogContext: import("@rivetjs/reactivity").Context<ContextValue<DialogContextValue, HTMLElement>>;

package/dialog/contexts.js

@@ -0,0 +1,8 @@
+// Ported from packages/react-aria-components/src/Dialog.tsx (`DialogContext`), Apache-2.0, © Adobe.
+// Rivet: its own tiny module so Modal / Popover / Sheet can provide it without importing the Dialog
+// component; a `resumableContext` (id `rv-dialog`): values must serialize (plain data, accessors
+// created in .tsx modules; `aria-labelledby` may be an accessor). `OverlayTriggerStateContext` lives in `../overlay/contexts.ts`.
+import { createContext } from "@rivetjs/reactivity";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+/** Props for the nearest `<Dialog>` from a parent (RAC `DialogContext`). */
+export const DialogContext = resumableContext(createContext(null, { id: "rv-dialog" }));

package/dialog/index.d.ts

@@ -0,0 +1,48 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import { OverlayTriggerStateContext } from "../overlay/contexts.js";
+import { type OverlayTriggerProps } from "../state/overlays.js";
+import { type OverlayTriggerMode } from "../overlay/hover-trigger.jsx";
+import { type RefValue, type SlotProps, type StyleOrFunction } from "../slots/index.jsx";
+import { type AriaDialogProps } from "./behaviour.jsx";
+import { DialogContext } from "./contexts.js";
+export { DialogContext, OverlayTriggerStateContext };
+export interface DialogTriggerProps extends OverlayTriggerProps {
+    children?: Content;
+    /**
+     * Rivet extension (RAC vocabulary): the interaction that opens the overlay. `"press"` (RAC) toggles on
+     * press; `"longPress"` opens on a long press (keyboard / screen reader press still toggles); `"hover"`
+     * opens on mouse / pen hover after `delay` and keyboard focus, with a safe area between trigger and
+     * popover (touch keeps the press toggle); `"focus"` opens on keyboard focus (press still toggles).
+     * Read once at mount (it picks the trigger implementation).
+     * @default 'press'
+     */
+    trigger?: OverlayTriggerMode;
+    /** `trigger="hover"`: delay before opening (ms). Live (read at event time). @default 300 */
+    delay?: number;
+    /** `trigger="hover"`: delay before closing once the pointer left the safe area (ms). Live (read at event time). @default 200 */
+    closeDelay?: number;
+    /** `trigger="longPress"`: description for assistive technology, e.g. "Long press to open". Read once at mount. */
+    longPressAccessibilityDescription?: string;
+}
+export interface DialogRenderProps {
+    /** Closes the dialog (the overlay state of the nearest DialogTrigger / Modal / Popover). */
+    close: () => void;
+}
+export interface DialogProps extends Omit<AriaDialogProps, "isEntering">, SlotProps, DOMRenderProps<"section", undefined>, Omit<GlobalDOMAttributes<HTMLElement>, "style"> {
+    /** Whether the dialog is performing an entry animation (focus waits for it); a value or an accessor. */
+    isEntering?: MaybeAccessor<boolean | undefined>;
+    /** The CSS class of the element. @default 'rv-Dialog' */
+    class?: string;
+    /** The inline style of the element. */
+    style?: StyleOrFunction<DialogRenderProps>;
+    /** Children of the dialog. A function may be provided to access a function to close the dialog. */
+    children?: Content | ((opts: DialogRenderProps) => Content);
+    ref?: RefValue<HTMLElement>;
+}
+/** A DialogTrigger opens a dialog when a trigger element is pressed (RAC `DialogTrigger`). */
+export declare function DialogTrigger(props: DialogTriggerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;
+/** A dialog is an overlay shown above other content in an application (RAC `Dialog`). */
+export declare function Dialog(inProps: DialogProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;