@uniflowed/ui 0.9.0 → 0.10.0

package/select.js

@@ -156,6 +156,7 @@ import type { Movement } from "./internal/roving-focus.js";
 import { isTypeaheadKey, itemsOf, moveTo, useTypeahead } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
 import { FormValue } from "./internal/form-value.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 
 export type { Align, LogicalSide, Side } from "./internal/anchor.js";
 
@@ -642,6 +643,9 @@ component SelectList(
     select.setOpen(false);
     select.setActiveId(null);
   });
+  // On the page while its exit runs. The trigger's `aria-controls` and
+  // `aria-activedescendant`, and the outside press, stay keyed on `open`.
+  const presence = usePresence(select.open, listRef);
 
   // The popup a select opens is the one case where the trigger's *width* is
   // part of the design rather than a detail: a list narrower than the button it
@@ -654,7 +658,7 @@ component SelectList(
     anchorRef: triggerRef,
     avoidCollisions,
     collisionPadding,
-    open: select.open,
+    open: presence.present,
     overlayRef: listRef,
     side,
     sideOffset,
@@ -713,7 +717,7 @@ component SelectList(
     refs: [listRef, triggerRef],
   });
 
-  if (!select.open) {
+  if (!presence.present) {
     return null;
   }
 
@@ -722,6 +726,7 @@ component SelectList(
   return (
     <div
       {...passed}
+      {...presenceProps(presence)}
       aria-labelledby={select.labelled ? `${select.base}-label` : undefined}
       data-align={anchored.align}
       data-side={anchored.side}

package/tabs.js

@@ -30,6 +30,27 @@
 // component that swallows it has taken scrolling away from every reader who
 // uses the keyboard to read.
 //
+// # Where the selected tab is, for an indicator that slides
+//
+// An underline that moves from one tab to the next, rather than one that goes
+// out under the old tab and comes on under the new, needs one number no
+// stylesheet can work out: where the selected tab is inside the list. So
+// `Tabs.List` measures it and writes four custom properties on itself:
+//
+//   --uf-tabs-indicator-left     --uf-tabs-indicator-top
+//   --uf-tabs-indicator-width    --uf-tabs-indicator-height
+//
+// The selected tab's box, relative to the list's padding box — the box an
+// absolutely positioned child of the list is placed in — in CSS pixels. They
+// are **numbers without a unit**, which is the one form a stylesheet can use
+// both ways: `calc(var(--uf-tabs-indicator-left) * 1px)` is a length, and
+// `scaleX(var(--uf-tabs-indicator-width))` stretches a one-pixel bar to the
+// tab's width, which moves the indicator with `transform` alone and lays
+// nothing out while it travels. They are measured again whenever the list
+// renders and whenever the list or a tab changes size, and removed when no tab
+// is selected. As everywhere in this package, the numbers are the component's
+// and the look is the stylesheet's: nothing is drawn here.
+//
 // # Composition is type-checked
 //
 // `Tabs.List` takes `renders* TabsTab`, so putting a `<button>` in the list is
@@ -47,12 +68,18 @@ import {
   useEffect,
   useId,
   useMemo,
+  useRef,
   useState,
 } from "@uniflowed/react";
 
 import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
-import { composeHandlers, withProps, withoutComposed } from "./internal/merge-props.js";
-import { moveOnKey } from "./internal/roving-focus.js";
+import {
+  composeHandlers,
+  composeRefs,
+  withProps,
+  withoutComposed,
+} from "./internal/merge-props.js";
+import { itemsOf, moveOnKey } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
 import type { Orientation } from "./internal/roving-focus.js";
 
@@ -147,7 +174,45 @@ component TabsRoot(
  */
 component TabsList(children: renders* TabsTab, render?: RenderProp, ...rest: Rest) {
   const tabs = useTabs("Tabs.List");
-  const props = withProps(withoutComposed(rest, ["onKeyDown"]), {
+  const listRef = useRef<HTMLElement | null>(null);
+  const selected = tabs.selected;
+
+  // Every render, with no dependency list, for the reason
+  // `internal/disclosure.js` gives for its height: the tabs a caller renders
+  // can change on any render, and what the indicator follows is where the
+  // selected one ended up. Every write is compared first, so a render that
+  // moved nothing writes nothing.
+  useEffect(() => {
+    const list = listRef.current;
+    if (list != null) {
+      placeIndicator(list);
+    }
+  });
+
+  // A tab can move without anything here rendering: a web font arriving, a
+  // label a sibling component translated, the window narrowing a list that
+  // wraps. Keyed on `selected` so the observer is watching the tabs there are
+  // now, which is when a new one may have arrived.
+  useEffect(() => {
+    const list = listRef.current;
+    const view = list?.ownerDocument?.defaultView;
+    if (list == null || view == null) {
+      return;
+    }
+    // Read off the window, for the reason `internal/anchor.js` gives.
+    const host: $FlowFixMe = view;
+    if (typeof host.ResizeObserver !== "function") {
+      return;
+    }
+    const sizes = new host.ResizeObserver(() => placeIndicator(list));
+    sizes.observe(list);
+    for (const tab of itemsOf(list, TAB, TAB_LIST)) {
+      sizes.observe(tab);
+    }
+    return () => sizes.disconnect();
+  }, [selected]);
+
+  const props = withProps(withoutComposed(rest, ["onKeyDown", "ref"]), {
     // A screen reader announces the axis, and it is also what tells a reader
     // which arrow keys to try.
     "aria-orientation": tabs.orientation,
@@ -159,8 +224,8 @@ component TabsList(children: renders* TabsTab, render?: RenderProp, ...rest: Res
       // set inside somebody else's `dir="rtl"` walks the right way without
       // the caller having had to know it needed to say so.
       const next = moveOnKey(event, list, {
-        item: '[role="tab"]',
-        owner: '[role="tablist"]',
+        item: TAB,
+        owner: TAB_LIST,
         orientation: tabs.orientation,
         wrap: true,
         skipDisabled: true,
@@ -169,6 +234,11 @@ component TabsList(children: renders* TabsTab, render?: RenderProp, ...rest: Res
         tabs.select(next.getAttribute("data-value") ?? "");
       }
     }),
+    // React calls callback refs during commit; the indicator effects read it later.
+    // uf-lint-disable-next-line react-compiler/refs
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      listRef.current = element;
+    }),
     role: "tablist",
   });
 
@@ -178,6 +248,57 @@ component TabsList(children: renders* TabsTab, render?: RenderProp, ...rest: Res
   return <div {...props} />;
 }
 
+/** A tab, and the list that owns it, as the arrow keys and the indicator find them. */
+const TAB = '[role="tab"]';
+const TAB_LIST = '[role="tablist"]';
+
+/** The four properties the module header describes, in the order they are written. */
+const INDICATOR = [
+  "--uf-tabs-indicator-left",
+  "--uf-tabs-indicator-top",
+  "--uf-tabs-indicator-width",
+  "--uf-tabs-indicator-height",
+];
+
+/**
+ * Write the selected tab's box on `list`, or take it away when none is.
+ *
+ * Measured from the two bounding boxes rather than from `offsetLeft`, which is
+ * relative to the nearest *positioned* ancestor — the list only if a
+ * stylesheet happened to position it. The list's border is taken off and its
+ * scroll added back, so the numbers are in the padding box an absolutely
+ * positioned indicator is placed in, and a tab scrolled into view in a long
+ * list is still underlined where it is.
+ */
+function placeIndicator(list: HTMLElement): void {
+  const tab = itemsOf(list, TAB, TAB_LIST).find(
+    (each) => each.getAttribute("aria-selected") === "true",
+  );
+  const style = list.style;
+  if (tab == null) {
+    for (const name of INDICATOR) {
+      style.removeProperty(name);
+    }
+    return;
+  }
+  const outer = list.getBoundingClientRect();
+  const inner = tab.getBoundingClientRect();
+  const values = [
+    inner.left - outer.left - list.clientLeft + list.scrollLeft,
+    inner.top - outer.top - list.clientTop + list.scrollTop,
+    inner.width,
+    inner.height,
+  ];
+  INDICATOR.forEach((name, index) => {
+    // Two decimal places: enough for a device pixel at any zoom, and a number
+    // that does not change in its fifteenth digit between two renders.
+    const value = String(Math.round(values[index] * 100) / 100);
+    if (style.getPropertyValue(name) !== value) {
+      style.setProperty(name, value);
+    }
+  });
+}
+
 /**
  * One tab. Exactly one of them is in the page's tab order.
  *

package/toast.js

@@ -88,6 +88,16 @@
 // A notification given `duration: null` never expires at all, which is what
 // anything carrying an action should be.
 //
+// # Leaving
+//
+// A notification is taken out of the queue the moment it is dismissed, and it
+// is not taken off the screen at that moment. The region remembers it and
+// keeps rendering it where it was, with `data-state="closed"` and `inert`, for
+// as long as its exit transition runs; `internal/presence.js` decides when
+// that is. `inert` is what keeps this honest: a leaving notification is out of
+// the accessibility tree and out of the tab order at once, so a reader is
+// never told about, or tabbed into, something that has already gone.
+//
 // # The queue lives outside React
 //
 // `toast("Saved")` is called from an event handler, from a `catch`, from a
@@ -141,6 +151,7 @@ import { useTimeout } from "@uniflowed/hooks/timing";
 
 import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 
 /** How loudly a notification interrupts. */
 export type Urgency = "polite" | "assertive";
@@ -319,6 +330,74 @@ function readQueue(): $ReadOnlyArray<Notification> {
 
 const NotificationContext: React.Context<Notification | null> = createContext(null);
 
+/** A notification the region is rendering, and whether it is still in the queue. */
+type Shown = {|
+  readonly notification: Notification,
+  /** False once it has been dismissed, while its exit plays. */
+  readonly open: boolean,
+|};
+
+/** What a `Toast.Root` is told about its own life by the region. */
+type ToastLife = {|
+  readonly open: boolean,
+  /** Called once a dismissed notification's exit has finished. */
+  readonly gone: () => void,
+|};
+
+const ToastLifeContext: React.Context<ToastLife | null> = createContext(null);
+
+/**
+ * What the region renders next, given what it rendered and what is queued now.
+ *
+ * Everything queued is open, in queue order. Everything the region was showing
+ * that is no longer queued stays, closed, where it was, so a notification
+ * leaving from the middle of the stack does not jump to the end of it first.
+ * A notification that arrives is placed after the last one before it in the
+ * queue, which for a queue that only ever appends is the end.
+ */
+function nextShown(
+  previous: $ReadOnlyArray<Shown>,
+  queued: $ReadOnlyArray<Notification>,
+): $ReadOnlyArray<Shown> {
+  const byId = new Map<string, Notification>();
+  for (const notification of queued) {
+    byId.set(notification.id, notification);
+  }
+  const placed = new Set<string>();
+  const next: Array<Shown> = [];
+  let at = 0;
+  for (const entry of previous) {
+    const current = byId.get(entry.notification.id);
+    if (current == null) {
+      next.push(entry.open ? { notification: entry.notification, open: false } : entry);
+      continue;
+    }
+    // Whatever arrived in the queue before this one goes in front of it.
+    while (at < queued.length && queued[at].id !== current.id) {
+      const arrived = queued[at];
+      if (
+        !placed.has(arrived.id) &&
+        !previous.some((each) => each.notification.id === arrived.id)
+      ) {
+        next.push({ notification: arrived, open: true });
+        placed.add(arrived.id);
+      }
+      at += 1;
+    }
+    next.push({ notification: current, open: true });
+    placed.add(current.id);
+    at += 1;
+  }
+  for (; at < queued.length; at += 1) {
+    const arrived = queued[at];
+    if (!placed.has(arrived.id)) {
+      next.push({ notification: arrived, open: true });
+      placed.add(arrived.id);
+    }
+  }
+  return next;
+}
+
 hook useNotification(part: string): Notification {
   const notification = useContext(NotificationContext);
   if (notification == null) {
@@ -387,12 +466,37 @@ component ToastRegion(
   // pile that hides what arrived first. What is over the limit is not rendered
   // at all, which is also what keeps its countdown from running before anyone
   // has seen it.
-  const shown = queued.slice(0, limit);
+  const visible = queued.slice(0, limit);
+
+  // What was queued at the last render, and what the region is rendering: the
+  // visible notifications, and the dismissed ones still playing their exit.
+  // Brought up to date during render, the pattern React documents for
+  // "storing information from previous renders", so a dismissal never commits
+  // a frame without the notification that is leaving.
+  const [seen, setSeen] = useState<$ReadOnlyArray<Notification>>(visible);
+  const [shown, setShown] = useState<$ReadOnlyArray<Shown>>(() =>
+    visible.map((notification) => ({ notification, open: true })),
+  );
+  if (!sameNotifications(seen, visible)) {
+    setSeen(visible);
+    setShown(nextShown(shown, visible));
+  }
 
-  const place = (notification: Notification) => (
-    <NotificationContext.Provider key={notification.id} value={notification}>
-      {children(notification)}
-    </NotificationContext.Provider>
+  const place = (entry: Shown) => (
+    <ToastLifeContext.Provider
+      key={entry.notification.id}
+      value={{
+        open: entry.open,
+        gone: () =>
+          setShown((current) =>
+            current.filter((each) => each.open || each.notification.id !== entry.notification.id),
+          ),
+      }}
+    >
+      <NotificationContext.Provider value={entry.notification}>
+        {children(entry.notification)}
+      </NotificationContext.Provider>
+    </ToastLifeContext.Provider>
   );
 
   return (
@@ -408,15 +512,23 @@ component ToastRegion(
       tabIndex={-1}
     >
       <div aria-atomic="true" aria-live="polite" role="status">
-        {shown.filter((each) => each.urgency === "polite").map(place)}
+        {shown.filter((each) => each.notification.urgency === "polite").map(place)}
       </div>
       <div aria-atomic="true" aria-live="assertive" role="alert">
-        {shown.filter((each) => each.urgency === "assertive").map(place)}
+        {shown.filter((each) => each.notification.urgency === "assertive").map(place)}
       </div>
     </div>
   );
 }
 
+/** Whether two lists hold the same notifications, in the same order. */
+function sameNotifications(
+  left: $ReadOnlyArray<Notification>,
+  right: $ReadOnlyArray<Notification>,
+): boolean {
+  return left.length === right.length && left.every((each, index) => each === right[index]);
+}
+
 /**
  * One notification, and the countdown that stops.
  *
@@ -434,6 +546,18 @@ component ToastRoot(children: React.Node, ...rest: Rest) {
   const [titled, setTitled] = useState(false);
   const [described, setDescribed] = useState(false);
   const passed = withoutComposed(rest, ["ref"]);
+  // Outside a `Toast.Region` — a notification rendered on its own, in a story
+  // or a test — there is no queue to leave, so it is simply open.
+  const life = useContext(ToastLifeContext);
+  const presence = usePresence(life?.open ?? true, elementRef);
+  const gone = life?.gone;
+  const present = presence.present;
+
+  useEffect(() => {
+    if (!present) {
+      gone?.();
+    }
+  }, [present, gone]);
 
   const hovered = useHover(elementRef);
   const focusInside = useFocusWithin(elementRef);
@@ -481,10 +605,15 @@ component ToastRoot(children: React.Node, ...rest: Rest) {
     [base],
   );
 
+  if (!present) {
+    return null;
+  }
+
   return (
     <ToastPartsContext.Provider value={parts}>
       <div
         {...passed}
+        {...presenceProps(presence)}
         aria-describedby={described ? parts.descriptionId : undefined}
         aria-labelledby={titled ? parts.titleId : undefined}
         ref={composeRefs(rest.ref, (node) => {

package/tooltip.js

@@ -88,6 +88,7 @@ import {
 } from "./internal/hover-intent.js";
 import { useAnchor } from "./internal/anchor.js";
 import { useControlled } from "./internal/controlled-state.js";
+import { presenceProps, usePresence } from "./internal/presence.js";
 
 export type { Align, LogicalSide, Side } from "./internal/anchor.js";
 
@@ -343,6 +344,9 @@ component TooltipBody(
     intent.cancel();
     tooltip.setOpen(false);
   });
+  // On the page while its exit runs. The trigger's `aria-describedby` and
+  // everything below stay keyed on `open`.
+  const presence = usePresence(open, bodyRef);
 
   const anchored = useAnchor({
     align,
@@ -350,7 +354,7 @@ component TooltipBody(
     anchorRef: triggerRef,
     avoidCollisions,
     collisionPadding,
-    open,
+    open: presence.present,
     overlayRef: bodyRef,
     side,
     sideOffset,
@@ -377,7 +381,7 @@ component TooltipBody(
     };
   }, [open, intent, closeDelay]);
 
-  if (!open) {
+  if (!presence.present) {
     return null;
   }
 
@@ -385,7 +389,7 @@ component TooltipBody(
     children,
     "data-align": anchored.align,
     "data-side": anchored.side,
-    "data-state": "open",
+    ...presenceProps(presence),
     id: `${tooltip.base}-body`,
     // React calls callback refs during commit; placement effects read it later.
     // uf-lint-disable-next-line react-compiler/refs