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

package/time-wheels/behaviour.d.ts

@@ -0,0 +1,29 @@
+import type { WheelOption } from "../wheel-picker/behaviour.js";
+import { type DateFieldState, type HourCycle } from "../state/date-field.js";
+export type TimeWheelType = "hour" | "minute" | "second" | "dayPeriod";
+export declare const TIME_WHEEL_TYPES: readonly TimeWheelType[];
+/** Plain configuration shared by the drums of one TimeWheels (resumable data). */
+export interface TimeWheelsConfig {
+    /** Drum types in display order. */
+    types: TimeWheelType[];
+    /** Minute drum step. */
+    minuteStep: number;
+    /** Second drum step. */
+    secondStep: number;
+}
+/** AM / PM labels of `locale` (`Intl.DateTimeFormat` `dayPeriod` parts at 00:00 and 12:00). */
+export declare function dayPeriodLabels(locale: string): [string, string];
+/** The options of a drum. */
+export declare function timeWheelOptions(type: TimeWheelType, options: {
+    locale: string;
+    hourCycle: HourCycle;
+    twoDigitHour?: boolean;
+    minuteStep?: number;
+    secondStep?: number;
+}): WheelOption<number>[];
+/** The value a drum shows. Reads. */
+export declare function timeWheelValue(state: DateFieldState, type: TimeWheelType, config: TimeWheelsConfig): number;
+/** Whether option `value` of drum `type` is outside `minValue` … `maxValue` for its whole span. Reads. */
+export declare function isTimeWheelOptionDisabled(state: DateFieldState, type: TimeWheelType, value: number, config: TimeWheelsConfig): boolean;
+/** Drum `type` settled on `value`: sets every drum's field (completing an empty field), clamped to min / max. */
+export declare function setTimeWheelValue(state: DateFieldState, type: TimeWheelType, value: number, config: TimeWheelsConfig): void;

package/time-wheels/behaviour.js

@@ -0,0 +1,156 @@
+// Rivet-authored (no upstream): binds `@rivetjs/cdk/wheel-picker` drums to a TimeField's state (`@rivetjs/cdk/state/time-field`,
+// React Stately useTimeFieldState port). The drums read and write the same state the segments do (the display value =
+// React Stately's `IncompleteDate`, the value = the same `Time` / date-time string), so segments and drums stay in sync
+// both ways.
+// - Drums: one per editable time segment (`hour`, `minute`, `second`, `dayPeriod`) in the locale's segment order; the
+//   hour drum follows the field's hour cycle (h12: 12, 1 … 11; h11: 0 … 11; h23: 0 … 23; h24: 1 … 24); labels use the
+//   locale's digits (2-digit like the field's formatter), AM / PM from `Intl.DateTimeFormat` `dayPeriod` parts.
+// - Shown value of a drum: the display value's field, else the placeholder's (React Stately `placeholderDate`); minute /
+//   second drums with a step show the step at or below it.
+// - Commit: a drum change sets every drum's field at once (the shown values of the others), so the first spin of an
+//   empty field completes it (iOS wheels always show a full time), then clamps to `minValue` / `maxValue`.
+// - Disabled options: an option whose whole span (the hour, the minute, the second, the half day) lies outside
+//   `minValue` … `maxValue`, given the other drums' shown values, is disabled (skipped by the drum). Times compare as
+//   seconds of the day (a date part of min / max is ignored).
+import { parseDateValue } from "@rivetjs/cdk/date";
+import { untrack } from "@rivetjs/reactivity";
+import { IncompleteDate, calendarOf, displayValue, ownerDisabled, ownerOf, ownerReadOnly, placeholderDate, setValue, } from "../state/date-field.js";
+export const TIME_WHEEL_TYPES = ["hour", "minute", "second", "dayPeriod"];
+const toHourCycle = (hour, hc) => {
+    const dayPeriod = hour >= 12 ? 1 : 0;
+    if (hc === "h11")
+        return [dayPeriod, hour % 12];
+    if (hc === "h12")
+        return [dayPeriod, hour % 12 || 12];
+    if (hc === "h24")
+        return [dayPeriod, hour + 1];
+    return [dayPeriod, hour];
+};
+const fromHourCycle = (hour, dayPeriod, hc) => {
+    if (hc === "h11")
+        return hour + (dayPeriod ? 12 : 0);
+    if (hc === "h12")
+        return (hour === 12 ? 0 : hour) + (dayPeriod ? 12 : 0);
+    if (hc === "h24")
+        return hour - 1;
+    return hour;
+};
+const is12 = (hc) => hc === "h12" || hc === "h11";
+const numberFormats = new Map();
+function formatNumber(locale, value, twoDigit) {
+    const key = locale + (twoDigit ? "|2" : "");
+    let format = numberFormats.get(key);
+    if (!format)
+        numberFormats.set(key, (format = new Intl.NumberFormat(locale, { useGrouping: false, ...(twoDigit ? { minimumIntegerDigits: 2 } : {}) })));
+    return format.format(value);
+}
+/** AM / PM labels of `locale` (`Intl.DateTimeFormat` `dayPeriod` parts at 00:00 and 12:00). */
+export function dayPeriodLabels(locale) {
+    const format = new Intl.DateTimeFormat(locale, { hour: "numeric", hourCycle: "h12", timeZone: "UTC" });
+    const part = (hour) => format.formatToParts(new Date(Date.UTC(2000, 0, 1, hour))).find((p) => p.type === "dayPeriod")?.value ?? (hour ? "PM" : "AM");
+    return [part(0), part(12)];
+}
+/** The options of a drum. */
+export function timeWheelOptions(type, options) {
+    const { locale, hourCycle } = options;
+    if (type === "dayPeriod") {
+        const [am, pm] = dayPeriodLabels(locale);
+        return [
+            { value: 0, label: am },
+            { value: 1, label: pm },
+        ];
+    }
+    if (type === "hour") {
+        const hours = hourCycle === "h12"
+            ? [12, ...Array.from({ length: 11 }, (_, i) => i + 1)]
+            : hourCycle === "h11"
+                ? Array.from({ length: 12 }, (_, i) => i)
+                : hourCycle === "h24"
+                    ? Array.from({ length: 24 }, (_, i) => i + 1)
+                    : Array.from({ length: 24 }, (_, i) => i);
+        return hours.map((h) => ({ value: h, label: formatNumber(locale, h, !!options.twoDigitHour) }));
+    }
+    const step = Math.max(1, Math.floor((type === "minute" ? options.minuteStep : options.secondStep) ?? 1));
+    const values = [];
+    for (let v = 0; v < 60; v += step)
+        values.push(v);
+    return values.map((v) => ({ value: v, label: formatNumber(locale, v, true) }));
+}
+/** Every drum's shown value (display value, else the placeholder; stepped drums round down). Reads. */
+function shownFields(state, config) {
+    const display = displayValue(state);
+    const placeholder = new IncompleteDate(calendarOf(state), state.hourCycle, placeholderDate(state));
+    const pick = (type) => (display[type] ?? placeholder[type] ?? 0);
+    const minute = pick("minute"), second = pick("second");
+    return {
+        hour: pick("hour"),
+        dayPeriod: is12(state.hourCycle) ? pick("dayPeriod") : 0,
+        minute: minute - (minute % config.minuteStep),
+        second: second - (second % config.secondStep),
+    };
+}
+/** The value a drum shows. Reads. */
+export function timeWheelValue(state, type, config) {
+    return shownFields(state, config)[type];
+}
+const seconds = (f, hc) => fromHourCycle(f.hour, f.dayPeriod, hc) * 3600 + f.minute * 60 + f.second;
+function boundOf(text) {
+    if (!text)
+        return null;
+    const value = parseDateValue(text);
+    if (!value)
+        return null;
+    return (value.hour ?? 0) * 3600 + (value.minute ?? 0) * 60 + (value.second ?? 0);
+}
+/** `[min, max]` seconds of the day of the field's `minValue` / `maxValue` (`null` = unbounded). */
+function bounds(state) {
+    const owner = ownerOf(state);
+    return [boundOf(owner.minValue), boundOf(owner.maxValue)];
+}
+/** Whether option `value` of drum `type` is outside `minValue` … `maxValue` for its whole span. Reads. */
+export function isTimeWheelOptionDisabled(state, type, value, config) {
+    const [min, max] = bounds(state);
+    if (min == null && max == null)
+        return false;
+    const fields = { ...shownFields(state, config), [type]: value };
+    const hc = state.hourCycle;
+    const has = (t) => config.types.includes(t);
+    let lo, hi;
+    if (type === "dayPeriod") {
+        lo = value * 43200;
+        hi = lo + 43199;
+    }
+    else if (type === "hour") {
+        lo = fromHourCycle(value, fields.dayPeriod, hc) * 3600;
+        hi = lo + 3599;
+    }
+    else if (type === "minute") {
+        lo = fromHourCycle(fields.hour, fields.dayPeriod, hc) * 3600 + value * 60;
+        hi = lo + (has("second") ? 59 : 0);
+    }
+    else {
+        lo = hi = seconds(fields, hc);
+    }
+    return (max != null && lo > max) || (min != null && hi < min);
+}
+/** Drum `type` settled on `value`: sets every drum's field (completing an empty field), clamped to min / max. */
+export function setTimeWheelValue(state, type, value, config) {
+    const owner = ownerOf(state);
+    if (ownerDisabled(owner) || ownerReadOnly(owner))
+        return;
+    const hc = state.hourCycle;
+    let fields = { ...untrack(() => shownFields(state, config)), [type]: value };
+    const [min, max] = untrack(() => bounds(state));
+    const total = seconds(fields, hc);
+    const clamped = Math.max(min ?? -Infinity, Math.min(max ?? Infinity, total));
+    if (clamped !== total) {
+        const [dayPeriod, hour] = toHourCycle(Math.floor(clamped / 3600), hc);
+        const rest = clamped % 3600;
+        fields = { hour, dayPeriod, minute: Math.floor(rest / 60), second: rest % 60 };
+    }
+    const placeholder = untrack(() => placeholderDate(state));
+    let next = untrack(() => displayValue(state));
+    for (const t of config.types)
+        next = next.set(t, fields[t], placeholder);
+    setValue(state, next);
+}

package/time-wheels/index.d.ts

@@ -0,0 +1,27 @@
+import { type DateFieldState } from "../state/date-field.js";
+export { TIME_WHEEL_TYPES, dayPeriodLabels, isTimeWheelOptionDisabled, setTimeWheelValue, timeWheelOptions, timeWheelValue, type TimeWheelType, type TimeWheelsConfig, } from "./behaviour.js";
+export interface TimeWheelsProps {
+    /** The field state (default: the enclosing TimeField's, then DateField's). */
+    state?: DateFieldState;
+    /** Minutes between minute drum options. @default 1 */
+    minuteStep?: number;
+    /** Seconds between second drum options. @default 1 */
+    secondStep?: number;
+    /** Whether the numeric drums wrap around. @default true */
+    loop?: boolean;
+    /** Items visible per drum (odd). @default 5 */
+    visibleItems?: number;
+    /** Focus the first enabled drum when mounted (client renders, e.g. a popover opening). @default false */
+    autoFocus?: boolean;
+    /** The CSS class of the group. @default "rv-TimeWheels" */
+    class?: string;
+    /** The CSS class of each drum. @default "rv-Wheel" */
+    wheelClass?: string;
+    /** The CSS class of each drum item. @default "rv-WheelItem" */
+    itemClass?: string;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+/** Drums for a TimeField (inside it, or with `state`). */
+export declare function TimeWheels(props: TimeWheelsProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;

package/time-wheels/index.jsx

@@ -0,0 +1,91 @@
+// Rivet-authored (no upstream; React Aria has no wheel time picker): `TimeWheels` — iOS-style drums (hours, minutes,
+// optional seconds, AM / PM per the locale's hour cycle) for a TimeField. Drums = `@rivetjs/cdk/wheel-picker` `Wheel`s
+// (spinbuttons, house motion); values = the TimeField state's (`./behaviour.ts`), so the segments and the drums edit
+// the same value. Numeric drums loop (59 → 00), AM / PM does not.
+// - State: `state` prop, else the enclosing `TimeField`'s (`TimeFieldStateContext`, resumable) — put it inside the field,
+//   e.g. in a Popover opened from the field (`<DialogTrigger>` around the group + `<Popover>`), as a render-function
+//   child so nothing renders before it opens.
+// - Layout: group `div[role=group]` (`rv-TimeWheels`, `dir` of the locale, inline `display: flex`); the numeric drums sit in
+//   an inline `display: flex; direction: ltr` run (`rv-TimeWheels-run`), as the field wraps its time segments in LTR
+//   isolates, so RTL locales keep hour → minute → second left to right with AM / PM on the locale's side.
+import { untrack, useContext } from "@rivetjs/reactivity";
+import { For, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { focusSafely } from "../focus/index.js";
+import { isRTL } from "../i18n/index.js";
+import { displayNames } from "../date-field/behaviour.jsx";
+import { DateFieldStateContext, TimeFieldStateContext } from "../date-field/index.jsx";
+import { fieldDateFormatter, ownerOf, segments } from "../state/date-field.js";
+import { Wheel } from "../wheel-picker/index.jsx";
+import { createWheelState } from "../wheel-picker/behaviour.js";
+import { TIME_WHEEL_TYPES, isTimeWheelOptionDisabled, setTimeWheelValue, timeWheelOptions, timeWheelValue, } from "./behaviour.js";
+export { TIME_WHEEL_TYPES, dayPeriodLabels, isTimeWheelOptionDisabled, setTimeWheelValue, timeWheelOptions, timeWheelValue, } from "./behaviour.js";
+/** One time drum (its own component: the wheel state's closures are resumable component locals). */
+function TimeDrum(props) {
+    const { state, type, label, config, twoDigitHour, visibleItems, wheelClass, itemClass } = props;
+    const owner = ownerOf(state);
+    const { minuteStep, secondStep } = config;
+    const wheel = createWheelState({
+        options: timeWheelOptions(type, { locale: state.locale, hourCycle: state.hourCycle, twoDigitHour, minuteStep, secondStep }),
+        value: () => timeWheelValue(state, type, config),
+        onChange: (value) => setTimeWheelValue(state, type, value, config),
+        isOptionDisabled: (value) => isTimeWheelOptionDisabled(state, type, value, config),
+        loop: props.loop && type !== "dayPeriod",
+        isDisabled: owner.isDisabled,
+        isReadOnly: owner.isReadOnly,
+        visibleItems,
+        pageStep: type === "hour" ? 2 : type === "dayPeriod" ? 1 : Math.max(1, Math.round(15 / (type === "minute" ? minuteStep : secondStep))),
+    });
+    return <Wheel state={wheel} class={wheelClass} itemClass={itemClass} aria-label={label} data-type={type}/>;
+}
+/** Drums for a TimeField (inside it, or with `state`). */
+export function TimeWheels(props) {
+    const state = props.state ?? useContext(TimeFieldStateContext) ?? useContext(DateFieldStateContext);
+    if (!state)
+        return null;
+    const owner = ownerOf(state);
+    const locale = state.locale;
+    const hourCycle = state.hourCycle;
+    const types = untrack(() => segments(state))
+        .filter((s) => s.isEditable && TIME_WHEEL_TYPES.includes(s.type))
+        .map((s) => s.type);
+    const minuteStep = Math.max(1, Math.floor(props.minuteStep ?? 1)), secondStep = Math.max(1, Math.floor(props.secondStep ?? 1));
+    const config = { types, minuteStep, secondStep };
+    const twoDigitHour = !!owner.shouldForceLeadingZeros || untrack(() => fieldDateFormatter(state).resolvedOptions().hour === "2-digit");
+    const names = displayNames(locale);
+    const { id, wheelClass, itemClass, visibleItems } = props;
+    const loop = props.loop ?? true;
+    const className = props.class ?? "rv-TimeWheels";
+    const label = props["aria-label"], labelledBy = props["aria-labelledby"];
+    const group = createRef();
+    if (props.autoFocus)
+        clientEffect(() => {
+            const first = group()?.querySelector("[role=spinbutton][tabindex]");
+            if (first)
+                untrack(() => focusSafely(first));
+        });
+    // Numeric drums grouped into LTR runs (segment order of the locale).
+    const entries = [];
+    for (const type of types) {
+        const wheel = { type, label: names.of(type) ?? type };
+        const last = entries[entries.length - 1];
+        if (type !== "dayPeriod" && last?.run)
+            last.wheels.push(wheel);
+        else
+            entries.push({ run: type !== "dayPeriod", wheels: [wheel] });
+    }
+    const drum = (entry) => (<TimeDrum state={state} type={entry.type} label={entry.label} config={config} twoDigitHour={twoDigitHour} loop={loop} visibleItems={visibleItems ?? 5} wheelClass={wheelClass} itemClass={itemClass}/>);
+    return (<div ref={group} id={id} class={className} role="group" dir={isRTL(locale) ? "rtl" : "ltr"} aria-label={label} aria-labelledby={labelledBy} aria-disabled={owner.isDisabled ? "true" : undefined} style={{ display: "flex" }}>
+      <For each={entries} by={(entry) => entry}>
+        {(entry) => {
+            const e = untrack(entry);
+            if (!e.run)
+                return drum(e.wheels[0]);
+            return (<div class="rv-TimeWheels-run" style={{ display: "flex", direction: "ltr" }}>
+              <For each={e.wheels} by={(w) => w.type}>
+                {(w) => drum(untrack(w))}
+              </For>
+            </div>);
+        }}
+      </For>
+    </div>);
+}

package/toast/behaviour.d.ts

@@ -0,0 +1,51 @@
+import type { Ref } from "@rivetjs/runtime/jsx-runtime";
+import type { QueuedToast, ToastState } from "../state/toast.js";
+type DOMAttributes = Record<string, unknown>;
+export interface AriaLabelingProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+}
+export interface AriaToastRegionProps extends AriaLabelingProps {
+    /**
+     * An accessibility label for the toast region.
+     * @default 'Notifications'
+     */
+    "aria-label"?: string;
+}
+export interface AriaToastProps<T> extends AriaLabelingProps {
+    /** The toast object. */
+    toast: QueuedToast<T>;
+    /** Rivet: locale of the strings (RA reads the I18nProvider). @default "en-US" */
+    locale?: string;
+}
+export interface ToastAria {
+    /** Props for the toast container, non-modal dialog element. */
+    toastProps: DOMAttributes;
+    /** Props for the toast content alert message. */
+    contentProps: DOMAttributes;
+    /** Props for the toast title element. */
+    titleProps: DOMAttributes;
+    /** Props for the toast description element, if any. */
+    descriptionProps: DOMAttributes;
+    /** Props for the toast close button. */
+    closeButtonProps: {
+        "aria-label": string;
+        onPress: () => void;
+    };
+}
+/**
+ * Provides the behavior and accessibility implementation for a toast component. Toasts display
+ * brief, temporary notifications of actions, errors, or other events in an application.
+ */
+export declare function toastProps<T>(props: AriaToastProps<T>, state: Pick<ToastState<T>, "close"> & Partial<Pick<ToastState<T>, "visibleToasts">>): ToastAria;
+/**
+ * Provides the behavior and accessibility implementation for a toast region containing one or more
+ * toasts. Toasts display brief, temporary notifications of actions, errors, or other events in an
+ * application. Returns RA's `regionProps`.
+ */
+export declare function toastRegionProps<T>(props: AriaToastRegionProps & {
+    locale?: string;
+}, state: ToastState<T>, ref: Ref<HTMLElement> | (() => HTMLElement | null | undefined)): DOMAttributes;
+export {};

package/toast/behaviour.jsx

@@ -0,0 +1,273 @@
+// Ported from react-aria (packages/react-aria/src/toast/useToast.ts, useToastRegion.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - `useToastRegion(props, state, ref)` → `toastRegionProps(props, state, ref)` returning RA's `regionProps`
+//   bag; `useToast(props, state, ref)` → `toastProps(props, state)` returning RA's
+//   `{ toastProps, contentProps, titleProps, descriptionProps, closeButtonProps }`.
+// - Toasts and their region only ever render in the browser (RA renders nothing during SSR; on a resumed
+//   page the region appears with the first toast), so both bags carry plain handler closures and their
+//   effects run in the calling owner: RA's layout effects / effects → `effect` / `queueMicrotask`
+//   (after the toast list rendered), unmount cleanups → `onCleanup`. Custom markup calls them while
+//   rendering in the browser, like the components in `./index.tsx`.
+// - `state.visibleToasts` is a signal accessor (`createToastQueueState`); `ref` is a `ref()`; reactive
+//   attribute values (`aria-label`, `aria-hidden`, `aria-describedby`) are accessors.
+// - useToast's `[timer, timeout]` effect: re-checked whenever `state.visibleToasts()` changes (a queue that swaps a toast's
+//   timer in place, e.g. HeroUI's exit-aware queue `update()`, notifies; the toast's countdown restarts on the new timer).
+// - React `onFocus` / `onBlur` (bubbling) → `onFocusIn` / `onFocusOut`, merged with useFocusWithin's.
+// Deviation:
+// - The region ignores the focusout Chromium fires when the focused toast is removed (jsdom fires none),
+//   so focus still moves to the next toast / back to the trigger as upstream's tests expect.
+import { effect, onCleanup, signal, untrack } from "@rivetjs/reactivity";
+import { formatMessage } from "../_adapters/intl.js";
+import { getInteractionModality } from "../interactions/focus-visible.jsx";
+import { focusWithinBlur, focusWithinFocus } from "../interactions/focus.jsx";
+import { hoverProps } from "../interactions/hover.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { landmarkProps } from "../landmark/index.jsx";
+import { getEventTarget, getOwnerDocument } from "../utils/dom.js";
+import { createId } from "../utils/id.js";
+import { focusWithoutScrolling } from "../utils/index.js";
+import { strings as intlMessages } from "./intl.js";
+const isBrowser = () => typeof document !== "undefined";
+// RA `filterDOMProps(props, { labelable: true })`: id, data-*, aria labelling.
+function labelableDOMProps(props) {
+    const out = {};
+    for (const key in props) {
+        if (key === "id" || key === "aria-label" || key === "aria-labelledby" || key === "aria-describedby" || key === "aria-details" || key.startsWith("data-")) {
+            out[key] = props[key];
+        }
+    }
+    return out;
+}
+/**
+ * Provides the behavior and accessibility implementation for a toast component. Toasts display
+ * brief, temporary notifications of actions, errors, or other events in an application.
+ */
+export function toastProps(props, state) {
+    const toast = props.toast;
+    const key = toast.key;
+    // RA useEffect([timer, timeout]): (re)start the countdown when shown or when the toast's timer / timeout changes (a queue
+    // that replaces them in place notifies its subscribers: `visibleToasts()` re-runs this), pause it when removed.
+    if (isBrowser()) {
+        let current;
+        const sync = () => {
+            const { timer, timeout } = toast;
+            if (current && current.timer === timer && current.timeout === timeout)
+                return;
+            current?.timer?.pause();
+            current = { timer, timeout };
+            if (timer != null && timeout != null)
+                timer.reset(timeout);
+        };
+        if (state.visibleToasts) {
+            const visibleToasts = state.visibleToasts;
+            effect(() => {
+                visibleToasts();
+                untrack(sync);
+            });
+        }
+        else
+            sync();
+        onCleanup(() => current?.timer?.pause());
+    }
+    const titleId = createId();
+    const descriptionId = createId();
+    // RA useSlotId: the description id only once an element with it rendered.
+    const descriptionSlot = signal(undefined);
+    // This is required for NVDA announcements, without it NVDA will NOT announce the toast when it appears.
+    const isVisible = signal(false);
+    if (isBrowser()) {
+        let live = true;
+        onCleanup(() => (live = false));
+        queueMicrotask(() => {
+            if (!live)
+                return;
+            isVisible.set(true);
+            if (getOwnerDocument().getElementById(descriptionId))
+                descriptionSlot.set(descriptionId);
+        });
+    }
+    const labelable = labelableDOMProps(props);
+    const ariaDescribedby = props["aria-describedby"];
+    return {
+        toastProps: {
+            ...labelable,
+            role: "alertdialog",
+            "aria-modal": "false",
+            "aria-labelledby": props["aria-labelledby"] || titleId,
+            "aria-describedby": ariaDescribedby ? ariaDescribedby : () => descriptionSlot(),
+            tabIndex: 0,
+        },
+        contentProps: {
+            role: "alert",
+            "aria-atomic": "true",
+            "aria-hidden": () => (isVisible() ? undefined : "true"),
+        },
+        titleProps: { id: titleId },
+        descriptionProps: { id: descriptionId },
+        closeButtonProps: {
+            "aria-label": formatMessage(intlMessages, props.locale, "close"),
+            onPress: () => state.close(key),
+        },
+    };
+}
+/**
+ * Provides the behavior and accessibility implementation for a toast region containing one or more
+ * toasts. Toasts display brief, temporary notifications of actions, errors, or other events in an
+ * application. Returns RA's `regionProps`.
+ */
+export function toastRegionProps(props, state, ref) {
+    const locale = props.locale;
+    const ariaLabel = props["aria-label"];
+    const landmark = landmarkProps({
+        role: "region",
+        "aria-label": () => ariaLabel || formatMessage(intlMessages, locale, "notifications", { count: state.visibleToasts().length }),
+    }, ref);
+    const local = { isHovered: false, isFocused: false };
+    const updateTimers = () => {
+        if (local.isHovered || local.isFocused)
+            state.pauseAll();
+        else
+            state.resumeAll();
+    };
+    const hover = hoverProps({
+        onHoverStart: () => {
+            local.isHovered = true;
+            updateTimers();
+        },
+        onHoverEnd: () => {
+            local.isHovered = false;
+            updateTimers();
+        },
+    });
+    // Manage focus within the toast region.
+    // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.
+    let toasts = [];
+    let prevVisibleToasts = untrack(state.visibleToasts);
+    let focusedToast = null;
+    let lastFocused = null;
+    const layoutEffect = (visibleToasts) => {
+        const element = ref();
+        // If no toast has focus, then don't do anything.
+        if (focusedToast === -1 || visibleToasts.length === 0 || !element) {
+            toasts = [];
+            prevVisibleToasts = visibleToasts;
+            return;
+        }
+        toasts = [...element.querySelectorAll('[role="alertdialog"]')];
+        // If the visible toasts haven't changed, we don't need to do anything.
+        if (prevVisibleToasts.length === visibleToasts.length && visibleToasts.every((t, i) => t.key === prevVisibleToasts[i].key)) {
+            prevVisibleToasts = visibleToasts;
+            return;
+        }
+        // Get a list of all toasts by index and add info if they are removed.
+        const allToasts = prevVisibleToasts.map((t, i) => ({ ...t, i, isRemoved: !visibleToasts.some((t2) => t.key === t2.key) }));
+        const removedFocusedToastIndex = allToasts.findIndex((t) => t.i === focusedToast && t.isRemoved);
+        // If the focused toast was removed, focus the next or previous toast.
+        if (removedFocusedToastIndex > -1) {
+            // In pointer modality, move focus out of the toast region.
+            // Otherwise auto-dismiss timers will appear "stuck".
+            if (getInteractionModality() === "pointer" && lastFocused?.isConnected) {
+                focusWithoutScrolling(lastFocused);
+            }
+            else {
+                let i = 0;
+                let nextToast;
+                let prevToast;
+                while (i <= removedFocusedToastIndex) {
+                    if (!allToasts[i].isRemoved)
+                        prevToast = Math.max(0, i - 1);
+                    i++;
+                }
+                while (i < allToasts.length) {
+                    if (!allToasts[i].isRemoved) {
+                        nextToast = i - 1;
+                        break;
+                    }
+                    i++;
+                }
+                // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
+                if (prevToast === undefined && nextToast === undefined)
+                    prevToast = 0;
+                // prioritize going to newer toasts
+                if (prevToast >= 0 && prevToast < toasts.length)
+                    focusWithoutScrolling(toasts[prevToast]);
+                else if (nextToast >= 0 && nextToast < toasts.length)
+                    focusWithoutScrolling(toasts[nextToast]);
+            }
+        }
+        prevVisibleToasts = visibleToasts;
+    };
+    // When the number of visible toasts becomes 0 or the region unmounts,
+    // restore focus to the last element that had focus before the user moved focus
+    // into the region. FocusScope restore focus doesn't update whenever the focus
+    // moves in, it only happens once, so we correct it.
+    const restoreFocus = () => {
+        if (lastFocused?.isConnected) {
+            if (getInteractionModality() === "pointer")
+                focusWithoutScrolling(lastFocused);
+            else
+                lastFocused.focus();
+            lastFocused = null;
+        }
+    };
+    if (isBrowser()) {
+        let live = true;
+        onCleanup(() => {
+            live = false;
+            restoreFocus();
+        });
+        // RA useLayoutEffect / useEffect on visibleToasts: run after the toast list rendered.
+        effect(() => {
+            const visibleToasts = state.visibleToasts();
+            queueMicrotask(() => {
+                if (!live)
+                    return;
+                layoutEffect(visibleToasts);
+                if (visibleToasts.length === 0)
+                    restoreFocus();
+            });
+        });
+    }
+    const within = {
+        props: {
+            onFocusWithin: (e) => {
+                local.isFocused = true;
+                lastFocused = e.relatedTarget;
+                updateTimers();
+            },
+            onBlurWithin: () => {
+                local.isFocused = false;
+                lastFocused = null;
+                updateTimers();
+            },
+        },
+        state: { isFocusWithin: false, globals: [] },
+    };
+    return mergeProps(landmark, hover.hoverProps, {
+        tabIndex: -1,
+        // Mark the toast region as a "top layer", so that it:
+        //   - is not aria-hidden when opening an overlay
+        //   - allows focus even outside a containing focus scope
+        //   - doesn't dismiss overlays when clicking on it, even though it is outside
+        "data-react-aria-top-layer": true,
+        // listen to focus events separate from focuswithin because that will only fire once
+        // and we need to follow all focus changes
+        onFocusIn: (e) => {
+            focusWithinFocus(within, e);
+            const target = getEventTarget(e).closest('[role="alertdialog"]');
+            focusedToast = toasts.findIndex((t) => t === target);
+        },
+        onFocusOut: (e) => {
+            // Deviation: Chromium fires focusout when the focused toast is removed from the DOM (jsdom, which
+            // upstream tests run in, does not). Ignore that one, so the focus-management effect still sees the
+            // removed toast's index and the element focus came from; the state already dropped the toast.
+            if (focusedToast !== null && focusedToast >= 0 && e.relatedTarget == null) {
+                const key = prevVisibleToasts[focusedToast]?.key;
+                if (key !== undefined && !untrack(state.visibleToasts).some((t) => t.key === key))
+                    return;
+            }
+            focusWithinBlur(within, e);
+            focusedToast = -1;
+        },
+    });
+}