@lotics/ui 45.4.0 → 45.5.1

package/MIGRATION.md

@@ -4,6 +4,35 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 45.5.0
+
+**`InlineSelect` and `InlineMemberSelect` are a `combobox`, not a `button`.** They rest as a
+`<div role="combobox">` carrying `aria-expanded`, where they rested as a `<button>`
+(`InlineMemberSelect` is built on `InlineSelect`, so it follows). Other inline fields are
+unchanged. Nothing to change in your code — but a test
+that reached one with `getByRole("button")` now finds nothing, and wants `getByRole("combobox")`.
+The old role was wrong twice over: it is not the pattern APG names for a control that holds a
+value and opens a list, and a `<button>` may not contain one, which is what kept a tag field's
+chips from carrying their own remove ✕.
+
+**A multi `InlineSelect`'s menu rows no longer fall back to `renderSelected`.** Pass
+`renderOptionContent` for custom rows; without it the list shows plain labels. `renderSelected`
+now means the removable RESTING chip and takes `(option, { remove })`, so borrowing it for the
+menu put a ✕ on every option in the list.
+
+**Every option list's rows sit 2px apart.** `OptionList` declared that spacing all along, but
+put it on the ScrollView's viewport rather than its content container, where it fell between
+nothing — so rows rendered flush and two adjacent SELECTED rows merged into one tinted block. Every
+selector that opens a list (`Select`, `Picker`, `InlineSelect`, the member pickers, menus) is now
+slightly taller for the same number of rows. A field's chips take 4px on BOTH axes — the row gap was
+half the column gap, pinching a wrapped field against its own first line. A list row is read top to
+bottom and needs only enough space not to merge with its neighbour; a chip sits beside other
+objects and wants the wider setting.
+
+**A multi `InlineSelect`'s chips follow the working set while its list is open** — the draft you
+are building, not the stored value. Ticking a row or pressing a chip's ✕ now shows immediately
+instead of at popover-close. The commit is unchanged: one write per visit, on close.
+
 **`FileRow`'s `leading` slot is a SIBLING of the press door, not inside it.** No API change;
 a row with `onPress` now has a slightly smaller press target, excluding the leading mark.
 

package/docs/catalog.md

@@ -1174,8 +1174,14 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `InlineSelect`/`InlineMemberSelect` render the resting value like its option —
   `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not
   just text. **`InlineSelect` is single OR multi** — pass `multi` for a tag SET (`value: T[]`,
-  commits the new set on popover-CLOSE; selected tags render as badges via `renderSelected`),
-  mirroring `Select`'s `multi` axis; there is NO separate tag component. Both modes take
+  commits the new set on popover-CLOSE), mirroring `Select`'s `multi` axis; there is NO separate
+  tag component. In multi, `renderSelected(option, { remove })` is the resting CHIP BOX seam, the
+  same shape `Select` gives: return `<Chip onDismiss={remove}>` for a removable tag, or a plain
+  badge that ignores it — a dense grid column is the case for the badge, since the ✕ costs more
+  width there than the reopen it saves. `remove` detaches that one tag whether the list is open or
+  shut, and never opens the list — the innermost responder takes the gesture, so a ✕ inside the
+  trigger needs nothing to hold the press back. Single has no `remove`: unsetting one value is `onClear` and its
+  Clear row. Both modes take
   `allowCustom` (a create-a-tag/option row) + `searchable` + **`customOptionPlacement`** (default
   `"bottom"`, right for a tag field; pass `"top"` for a find-or-create REFERENCE picker over a long
   registry, so the create row stays visible while the keyboard highlight stays on the first MATCH —

package/docs/data_entry.md

@@ -754,7 +754,14 @@ A tag field's resting state should be a tidy CHIP BOX — and that's just a mult
 and no `display` mode: `renderSelected(item, { remove })` composes the anchor — render a `Chip`
 with `remove` for the ✕, or a plain `OptionBadge`/`MemberChip`/custom pill that ignores it;
 `renderOptionContent` renders the menu rows. `searchable` adds the filter field, `allowCustom` the
-create row. Borderless for a grid cell? Pass a `style`, never a `variant`. `Combobox` is the
+create row. Borderless for a grid cell? Pass a `style`, never a `variant`.
+
+**On a record surface the same field is `InlineSelect multi`**, and it takes the identical seam —
+`renderSelected(option, { remove })`. Reach for it wherever the neighbouring values are inline
+editors, so the tag field wears the same frame and hover as the row it sits in; reach for `Select`
+inside a form or dialog. The ✕ detaches its tag whether the list is open or shut and never opens
+the list. Two densities, one seam: a record field earns the removable `Chip`, a narrow register
+column keeps the plain badge, where the ✕ costs more width than the reopen it saves. `Combobox` is the
 SINGLE-value sibling — for a search that emits one pick at a time and renders the selection
 elsewhere, use `reflectSelection={false}` (see the [templates](./templates.md)).
 

package/examples/tpl_task_board.tsx

@@ -5,6 +5,7 @@ import { colors, solid, asColorName } from "@lotics/ui/colors";
 import { Icon } from "@lotics/ui/icon";
 import { CheckCircle } from "@lotics/ui/check_circle";
 import { OptionBadge, type OptionValue } from "@lotics/ui/option_badge";
+import { Chip } from "@lotics/ui/chip";
 import { MemberChip } from "@lotics/ui/member_chip";
 import { Avatar } from "@lotics/ui/avatar";
 import { SearchInput } from "@lotics/ui/search_input";
@@ -77,6 +78,16 @@ const TAG_OPTIONS: TagOption[] = Object.values(TAGS).map((t) => ({ value: String
 const tagOf = (k: string): TagOption => ({ value: k, label: TAGS[k]?.label ?? k });
 const tagBadge = (t: TagOption): OptionValue => TAGS[t.value] ?? { key: t.value, label: t.label, color: null };
 const renderTagBadge = (o: { value: string; label?: string }) => <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />;
+// The same tag, removable. A tag field's resting state is a CHIP BOX — one ✕ per
+// value beats reopening the list to untick one — and `renderSelected`'s `remove`
+// is what a multi `InlineSelect` hands you for it. The column below deliberately
+// does NOT use this: at 168px the ✕ costs more width than the reopen it saves, so
+// a dense register keeps the plain badge. Same seam, two densities.
+const renderRemovableTag = (o: { value: string; label?: string }, { remove }: { remove: () => void }) => (
+  <Chip onDismiss={remove}>
+    <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />
+  </Chip>
+);
 
 // A per-row CONTEXTUAL action. Different tasks expose different actions, each
 // wired (in a real app) to its OWN app-workflow — so ONE board drives many
@@ -580,7 +591,7 @@ function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns
     key === "assignee" ? <InlineMemberSelect variant="bare" members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
     : key === "due" ? <InlineDatePicker variant="bare" value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
     : key === "status" ? <InlineSelect variant="bare" value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
-    : key === "tags" ? <InlineSelect multi searchable allowCustom variant="bare" value={tags.map((tag) => tag.value)} onSave={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" />
+    : key === "tags" ? <InlineSelect multi searchable allowCustom variant="bare" value={tags.map((tag) => tag.value)} onSave={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderRemovableTag} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" />
     : null;
 
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "45.4.0",
+  "version": "45.5.1",
   "type": "module",
   "exports": {
     "./vite": {

package/src/inline_edit.tsx

@@ -385,8 +385,21 @@ interface InlineEditViewProps {
    *  active/open edge) is unchanged. */
   actions?: ReactNode;
   /** True while the field's popover (select/date) is open: wears the 2px active
-   *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`). */
+   *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`).
+   *  Under `role="combobox"` it is also what the field ANNOUNCES as aria-expanded. */
   active?: boolean;
+  /** The APG pattern the resting field implements. Default "button" — a value that
+   *  swaps to an input in place.
+   *
+   *  Pass **"combobox"** when pressing the field opens a LIST that holds its value.
+   *  Three things follow, and they are one decision rather than three:
+   *  it is the role APG names for this control; `active` becomes aria-expanded, so
+   *  the field can no longer claim to be a plain button while owning an open popup;
+   *  and react-native-web renders a `<div>` instead of a `<button>`, whose content
+   *  model forbids interactive descendants. That last one is load-bearing — a tag
+   *  field's chips cannot carry their own remove ✕ inside a `<button>`, because a
+   *  button may not contain a button. `Select` reached the same conclusion. */
+  role?: "button" | "combobox";
   /** Raw focus on the resting view, any modality. The input-swap editors use it
    *  (via `InlineEditFrame`) to open edit mode on KEYBOARD focus; the popover
    *  editors leave it unset — focus never auto-opens an overlay (the WAI-ARIA
@@ -436,7 +449,11 @@ function multilineBox(numberOfLines: number | undefined): ViewStyle | null {
 }
 
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef, numberOfLines } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef, numberOfLines, role = "button" } = props;
+  // A combobox MUST expose its expanded state; a button must not. Deriving it from
+  // the `active` the popover callers already pass keeps the two from drifting apart
+  // — there is no way to take the role without the announcement.
+  const patternProps = role === "combobox" ? { accessibilityRole: "combobox" as const, "aria-expanded": active === true } : { accessibilityRole: "button" as const };
   // Stop the press here so an inline editor nested in a pressable row (a task
   // row that expands on press) edits the field instead of triggering the row.
   const handlePress = onPress
@@ -465,7 +482,7 @@ export function InlineEditView(props: InlineEditViewProps) {
           disabled={disabled}
           onPress={handlePress}
           onFocus={onFocus}
-          accessibilityRole="button"
+          {...patternProps}
           accessibilityLabel={accessibilityLabel}
           style={[styles.viewInner, disabled === true && styles.viewInert, multilineBox(numberOfLines)]}
         >
@@ -484,7 +501,7 @@ export function InlineEditView(props: InlineEditViewProps) {
       disabled={disabled}
       onPress={handlePress}
       onFocus={onFocus}
-      accessibilityRole="button"
+      {...patternProps}
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
       style={(state) => [surface(state.hovered ?? false), multilineBox(numberOfLines)]}

package/src/inline_select.tsx

@@ -31,10 +31,6 @@ interface InlineSelectBaseProps<T extends string, D = unknown> {
    *  rendered this two-line `MenuListItem`; this only forwards it, which is why
    *  callers were hand-rebuilding the anatomy through `renderOptionContent`. */
   getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
-  /** Render ONE selected option as its resting chip — single: the value; multi:
-   *  each tag. Falls back to `renderOptionContent`, then the plain label (single) /
-   *  a zinc `Badge` (multi). The one seam for "how the selection looks". */
-  renderSelected?: (option: PickerOption<T, D>) => ReactNode;
   /** Empty-state content: a string reads as muted placeholder text, a NODE renders
    *  as-is (e.g. an avatar "add" ghost for an `avatarOnly` member cell). */
   placeholder?: string | ReactNode;
@@ -74,6 +70,11 @@ export type InlineSelectProps<T extends string, D = unknown> =
       multi?: false;
       value: T | null;
       onSave: (next: T) => void | Promise<void>;
+      /** Render the selected option as the resting value. Falls back to
+       *  `renderOptionContent`, then the plain label. No `remove`: unsetting a single
+       *  field is `onClear` and its Clear row, and a second ✕ that silently did
+       *  nothing whenever `onClear` was absent would be worse than no ✕ at all. */
+      renderSelected?: (option: PickerOption<T, D>) => ReactNode;
       /** Unset the field. Provide it for a "Clear" row whenever there IS a value —
        *  kept separate from `onSave` (whose next is a non-null `T`). Single only. */
       onClear?: () => void | Promise<void>;
@@ -82,6 +83,11 @@ export type InlineSelectProps<T extends string, D = unknown> =
       multi: true;
       value: T[];
       onSave: (next: T[]) => void | Promise<void>;
+      /** Render ONE selected tag. Falls back to `renderOptionContent`, then a zinc
+       *  `Badge`. `remove` detaches THAT tag — return `<Chip onDismiss={remove}>` for
+       *  the removable chip box a tag field rests as, or a plain badge that ignores
+       *  it. Mirrors `Select`; the ✕ removes without opening the list. */
+      renderSelected?: (option: PickerOption<T, D>, controls: { remove: () => void }) => ReactNode;
     });
 
 /** The shared shell: the resting view (a `Popover` trigger) that floats an
@@ -109,6 +115,10 @@ function InlineSelectShell(props: {
         <PopoverTrigger>
           <InlineEditView
             anchorRef={anchorRef}
+            // Both modes hold a value and open a list, which is what the role names.
+            // It is also what lets a multi field's chips carry their own remove ✕:
+            // a <button> may not contain a <button>.
+            role="combobox"
             actions={props.actions}
             variant={props.variant}
             display={props.display}
@@ -140,7 +150,7 @@ function InlineSelectShell(props: {
 }
 
 export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { options, renderOptionContent, getOptionDescription, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
+  const { options, renderOptionContent, getOptionDescription, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
   const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(autoFocus);
   const [saving, setSaving] = useState(false);
@@ -162,15 +172,47 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
   const searchMode = searchable || allowCustom ? "internal" : "none";
 
   if (props.multi) {
-    const { value, onSave } = props;
+    const { value, onSave, renderSelected } = props;
+    // The chips show the WORKING set: the draft while the list is open, the stored
+    // value once it is shut. They used to show `value` throughout, which reads as a
+    // dead control the moment anything edits the draft — press a chip's ✕ with the
+    // list open and it just sits there until the popover closes. What you are
+    // building is what the field should show while you build it; ticking a row in
+    // the list lands in the same place, for the same reason.
+    //
     // Resolve each value to its option IN SELECTION ORDER; an `allowCustom` value not in
     // `options` (a just-created tag) renders from a {value,label} fallback so it still shows
     // (mirrors `Select`). Without allowCustom, an unknown value is dropped (→ nothing), as before.
-    const selected = value
+    const selected = (open ? draft : value)
       .map((v) => options.find((o) => o.value === v) ?? (allowCustom ? { value: v, label: v } : null))
       .filter((o): o is PickerOption<T, D> => o != null);
+    /**
+     * Detach one tag.
+     *
+     * WHICH SET it edits depends on whether the list is open, and getting that wrong
+     * is silent: while open, the working set is `draft` and the close handler writes
+     * it back wholesale — so a ✕ that wrote straight to `value` would be UNDONE the
+     * moment the popover closed. Open → edit the draft and let the close commit it;
+     * closed → there is no draft, so write the new set immediately.
+     *
+     * Nothing here stops the press. The ✕ sits INSIDE the trigger, so opening the
+     * list on a removal looks like the obvious hazard — but react-native-web hands
+     * a gesture to one responder, and the innermost one wins. Verified against the
+     * gallery: with the stop removed the list still never opens.
+     */
+    const removeValue = (v: T) => () => {
+      if (open) {
+        setDraft((current) => current.filter((d) => d !== v));
+        return;
+      }
+      void runSave(() => onSave(value.filter((d) => d !== v)));
+    };
     const chip = (o: PickerOption<T, D>) =>
-      renderSelected ? renderSelected(o) : renderOptionContent ? renderOptionContent(o) : <Badge label={o.label ?? String(o.value)} color="zinc" />;
+      renderSelected
+        ? renderSelected(o, { remove: removeValue(o.value) })
+        : renderOptionContent
+          ? renderOptionContent(o)
+          : <Badge label={o.label ?? String(o.value)} color="zinc" />;
     const onOpenChange = (next: boolean) => {
       if (next) {
         setDraft(value);
@@ -209,13 +251,13 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
             const created = raw.trim() as T;
             if (created && !draft.includes(created)) setDraft([...draft, created]);
           }}
-          renderOptionContent={renderOptionContent ?? renderSelected}
+          renderOptionContent={renderOptionContent}
         />
       </InlineSelectShell>
     );
   }
 
-  const { value, onSave, onClear } = props;
+  const { value, onSave, onClear, renderSelected } = props;
   // An `allowCustom` value not in `options` renders from a fallback (like `Select`); a plain
   // unknown value (a removed member/status) resolves to nothing → the placeholder shows.
   const selected = options.find((o) => o.value === value) ?? (allowCustom && value != null ? { value, label: value } : undefined);
@@ -264,6 +306,9 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
 }
 
 const styles = StyleSheet.create({
-  tags: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 4, rowGap: 2 },
+  // ONE gap on both axes: a wrapped chip is the same object as the one beside it,
+  // so the second line should breathe like the first. The row gap used to be half
+  // the column gap, which pinched a wrapped field against its own first line.
+  tags: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 4 },
   error: { marginTop: 4 },
 });

package/src/option_list.tsx

@@ -113,6 +113,12 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
       <ScrollView
         ref={list.scrollRef}
         style={styles.optionsList}
+        // The GAP has to ride the content container, not the viewport. A ScrollView
+        // wraps its children in one content <div>, so a `gap` in `style` sits on a
+        // box with a single child and falls between nothing — rows rendered flush,
+        // and two adjacent SELECTED rows merged into one tinted block, which reads
+        // as a single wide row rather than two picked ones.
+        contentContainerStyle={styles.optionsContent}
         nativeID={list.listboxId}
         accessibilityLabel={accessibilityLabel}
         keyboardShouldPersistTaps="handled"
@@ -235,9 +241,15 @@ const styles = StyleSheet.create({
   },
   optionsList: {
     flex: 1,
-    gap: 4,
     maxHeight: 320,
   },
+  optionsContent: {
+    // 2, where a field's chips sit at 4. A row here is a 40px LIST line read top to
+    // bottom, and needs only enough space to stop two tinted rows reading as one
+    // block; a chip is an object sitting beside other objects and wants the wider
+    // setting. Two numbers because they answer two questions, not one token split.
+    gap: 2,
+  },
   selectAllContainer: {
     flexDirection: "row",
     alignItems: "center",