@uniflowed/ui 0.8.0 → 0.10.0

package/internal/presence.js

@@ -0,0 +1,249 @@
+// @flow
+//
+// Keeping a closing part on the page until its exit transition has finished.
+//
+// Every overlay part in this package is on the page only while it is open:
+// `Dialog.Body`, `Popover.Body`, `Tooltip.Body`, a menu, a listbox and a toast
+// render `null` once they have closed. That is the right default for
+// accessibility, because a closed dialog that stays in the document is one a
+// screen reader can still wander into. Rendering `null` at the moment of
+// closing, though, leaves a stylesheet nothing to animate: by the time a
+// `[data-state=closed]` rule could apply, the element is gone.
+//
+// `usePresence` is the smallest change that gives a stylesheet an exit and
+// keeps the accessibility default. A part asks it whether to render. The
+// answer stays yes for a while after `open` goes false, and during that time
+// the part is marked `data-state="closed"`, so the stylesheet can transition
+// it out. The hook watches the part's own transitions and says no once they
+// have all finished.
+//
+// # What it owns, and what it does not
+//
+// It owns **one decision: whether a part is on the page.** Everything else
+// about closing stays keyed on `open`, and so it happens at the moment of
+// closing, not after the transition:
+//
+//   * Focus goes back to the trigger when `open` goes false. A reader should
+//     not wait 200ms for the keyboard to answer.
+//   * The scroll lock lifts when `open` goes false, so the page can be
+//     scrolled while the panel fades.
+//   * A closing part is `inert`: it cannot be clicked, focused or found by a
+//     screen reader while it fades. That is the caller's job, so the caller
+//     reads `state` and writes `inert` itself, beside the `data-state` it
+//     already writes. The hook renders nothing.
+//
+// # How it knows the exit has finished
+//
+// In the layout effect of the render that closed the part, before the browser
+// paints it, the hook asks the element for `getAnimations({ subtree: true })`
+// and waits for every one of them to finish. It does not use a timer, a
+// duration read from the stylesheet, or `transitionend`:
+//
+//   * A **timer** would be a second copy of a duration the stylesheet already
+//     holds, and the two drift apart the first time a theme changes one.
+//   * **`transitionend`** does not fire for a transition that was never
+//     started, such as under reduced motion or a property that did not
+//     change. It also fires once per property, and it bubbles up from every
+//     child.
+//   * **`getAnimations()`** returns exactly what is running, CSS transitions
+//     and keyframe animations alike. It brings style up to date first, so the
+//     transitions this commit started are already in the list.
+//
+// An empty list means there is nothing to wait for: no stylesheet, `0s` under
+// reduced motion, or a test DOM that runs no CSS. The part is then removed in
+// the same commit, before anything is painted, which is exactly how it
+// behaved before this hook existed. That is why this is a layout effect: a
+// passive one would paint one frame of a closed part that has no exit to play,
+// and a synchronous test would see a part that is gone in a browser.
+//
+// Two kinds of animation are not waited for, because they will not end on
+// their own: one that repeats for ever (a spinner inside a dialog) and one
+// that is paused. Waiting on either would keep a closed part on the page for
+// as long as the page is open. An animation that is *cancelled* rather than
+// finished counts as finished. Its `finished` promise rejects when the
+// element's style changes under it or it is removed, and a part must never
+// stay on the page because of an animation that will not end.
+//
+// While it waits, the part is `inert`, and an inert element is not hit by the
+// pointer. A part that lingers at `opacity: 0` because something in it is
+// still animating is invisible and cannot be pressed, so it costs the reader
+// nothing.
+//
+// # Reopening part-way through
+//
+// Suppose the reader closes and reopens before the exit has finished. `open`
+// is true again, so the part is simply open: `state` is `"open"` and the part
+// was never removed. The pending wait belongs to an effect that has been
+// cleaned up, so when that exit's animations settle, nothing happens. In CSS
+// the transition reverses from wherever it had got to, which is what a
+// transition does when its target changes.
+//
+// # The Rules of React
+//
+// * **Nothing is read from the DOM while rendering.** `ref.current` is read
+//   only in the effect. Rendering depends on `open` and on the hook's own
+//   state, so this is safe under concurrent rendering and the React Compiler.
+// * **The previous `open` is state, not a ref.** When `open` changes, the
+//   hook updates its state during render. React documents this pattern
+//   ("storing information from previous renders"): it re-renders immediately
+//   without committing the stale answer. So the render that closes a part
+//   already says `present: true`, and the part never disappears for a frame.
+// * **State is set in the layout effect only when there is nothing to wait
+//   for.** That is the measure-then-render pattern React documents for layout
+//   effects: the answer depends on the DOM, and it has to be known before the
+//   browser paints. Otherwise the effect only subscribes to promises and sets
+//   state in their callbacks.
+// * **StrictMode's double effect is harmless.** The first run is cleaned up
+//   before its promise settles. The second run waits on the same animations
+//   and alone removes the part.
+// * **On the server** there are no effects. An open part renders as open, a
+//   closed one renders nothing, and there is nothing to wait for.
+
+import { useLayoutEffect, useState } from "@uniflowed/react";
+
+/** Where a part is in its life: showing, or on its way out. */
+export type PresenceState = "open" | "closed";
+
+/** What `usePresence` answers with. */
+export type Presence = {
+  /**
+   * Whether the part should be rendered at all. True while `open`, and for as
+   * long after it as the part's exit animations run.
+   */
+  readonly present: boolean,
+  /**
+   * What the part should write as `data-state`: `"closed"` whenever `open` is
+   * false. For a part that renders nothing once it is not `present`, that is
+   * exactly while its exit plays. `presenceProps` adds `inert` for that time.
+   */
+  readonly state: PresenceState,
+};
+
+/**
+ * Whether a part that shows while `open` should still be on the page, and
+ * the state to mark it with.
+ *
+ * `open` is the part's own open state, such as `dialog.open`. `ref` is the
+ * element whose animations decide when a closing part may go. It must be the
+ * element the part renders, and it only needs to be set while `present` is
+ * true. A part that mounts closed is not present and costs nothing, and a
+ * part that closes with no running animations is removed in the same commit,
+ * before the browser paints.
+ *
+ * The caller renders `null` when `present` is false. Otherwise it writes
+ * `data-state={state}`, and adds `inert` when `state` is `"closed"`. The
+ * module header explains why focus and the scroll lock stay keyed on `open`
+ * and not on this.
+ */
+export hook usePresence(open: boolean, ref: { readonly current: HTMLElement | null }): Presence {
+  const [shown, setShown] = useState<boolean>(open);
+  const [exiting, setExiting] = useState<boolean>(false);
+
+  // `open` changed since the last render: update the state now. Closing starts
+  // the exit and opening cancels it. React re-renders at once with the new
+  // state, so no frame is committed with the part missing (see the header).
+  if (open !== shown) {
+    setShown(open);
+    setExiting(!open);
+  }
+
+  useLayoutEffect(() => {
+    if (!exiting) {
+      return;
+    }
+    const running = exitAnimations(ref.current);
+    if (running.length === 0) {
+      // Nothing to wait for, so the part goes in this commit, before paint.
+      setExiting(false);
+      return;
+    }
+    let settled = false;
+    const done = () => {
+      if (!settled) {
+        setExiting(false);
+      }
+    };
+    // A cancelled animation rejects `finished`. It is treated as finished too:
+    // a part must not stay on the page waiting for an animation that ended
+    // some other way.
+    Promise.all(running.map((animation) => animation.finished.catch(() => undefined))).then(
+      done,
+      done,
+    );
+    return () => {
+      settled = true;
+    };
+  }, [exiting, ref]);
+
+  return { present: open || exiting, state: open ? "open" : "closed" };
+}
+
+/** The part of an `Animation` this module reads. */
+type Settling = {
+  readonly finished: Promise<mixed>,
+  readonly playState?: string,
+  readonly effect?: ?{
+    readonly getComputedTiming?: () => { readonly endTime?: number, ... },
+    ...
+  },
+  ...
+};
+
+/**
+ * The animations on `element` and inside it that a closing part should wait
+ * for: everything running that will end by itself.
+ *
+ * An animation that repeats for ever has an `endTime` of `Infinity`, and a
+ * paused one does not advance, so neither is in the answer; the module header
+ * says why. A DOM without `getAnimations` answers nothing, which is a part
+ * with nothing to wait for.
+ */
+function exitAnimations(element: HTMLElement | null): $ReadOnlyArray<Settling> {
+  // Read through a structural type: `getAnimations` is recent enough that a
+  // DOM library may not declare it, and a test DOM may not have it.
+  const host: ?{
+    readonly getAnimations?: (options: { subtree: boolean }) => $ReadOnlyArray<Settling>,
+    ...
+  } = element as $FlowFixMe;
+  if (host == null || typeof host.getAnimations !== "function") {
+    return [];
+  }
+  return host.getAnimations({ subtree: true }).filter((animation) => {
+    if (animation.playState === "paused") {
+      return false;
+    }
+    const timing = animation.effect?.getComputedTiming?.();
+    return timing?.endTime == null || Number.isFinite(timing.endTime);
+  });
+}
+
+/**
+ * Whether anything on `element` or inside it is animating towards an end.
+ *
+ * For a part that measures itself: a measurement taken while a transition runs
+ * reads a frame of the transition, and one that briefly changes the element's
+ * own style to measure it would cancel the transition outright.
+ */
+export function isAnimating(element: HTMLElement | null): boolean {
+  return exitAnimations(element).length > 0;
+}
+
+/**
+ * The attributes a part writes: `data-state`, for the stylesheet, and `inert`
+ * while it is closing, so a part on its way out cannot be pressed, focused or
+ * found by a screen reader.
+ *
+ * `inert` is `undefined` otherwise, which React renders as no attribute at
+ * all. That includes a part that has finished closing and is still in the
+ * document, like a disclosure's `hidden` panel: find-in-page does not look
+ * inside an inert element, and `hidden="until-found"` exists to be found.
+ */
+export function presenceProps(presence: Presence): {|
+  "data-state": PresenceState,
+  inert: true | void,
+|} {
+  return {
+    "data-state": presence.state,
+    inert: presence.present && presence.state === "closed" ? true : undefined,
+  };
+}

package/internal/segmented-field.js

@@ -1,7 +1,7 @@
 // @flow
 "use client";
 import * as React from "@uniflowed/react";
-import { useMemo, useState } from "@uniflowed/react";
+import { useMemo, useRef, useState } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 import { Temporal } from "@uniflowed/core/temporal";
 import { useControlled } from "./controlled-state.js";
@@ -104,22 +104,31 @@ export component SegmentedField(time: boolean, options: DateFieldProps) {
   const seconds = granularity === "second";
   const [current, setCurrent] = useControlled(value, defaultValue, onValueChange);
   const [draft, setDraft] = useState<Fields | null>(null);
+  // The draft as the last event handler left it, which can be ahead of the
+  // `draft` this render read: two keystrokes can land before React renders
+  // the first (#1609). Every handler reads and writes the fields through this,
+  // so none of them acts on — or commits — a render's stale copy.
+  const pending = useRef<Fields | null>(null);
   const [announcement, announce] = useState("");
-  const fields = draft ?? fieldsFor(current, time, seconds);
-  const empty = names(time, seconds).every((part) => !fields[part]);
-  const serialized = serialize(fields, time, seconds);
   const minimum =
     minValue == null ? null : serialize(fieldsFor(minValue, time, seconds), time, seconds);
   const maximumValue =
     maxValue == null ? null : serialize(fieldsFor(maxValue, time, seconds), time, seconds);
   if (minimum != null && maximumValue != null && minimum > maximumValue)
     throw new RangeError("DateField minimum exceeds maximum");
-  const invalid =
-    (empty ? required : serialized == null) ||
-    (serialized != null &&
-      ((minimum != null && serialized < minimum) ||
-        (maximumValue != null && serialized > maximumValue) ||
-        isDateUnavailable?.(serialized) === true));
+  const assess = (fields: Fields) => {
+    const empty = names(time, seconds).every((part) => !fields[part]);
+    const serialized = serialize(fields, time, seconds);
+    const invalid =
+      (empty ? required : serialized == null) ||
+      (serialized != null &&
+        ((minimum != null && serialized < minimum) ||
+          (maximumValue != null && serialized > maximumValue) ||
+          isDateUnavailable?.(serialized) === true));
+    return { empty, serialized, invalid };
+  };
+  const fields = draft ?? fieldsFor(current, time, seconds);
+  const { invalid } = assess(fields);
   const digits = useMemo(() => new Intl.NumberFormat(locale, { useGrouping: false }), [locale]);
   const labels: $FlowFixMe = useMemo(
     () => new (Intl as $FlowFixMe).DisplayNames(locale, { type: "dateTimeField" }),
@@ -170,22 +179,34 @@ export component SegmentedField(time: boolean, options: DateFieldProps) {
       result = result.split(digits.format(digit)).join(String(digit));
     return result.replace(/[^0-9]/g, "");
   };
+  const latest = useStableCallback(
+    (): Fields => pending.current ?? fieldsFor(current, time, seconds),
+  );
+  const propose = useStableCallback((next: Fields) => {
+    pending.current = next;
+    setDraft(next);
+  });
   const commit = useStableCallback(() => {
     if (disabled || readOnly) return;
+    const { empty, serialized, invalid } = assess(latest());
     onValidationChange?.(invalid);
     if (invalid) {
       announce("Enter a valid value within the allowed range");
       return;
     }
     setCurrent(empty ? null : serialized);
+    pending.current = null;
     setDraft(null);
     announce(serialized ?? "Cleared");
   });
-  const edit = useStableCallback((part: Segment, text: string) => {
-    if (!disabled && !readOnly) setDraft({ ...fields, [part]: text });
+  const edit = useStableCallback((part: Segment, change: (fields: Fields) => string) => {
+    if (disabled || readOnly) return;
+    const fields = latest();
+    propose({ ...fields, [part]: change(fields) });
   });
   const keyboard = useStableCallback((event: $FlowFixMe, part: Segment) => {
     if (disabled || readOnly) return;
+    const fields = latest();
     const key = event.key;
     if (key === "Enter") {
       event.preventDefault();
@@ -221,12 +242,16 @@ export component SegmentedField(time: boolean, options: DateFieldProps) {
     const nextFields = { ...fields, [part]: String(adjusted) };
     if (!time && (part === "month" || part === "year") && nextFields.day)
       nextFields.day = String(Math.min(Number(nextFields.day), maximum("day", nextFields)));
-    setDraft(nextFields);
+    propose(nextFields);
   });
   const segments = parts.map((part, index) => {
     if (part.type === "dayPeriod") {
       const pm = Number(fields.hour) >= 12;
-      const toggle = () => edit("hour", String((Number(fields.hour) || 0) + (pm ? -12 : 12)));
+      const toggle = () =>
+        edit("hour", (fields) => {
+          const hour = Number(fields.hour) || 0;
+          return String(hour + (hour >= 12 ? -12 : 12));
+        });
       return (
         <span
           key="period"
@@ -286,8 +311,7 @@ export component SegmentedField(time: boolean, options: DateFieldProps) {
         value={text ? encode(text) : ""}
         onChange={(event) => {
           const text = decode(event.currentTarget.value);
-          edit(
-            name,
+          edit(name, (fields) =>
             name === "hour" && hour12 && text && Number(text) <= 12
               ? String((Number(text) % 12) + (Number(fields.hour) >= 12 ? 12 : 0))
               : text,

package/menu.js

@@ -127,6 +127,7 @@ import {
   useTypeahead,
 } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 import {
   ITEM_SELECTOR,
   MENU_SELECTOR,
@@ -310,6 +311,11 @@ component MenuBody(
   // be a parameter default because it is not a constant: it is the answer to
   // "is this the outermost menu", which only this component knows.
   const placement = side ?? (isRoot ? "bottom" : "inline-end");
+  // On the page while its exit runs; focus and the outside press stay keyed on
+  // `open`. A submenu has its own, so a tree that closes at once leaves at once.
+  // `open` is menu-tree metadata; no ref value is read during render.
+  // uf-lint-disable-next-line react-compiler/refs
+  const presence = usePresence(menu.open, bodyRef);
   // useAnchor accepts ref objects and reads them from layout/effects.
   // uf-lint-disable-next-line react-compiler/refs
   const anchored = useAnchor({
@@ -320,9 +326,7 @@ component MenuBody(
     anchorRef: triggerRef,
     avoidCollisions,
     collisionPadding,
-    // `open` is menu-tree metadata; no ref value is read during render.
-    // uf-lint-disable-next-line react-compiler/refs
-    open: menu.open,
+    open: presence.present,
     overlayRef: bodyRef,
     side: placement,
     sideOffset,
@@ -385,13 +389,12 @@ component MenuBody(
 
   const list = useMemo(() => ({ activeId, setActiveId }), [activeId]);
 
-  // `open` is menu-tree metadata; no ref value is read during render.
-  // uf-lint-disable-next-line react-compiler/refs
-  if (!menu.open) {
+  if (!presence.present) {
     return null;
   }
 
   const props = withProps(withoutComposed(rest, ["onKeyDown", "ref"]), {
+    ...presenceProps(presence),
     // `triggered` and `base` are menu-tree metadata, not ref values.
     // uf-lint-disable-next-line react-compiler/refs
     "aria-labelledby": menu.triggered ? `${menu.base}-trigger` : undefined,

package/navigation-menu.js

@@ -43,6 +43,10 @@
 // navigation on the way to a word in the article would be a surprise with
 // nothing to show for it.
 //
+// A group that has just closed does stay for as long as its exit transition
+// runs, marked `data-state="closed"` and `inert`, so it cannot be tabbed into
+// or read while it fades. `internal/presence.js` has the rule.
+//
 // # Name the landmark
 //
 // `<nav>` is a landmark, and a page with two unnamed ones gives a reader a
@@ -51,11 +55,12 @@
 "use client";
 
 import * as React from "@uniflowed/react";
-import { createContext, useContext, useId, useMemo, useState } from "@uniflowed/react";
+import { createContext, useContext, useId, useMemo, useRef, useState } from "@uniflowed/react";
 
 import type { Rest } from "./internal/merge-props.js";
-import { composeHandlers, withoutComposed } from "./internal/merge-props.js";
-import { usePresence } from "./internal/disclosure.js";
+import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
+import { useRegistered } from "./internal/disclosure.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 import { useControlled } from "./internal/controlled-state.js";
 
 type NavigationMenuState = {|
@@ -210,14 +215,25 @@ component NavigationMenuBody(children: renders* NavigationMenuLink, ...rest: Res
   // closed group is removed rather than hidden. The register has to be handed
   // over conditionally rather than the hook called conditionally, because a
   // hook that runs on some renders and not others is a different bug.
-  usePresence(item.expanded ? item.registerBody : undefined);
+  useRegistered(item.expanded ? item.registerBody : undefined);
+  const bodyRef = useRef<HTMLElement | null>(null);
+  const presence = usePresence(item.expanded, bodyRef);
 
-  if (!item.expanded) {
+  if (!presence.present) {
     return null;
   }
 
   return (
-    <ul {...rest} aria-labelledby={item.triggerId} id={item.bodyId}>
+    <ul
+      {...withoutComposed(rest, ["ref"])}
+      {...presenceProps(presence)}
+      aria-labelledby={item.triggerId}
+      id={item.bodyId}
+      // React calls callback refs during commit; the presence hook reads it later.
+      ref={composeRefs(rest.ref, (element: HTMLElement | null) => {
+        bodyRef.current = element;
+      })}
+    >
       {children}
     </ul>
   );

package/number-field.js

@@ -2,7 +2,7 @@
 "use client";
 
 import * as React from "@uniflowed/react";
-import { createContext, useContext, useMemo, useState } from "@uniflowed/react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 import { useControlled } from "./internal/controlled-state.js";
 import type { RenderProp, Rest } from "./internal/merge-props.js";
@@ -119,27 +119,55 @@ component NumberFieldRoot(
   const formatter = useMemo(() => numberFormatter(locale, formatOptions), [locale, formatOptions]);
   const [current, setCurrent] = useControlled(value, defaultValue, onValueChange);
   const [draft, setDraft] = useState<string | null>(null);
+  // The text as the last event handler left it, which can be ahead of the
+  // `draft` and `current` this render read: two keystrokes can land before React
+  // renders the first, and a handler installed by `useStableCallback` sees the
+  // values of the render that installed it. Without this, a second `ArrowUp`
+  // stepped from the same number as the first, and `Enter` committed the value
+  // from before either of them — `internal/segmented-field.js` holds a ref for
+  // the same window (#1609); this is #1614.
+  //
+  // Cleared after every commit rather than only when a value is stored, so a
+  // controlled parent that refuses a change still wins the next keystroke: the
+  // ref only ever spans a batch React has not rendered yet.
+  const proposed = useRef<string | null>(null);
+  useEffect(() => {
+    proposed.current = null;
+  });
+  const assess = (source: string) => {
+    const parsed = parseNumber(source, formatter);
+    const invalid =
+      parsed != null &&
+      (!Number.isFinite(parsed) ||
+        (min != null && parsed < min) ||
+        (max != null && parsed > max) ||
+        Math.abs(
+          (parsed - (min ?? 0)) / increment - Math.round((parsed - (min ?? 0)) / increment),
+        ) > 1e-7);
+    return { parsed, invalid };
+  };
   const text = draft ?? (current == null ? "" : formatter.format(current));
-  const parsed = parseNumber(text, formatter);
-  const invalid =
-    parsed != null &&
-    (!Number.isFinite(parsed) ||
-      (min != null && parsed < min) ||
-      (max != null && parsed > max) ||
-      Math.abs((parsed - (min ?? 0)) / increment - Math.round((parsed - (min ?? 0)) / increment)) >
-        1e-7);
+  const { invalid } = assess(text);
+  // Falls back to `text`, not to `current`: a draft the reader typed and has not
+  // committed is real state, and once the effect above has cleared `proposed` it
+  // is the only record of it. Reading `current` here committed the old value and
+  // threw away an invalid draft the field was meant to keep for correction.
+  const latest = useStableCallback((): string => proposed.current ?? text);
   const assign = useStableCallback((next: number | null) => {
     if (disabled || readOnly) return;
+    proposed.current = next == null ? "" : formatter.format(next);
     setDraft(null);
     setCurrent(next);
     onValidationChange?.(false);
   });
   const commit = useStableCallback(() => {
     if (disabled || readOnly) return;
+    const { parsed, invalid } = assess(latest());
     onValidationChange?.(invalid);
     if (!invalid) assign(parsed);
   });
   const stepBy = useStableCallback((direction: number) => {
+    const { parsed } = assess(latest());
     const start = parsed != null && Number.isFinite(parsed) ? parsed : (current ?? min ?? 0);
     const base = min ?? 0;
     const position = (start - base) / increment;
@@ -164,7 +192,9 @@ component NumberFieldRoot(
     max: upperBound,
     formatter,
     edit: (next: string) => {
-      if (!disabled && !readOnly) setDraft(next);
+      if (disabled || readOnly) return;
+      proposed.current = next;
+      setDraft(next);
     },
     commit,
     stepBy,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Headless, accessible React components whose composition Flow checks, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.8.0",
-    "@uniflowed/hooks": "0.8.0",
-    "@uniflowed/react": "0.8.0",
-    "@uniflowed/state": "0.8.0"
+    "@uniflowed/core": "0.10.0",
+    "@uniflowed/hooks": "0.10.0",
+    "@uniflowed/react": "0.10.0",
+    "@uniflowed/state": "0.10.0"
   },
   "peerDependencies": {
     "react": ">=19"

package/popover.js

@@ -71,7 +71,8 @@ import {
 import { focusable } from "./internal/focus.js";
 import { useAnchor } from "./internal/anchor.js";
 import { useControlled } from "./internal/controlled-state.js";
-import { usePresence } from "./internal/disclosure.js";
+import { useRegistered } from "./internal/disclosure.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 
 export type { Align, LogicalSide, Side } from "./internal/anchor.js";
 
@@ -155,7 +156,7 @@ component PopoverRoot(
 component PopoverTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const popover = usePopover("Popover.Trigger");
   const passed = withoutComposed(rest, ["onClick", "ref"]);
-  usePresence(popover.registerTrigger);
+  useRegistered(popover.registerTrigger);
   const props = withProps(passed, {
     // Only while it is open: an `aria-controls` naming an element that is not
     // in the document tells a reader there is somewhere to go and then has
@@ -221,6 +222,9 @@ component PopoverBody(
   // trigger would undo the thing they just did.
   const left = useRef(false);
   const triggerRef = popover.triggerRef;
+  // On the page while its exit runs; everything else stays keyed on `open`.
+  // uf-lint-disable-next-line react-compiler/refs
+  const presence = usePresence(popover.open, bodyRef);
 
   // useAnchor accepts ref objects and reads them from layout/effects.
   // uf-lint-disable-next-line react-compiler/refs
@@ -231,9 +235,8 @@ component PopoverBody(
     anchorRef: triggerRef,
     avoidCollisions,
     collisionPadding,
-    // `open` is popover metadata; no ref value is read during render.
-    // uf-lint-disable-next-line react-compiler/refs
-    open: popover.open,
+    // Placed for as long as it is on the page, so it leaves from where it was.
+    open: presence.present,
     overlayRef: bodyRef,
     side,
     sideOffset,
@@ -313,9 +316,7 @@ component PopoverBody(
     refs: [bodyRef, triggerRef],
   });
 
-  // `open` is popover metadata; no ref value is read during render.
-  // uf-lint-disable-next-line react-compiler/refs
-  if (!popover.open) {
+  if (!presence.present) {
     return null;
   }
 
@@ -332,7 +333,7 @@ component PopoverBody(
     children,
     "data-align": anchored.align,
     "data-side": anchored.side,
-    "data-state": "open",
+    ...presenceProps(presence),
     // `base` is popover metadata, not a ref value.
     // uf-lint-disable-next-line react-compiler/refs
     id: `${popover.base}-body`,