@uniflowed/ui 0.0.0-alpha.9 → 0.2.0

package/combobox.js

@@ -49,6 +49,69 @@
 // the active option is cleared when the option it named is filtered away, the
 // count is remeasured, and `aria-activedescendant` never names an id that has
 // left the document.
+//
+// # Groups, and the two elements that had to change to have them
+//
+// A `listbox` may own `option` and `group` elements, and nothing else. This
+// module rendered a `<ul>` of `<li>`s, which is the right shape for a flat list
+// and the wrong one the moment a group appears: a group's options belong inside
+// the group, a group inside a `<ul>` is an `<li>`, and an `<li>` inside an
+// `<li>` is not something HTML has. The parser closes the outer one, so the
+// markup a server sent and the tree a browser built would disagree — which
+// React finds at hydration, in production, on the one page that had groups.
+//
+// The way out that keeps the list is a second `<ul role="presentation">` around
+// each group's options, and it was rejected twice over. It works by an
+// inheritance rule — a presentational role propagating to the elements its own
+// role requires, except where a child carries an explicit role — which is
+// correct in the specification and up to the software, and this package's whole
+// premise is not building on that distinction. It would also leave the two
+// halves of one pattern with two differently shaped listboxes, for a reason
+// neither module could state.
+//
+// So `Combobox.List` and `Combobox.Option` are `div`s, exactly as `select.js`'s
+// are and for the reason its header already gives at length. That is a change
+// to what this component renders, and a caller whose stylesheet names `ul` or
+// `li` will see it; nothing else moved, because the roles were always the part
+// that carried the meaning.
+//
+// `Combobox.Group` and `Combobox.GroupLabel` are then `Select.Group` and
+// `Select.GroupLabel`. The second name is deliberate rather than clumsy:
+// `Combobox.Label` already means the *field's* label, so the heading over a
+// group of options cannot also be `Combobox.Label`, and shadcn's single
+// `SelectLabel` — which is the group's — has no name left for the field's.
+//
+// There is no `Combobox.Separator`, and that is the same decision `select.js`
+// made about the tree rather than a different one about the part. A rule
+// between two groups of options cannot be a `role="separator"`, because a
+// listbox may not own one; it is `aria-hidden` decoration, and a
+// `<div aria-hidden="true">` is something a caller writes without needing a
+// part for it. `Select.Separator` exists because a select's options are a fixed
+// list somebody wrote out and the rule between two of them is fixed too. A
+// combobox's options are whatever survived the filter, so a rule that stays put
+// while the groups either side of it disappear is decoration in the wrong
+// place, and the caller who filtered is the one who knows where it goes.
+//
+// # A command palette is a composition, not a seventh module
+//
+// `crates/uf_lib/src/ui.rs` lists a `Command` with `Root`, `Input`, `List`,
+// `Item`, `Group` and `Empty`, and with groups here every one of those parts
+// now exists: a palette is a `Combobox` inside a `Dialog`, opened by
+// `useKeyCombo("mod+k", …)` from `@uniflowed/hooks/keyboard`, with
+// `Combobox.Group` for the sections, `Combobox.Empty` for the no-results state
+// and `Combobox.Status` for the count. `ubugeeei-redundancy.md`'s objection to
+// small lookalikes is an objection to shipping a module whose entire content is
+// a composition the reader could have written, so the answer is the
+// documentation page — `docs/app/reference/ui`, under "A command palette" —
+// and not a seventh module.
+//
+// One behaviour a `Command` module would genuinely add is not in that page,
+// because it is not implemented anywhere: a palette whose filter matched
+// nothing still traps focus, so `Tab` cycles between a text field and a close
+// button while the reader is told there are no results. That is `Dialog`'s
+// question rather than this module's — a modal with nothing in it to reach is
+// the general case — and it is left open on purpose rather than answered here
+// by a component that would only look like it had.
 
 "use client";
 
@@ -64,12 +127,18 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import { useInteractOutside } from "./interactions.js";
+
+import type { Align, LogicalSide } from "./internal/anchor.js";
+import { useAnchor } from "./internal/anchor.js";
 import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
 import { itemsOf, moveTo } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
 import { FormValue } from "./internal/form-value.js";
 
+export type { Align, LogicalSide, Side } from "./internal/anchor.js";
+
 const OPTION_SELECTOR = '[role="option"]';
 const LISTBOX_SELECTOR = '[role="listbox"]';
 
@@ -96,7 +165,7 @@ type ComboboxState = {|
    * and the list does not exist to be measured until the next commit. A ref
    * rather than state because nothing renders it.
    */
-  readonly pendingActive: { current: "first" | "last" | null },
+  readonly pendingActiveRef: { current: "first" | "last" | null },
   readonly inputRef: { current: HTMLElement | null },
   readonly listRef: { current: HTMLElement | null },
   /** How many options are in the list, for the live region. */
@@ -116,6 +185,14 @@ hook useCombobox(part: string): ComboboxState {
   return state;
 }
 
+/** The id of a group's label, so `Combobox.Group` only claims one that exists. */
+type ComboboxGroupState = {|
+  readonly labelId: string,
+  readonly registerLabel: (present: boolean) => void,
+|};
+
+const ComboboxGroupContext: React.Context<ComboboxGroupState | null> = createContext(null);
+
 /**
  * The combobox.
  *
@@ -154,7 +231,7 @@ export component ComboboxRoot(
   const [activeId, setActiveId] = useState<string | null>(null);
   const [count, setCount] = useState(0);
   const [labelled, setLabelled] = useState(false);
-  const pendingActive = useRef<"first" | "last" | null>(null);
+  const pendingActiveRef = useRef<"first" | "last" | null>(null);
   const inputRef = useRef<HTMLElement | null>(null);
   const listRef = useRef<HTMLElement | null>(null);
 
@@ -188,7 +265,7 @@ export component ComboboxRoot(
       clear,
       activeId,
       setActiveId,
-      pendingActive,
+      pendingActiveRef,
       inputRef,
       listRef,
       count,
@@ -235,6 +312,8 @@ export component ComboboxLabel(children: React.Node, ...rest: Rest) {
 /** The text field, and every key the pattern defines. */
 export component ComboboxInput(...rest: Rest) {
   const combobox = useCombobox("Combobox.Input");
+  // `rest` filtering is render-time props work; ref objects are only passed through later.
+  // uf-lint-disable-next-line react-compiler/refs
   const passed = withoutComposed(rest, ["onChange", "onKeyDown", "ref"]);
 
   /** The options in the document right now, in document order. */
@@ -248,7 +327,8 @@ export component ComboboxInput(...rest: Rest) {
     if (items.length === 0) {
       // The list is not in the document yet, so leave an instruction for the
       // commit that puts it there.
-      combobox.pendingActive.current = movement === "next" ? "first" : "last";
+      // uf-lint-disable-next-line react-compiler/immutability
+      combobox.pendingActiveRef.current = movement === "next" ? "first" : "last";
       return;
     }
     const at = items.findIndex((item) => item.id === combobox.activeId);
@@ -281,6 +361,8 @@ export component ComboboxInput(...rest: Rest) {
       // The browser's own dropdown would sit on top of this one.
       autoComplete="off"
       id={`${combobox.base}-input`}
+      // Input events read list refs and update the virtual active descendant.
+      // uf-lint-disable-next-line react-compiler/refs
       onChange={composeHandlers(rest.onChange, (event: $FlowFixMe) => {
         combobox.setText(event.target.value);
         combobox.setOpen(true);
@@ -289,6 +371,8 @@ export component ComboboxInput(...rest: Rest) {
         // Enter takes something the reader can no longer see.
         combobox.setActiveId(null);
       })}
+      // Key events read list refs and update the virtual active descendant.
+      // uf-lint-disable-next-line react-compiler/refs
       onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
           event.preventDefault();
@@ -334,7 +418,10 @@ export component ComboboxInput(...rest: Rest) {
           combobox.setActiveId(null);
         }
       })}
+      // React calls callback refs during commit; keyboard handlers read the input later.
+      // uf-lint-disable-next-line react-compiler/refs
       ref={composeRefs(rest.ref, (element) => {
+        // uf-lint-disable-next-line react-compiler/immutability
         combobox.inputRef.current = element;
       })}
       role="combobox"
@@ -347,23 +434,60 @@ export component ComboboxInput(...rest: Rest) {
 /**
  * The list of options, in the document only while it is open.
  *
+ * A `div` rather than the `ul` this was, because a listbox that owns groups
+ * cannot be a list without a second `list` role between a group and the options
+ * it holds. The module header has the argument and what it costs a caller.
+ *
  * It also keeps the two things that have to stay true as the caller filters:
  * the count the live region announces, and the invariant that
  * `aria-activedescendant` never names an option that has left the list.
  */
-export component ComboboxList(children: renders* ComboboxOption, ...rest: Rest) {
+export component ComboboxList(
+  children: renders* (ComboboxOption | ComboboxGroup),
+  align?: Align = "start",
+  alignOffset?: number = 0,
+  avoidCollisions?: boolean = true,
+  collisionPadding?: number = 0,
+  side?: LogicalSide = "bottom",
+  sideOffset?: number = 0,
+  ...rest: Rest
+) {
   const combobox = useCombobox("Combobox.List");
-  const { activeId, count, listRef, inputRef, pendingActive, setActiveId, setCount } = combobox;
+  const { activeId, count, listRef, inputRef, pendingActiveRef, setActiveId, setCount } = combobox;
   const close = useStableCallback(() => {
     combobox.setOpen(false);
     combobox.setActiveId(null);
   });
 
+  // Anchored to the *field*, not to a wrapper the caller may not have written.
+  // `align="start"` because a list of options belongs under the edge the text
+  // starts at, and `--uf-anchor-trigger-width` is what a stylesheet reads to
+  // make it exactly as wide as the field.
+  // useAnchor accepts ref objects and reads them from layout/effects.
+  // uf-lint-disable-next-line react-compiler/refs
+  const anchored = useAnchor({
+    align,
+    alignOffset,
+    // uf-lint-disable-next-line react-compiler/refs
+    anchorRef: inputRef,
+    avoidCollisions,
+    collisionPadding,
+    // `open` is combobox metadata; no ref value is read during render.
+    // uf-lint-disable-next-line react-compiler/refs
+    open: combobox.open,
+    // uf-lint-disable-next-line react-compiler/refs
+    overlayRef: listRef,
+    side,
+    sideOffset,
+  });
+
   // No dependency list on purpose: what this reads is the *rendered* options,
   // and they change whenever the caller re-filters — which is a change to
   // `children` that no dependency list can describe. Every write below is
   // guarded by a comparison, so the effect settles after one extra pass rather
   // than looping.
+  // This effect measures caller-rendered options after commit.
+  // uf-lint-disable-next-line react-compiler/immutability
   useEffect(() => {
     const list = listRef.current;
     if (list == null) {
@@ -379,9 +503,10 @@ export component ComboboxList(children: renders* ComboboxOption, ...rest: Rest)
       setCount(items.length);
     }
 
-    const wanted = pendingActive.current;
+    const wanted = pendingActiveRef.current;
     if (wanted != null) {
-      pendingActive.current = null;
+      // uf-lint-disable-next-line react-compiler/immutability
+      pendingActiveRef.current = null;
       setActiveId(moveTo(items, -1, wanted, false)?.id ?? null);
       return;
     }
@@ -392,33 +517,18 @@ export component ComboboxList(children: renders* ComboboxOption, ...rest: Rest)
     }
   });
 
-  // Keyed on `combobox.open`, and that is load-bearing. This component is
-  // mounted the whole time and only *renders* while the list is open, so keyed
-  // on the stable callbacks alone the effect ran once — on the first commit,
-  // when `listRef.current` was still null — and never again. The listener was
-  // never attached, and a press outside the combobox closed nothing.
-  useEffect(() => {
-    const list = listRef.current;
-    if (list == null) {
-      return;
-    }
-    const document = list.ownerDocument;
-    const onOutsidePress = (event: Event) => {
-      const target: $FlowFixMe = event.target;
-      if (target == null || list.contains(target)) {
-        return;
-      }
-      // The field is not "outside": pressing it is how a reader gets back to
-      // typing, and closing on it would fight the input's own handlers.
-      const input = inputRef.current;
-      if (input != null && input.contains(target)) {
-        return;
-      }
-      close();
-    };
-    document.addEventListener("pointerdown", onOutsidePress, true);
-    return () => document.removeEventListener("pointerdown", onOutsidePress, true);
-  }, [combobox.open, close, listRef, inputRef]);
+  // The field is not "outside": pressing it is how a reader gets back to
+  // typing, and closing on it would fight the input's own handlers.
+  //
+  // The refs are read when a press arrives rather than when the listener is
+  // attached. This component is mounted the whole time and only *renders*
+  // while the list is open, and the listener that was attached on the first
+  // commit — when `listRef.current` was still null — closed nothing at all.
+  useInteractOutside({
+    isDisabled: !combobox.open,
+    onInteractOutside: () => close(),
+    refs: [listRef, inputRef],
+  });
 
   if (!combobox.open) {
     return null;
@@ -427,9 +537,11 @@ export component ComboboxList(children: renders* ComboboxOption, ...rest: Rest)
   const passed = withoutComposed(rest, ["ref"]);
 
   return (
-    <ul
+    <div
       {...passed}
       aria-labelledby={combobox.labelled ? `${combobox.base}-label` : undefined}
+      data-align={anchored.align}
+      data-side={anchored.side}
       id={`${combobox.base}-list`}
       ref={composeRefs(rest.ref, (element) => {
         listRef.current = element;
@@ -437,7 +549,7 @@ export component ComboboxList(children: renders* ComboboxOption, ...rest: Rest)
       role="listbox"
     >
       {children}
-    </ul>
+    </div>
   );
 }
 
@@ -463,7 +575,7 @@ export component ComboboxOption(
   const passed = withoutComposed(rest, ["onClick", "onPointerDown", "onPointerMove"]);
 
   return (
-    <li
+    <div
       {...passed}
       aria-disabled={disabled ? "true" : undefined}
       aria-selected={combobox.value === value ? "true" : "false"}
@@ -495,7 +607,72 @@ export component ComboboxOption(
       role="option"
     >
       {children}
-    </li>
+    </div>
+  );
+}
+
+/**
+ * A named group of options.
+ *
+ * The name reaches the group through `aria-labelledby`, and only while a
+ * `Combobox.GroupLabel` is rendered — the same rule, and the same reason, as
+ * `Select.Group` and `Menu.Group` before it.
+ *
+ * Nothing about `Combobox.Input` had to learn that groups exist. It asks for
+ * `[role="option"]` elements whose nearest `[role="listbox"]` is this list, and
+ * a group is not a listbox — so the arrow keys walk an option at a time across
+ * a boundary they cannot see, and the heading is never a place the cursor can
+ * land, because it is not an option.
+ *
+ * `children` is the true statement rather than a `React.Node` that would take
+ * anything: a `group` inside a `listbox` may own options and its own heading,
+ * and nothing else. `Select.Group` says the same since ubugeeei-prod/uf#562 —
+ * it is the same listbox, and it took a second breaking change to get there.
+ */
+export component ComboboxGroup(
+  children: renders* (ComboboxOption | ComboboxGroupLabel),
+  ...rest: Rest
+) {
+  const base = useId();
+  const [labelled, setLabelled] = useState(false);
+
+  const group = useMemo(() => ({ labelId: `${base}-label`, registerLabel: setLabelled }), [base]);
+
+  return (
+    <ComboboxGroupContext.Provider value={group}>
+      <div {...rest} aria-labelledby={labelled ? group.labelId : undefined} role="group">
+        {children}
+      </div>
+    </ComboboxGroupContext.Provider>
+  );
+}
+
+/**
+ * The heading of a `Combobox.Group`.
+ *
+ * `role="presentation"` because the group already carries the name: left as
+ * ordinary content a reader would hear the heading once as the group's name and
+ * again as a stray line of text among the options.
+ *
+ * This is not `Combobox.Label`. That one names the field; this one names a
+ * group of options, and a combobox with groups has both.
+ */
+export component ComboboxGroupLabel(children: React.Node, ...rest: Rest) {
+  const group = useContext(ComboboxGroupContext);
+  const register = group?.registerLabel;
+
+  useEffect(() => {
+    if (register == null) {
+      return;
+    }
+    register(true);
+    return () => register(false);
+  }, [register]);
+
+  return (
+    <div {...rest} id={group?.labelId} role="presentation">
+      {children}
+    </div>
   );
 }
 

package/context-menu.js

@@ -0,0 +1,215 @@
+// @flow
+//
+// The same menu, opened by the right button.
+//
+// Everything below the trigger is `menu.js` — the arrow keys, typeahead,
+// submenus, `Escape` stacking, the roving tab stop and the two checkable item
+// kinds — because a context menu *is* a menu and a second implementation of one
+// would be a second set of keyboard bugs. What is here is the two things that
+// make it a component rather than an `oncontextmenu` handler, and both of them
+// are the parts people leave out.
+//
+// # It has to be reachable from the keyboard
+//
+// `Shift+F10` and the `ContextMenu` key open a context menu, on every platform,
+// and a component that only listens for `contextmenu` is a WCAG 2.1.1 failure:
+// the commands in it are reachable by pointer and by nothing else. Long press
+// is the touch equivalent of the same gesture, and `@uniflowed/hooks/dom`'s
+// `useLongPress` already knows what a long press is — including that a press
+// that moves is a drag and not a press.
+//
+// The trigger is therefore focusable. That is a real cost and it is stated
+// rather than hidden: a list of two hundred rows with a context menu on each is
+// two hundred tab stops. A caller whose trigger already *contains* something
+// focusable should pass `tabIndex={-1}` and let the keys arrive from inside it,
+// which they do — the handler is on the trigger and the event bubbles. What is
+// not on offer is leaving the keys out, because the alternative to a tab stop
+// is a command a keyboard cannot reach.
+//
+// # It opens at a point, and sometimes at an element
+//
+// A context menu opened by the pointer belongs at the pointer — the reader is
+// looking at their cursor, and a menu that appeared against the top-left corner
+// of a table row is a menu they have to go and find. Opened by the keyboard
+// there is no pointer, and the menu belongs against the element that has focus.
+//
+// So the anchor is a rectangle rather than an element, and
+// `internal/anchor.js`'s `anchorRect` is the seam: the trigger element is still
+// what the writing direction is read from and what focus goes back to, and only
+// the *measurement* is replaced. `null` — which is what the keyboard path
+// leaves behind — measures the trigger, so both routes end in one code path
+// rather than two placements that drift.
+//
+// # The body is not named after the trigger
+//
+// `Menu.Body` names itself with `aria-labelledby` pointing at its trigger,
+// because a dropdown menu's trigger is a button with a short label — "File" —
+// and that is the menu's name. A context menu's trigger is arbitrary content: a
+// table row, a canvas, a paragraph. Naming the menu after it would announce the
+// whole row as the menu's name. So `ContextMenu.Trigger` registers itself as
+// the thing focus returns to and *not* as a name, and the caller gives
+// `ContextMenu.Body` an `aria-label`. That is the one attribute this component
+// cannot supply and the reference page says so.
+
+"use client";
+
+import * as React from "@uniflowed/react";
+import { useCallback, useContext, useMemo, useRef, useState } from "@uniflowed/react";
+import { useLongPress } from "@uniflowed/hooks/dom";
+
+import type { Rect } from "./internal/anchor.js";
+import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
+import {
+  composeHandlers,
+  composeRefs,
+  withProps,
+  withoutComposed,
+} from "./internal/merge-props.js";
+import { MenuAnchorContext, MenuContext, MenuLevel, useMenu } from "./internal/menu-tree.js";
+
+/**
+ * Where the pointer was, or nothing when the keyboard opened the menu.
+ *
+ * Held by the root rather than by the trigger because the *body* is what reads
+ * it, and the body is a sibling of the trigger rather than a child of it.
+ */
+type PointState = {|
+  readonly point: Rect | null,
+  readonly openAt: (point: Rect | null) => void,
+|};
+
+const PointContext: React.Context<PointState | null> = React.createContext(null);
+
+/** A zero-sized box at a pointer's coordinates, which is what a point is. */
+function pointAt(x: number, y: number): Rect {
+  return { height: 0, width: 0, x, y };
+}
+
+/**
+ * The trigger, the menu, and where the pointer was when it opened.
+ *
+ * Renders no element of its own, for the reason `Menu.Root` gives: the trigger
+ * and the body are siblings in whatever layout the caller wrote.
+ */
+export component ContextMenuRoot(
+  children: React.Node,
+  defaultOpen?: boolean = false,
+  open?: boolean,
+  onOpenChange?: (open: boolean) => void,
+) {
+  // State rather than a ref, and that is load-bearing: the rectangle is one of
+  // the things the placement effect re-runs for, so a second right-click
+  // somewhere else has to be a new value React has committed rather than a
+  // mutation nothing heard about.
+  const [point, setPoint] = useState<Rect | null>(null);
+  const openAt = useCallback((next: Rect | null) => setPoint(next), []);
+  const state = useMemo(() => ({ point, openAt }), [point, openAt]);
+
+  return (
+    <PointContext.Provider value={state}>
+      <MenuAnchorContext.Provider value={point}>
+        <MenuLevel defaultOpen={defaultOpen} onOpenChange={onOpenChange} open={open} parent={null}>
+          {children}
+        </MenuLevel>
+      </MenuAnchorContext.Provider>
+    </PointContext.Provider>
+  );
+}
+
+hook usePoint(part: string): PointState {
+  const state = useContext(PointContext);
+  if (state == null) {
+    throw new Error(`${part} must be rendered inside a ContextMenu.Root`);
+  }
+  return state;
+}
+
+/**
+ * The content the menu belongs to.
+ *
+ * A `<div>` rather than a button, because what a context menu hangs off is a
+ * region of the page. The module header says why it is in the tab order and
+ * when a caller should take it out again.
+ */
+export component ContextMenuTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+  const menu = useMenu("ContextMenu.Trigger");
+  const { openAt } = usePoint("ContextMenu.Trigger");
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const passed = withoutComposed(rest, ["onContextMenu", "onKeyDown", "ref"]);
+
+  const openHere = useCallback(() => {
+    // No point: the menu goes against the element, which is where the reader's
+    // focus already is.
+    openAt(null);
+    // This is an instruction for the menu body after the opening commit.
+    // uf-lint-disable-next-line react-compiler/immutability
+    menu.pendingFocusRef.current = "first";
+    menu.setOpen(true);
+  }, [menu, openAt]);
+
+  // The touch equivalent of the right button. `useLongPress` cancels itself
+  // when the pointer moves, so a drag across a list is not two hundred menus.
+  useLongPress(triggerRef, (event: Event) => {
+    const pointer: $FlowFixMe = event;
+    openAt(pointAt(pointer.clientX ?? 0, pointer.clientY ?? 0));
+    // This is an instruction for the menu body after the opening commit.
+    // uf-lint-disable-next-line react-compiler/immutability
+    menu.pendingFocusRef.current = "first";
+    menu.setOpen(true);
+  });
+
+  const props = withProps(
+    // The `tabIndex` goes *underneath* the caller's props, alone, because it is
+    // the one attribute here a caller is invited to overrule: the module header
+    // promises `tabIndex={-1}` to a caller whose trigger already contains
+    // something focusable, and a value that won over the caller's would be a
+    // documented escape hatch that does nothing. Everything in the second
+    // argument is this component's own and stays on top.
+    withProps({ tabIndex: 0 }, passed),
+    {
+      "aria-haspopup": "menu",
+      children,
+      id: `${menu.base}-trigger`,
+      onContextMenu: composeHandlers(rest.onContextMenu, (event: PartEvent) => {
+        const press: $FlowFixMe = event;
+        // The browser's own menu would otherwise cover this one, and the reader
+        // would be looking at the platform's Back/Reload rather than at the
+        // commands the page has for what they pressed on.
+        press.preventDefault();
+        openAt(pointAt(press.clientX ?? 0, press.clientY ?? 0));
+        // This is an instruction for the menu body after the opening commit.
+        // uf-lint-disable-next-line react-compiler/immutability
+        menu.pendingFocusRef.current = "first";
+        menu.setOpen(true);
+      }),
+      onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+        // Both spellings. `ContextMenu` is the dedicated key on a PC keyboard;
+        // `Shift+F10` is the one every platform has, and is what a laptop
+        // without that key leaves a reader with.
+        const asked =
+          event.key === "ContextMenu" || (event.key === "F10" && event.shiftKey === true);
+        if (!asked) {
+          return;
+        }
+        event.preventDefault();
+        openHere();
+      }),
+      // React calls callback refs during commit; focus restoration reads these later.
+      // uf-lint-disable-next-line react-compiler/refs
+      ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+        triggerRef.current = element;
+        // What focus goes back to when the menu closes. It is deliberately not
+        // registered as the menu's *name*; see the module header.
+        // uf-lint-disable-next-line react-compiler/immutability
+        menu.triggerRef.current = element;
+      }),
+    },
+  );
+
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
+}
+
+export type { MenuSelect } from "./menu.js";

package/date-field.js

@@ -0,0 +1,9 @@
+// @flow
+"use client";
+import * as React from "@uniflowed/react";
+import { SegmentedField } from "./internal/segmented-field.js";
+import type { DateFieldProps } from "./internal/segmented-field.js";
+export component DateField(...props: DateFieldProps) {
+  return <SegmentedField options={props} time={false} />;
+}
+export type { DateFieldProps } from "./internal/segmented-field.js";