@estiva-app/ui 0.73.0-inline-text.1 → 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.73.0-inline-text.1",
+  "version": "0.74.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.73.0-inline-text.1",
+    "packageVersion": "0.74.0",
     "exports": 178,
     "typeExports": 164,
     "files": null
@@ -4395,6 +4395,12 @@
           "required": false,
           "note": "A second line under the label — a role, an address — 12px, secondary, truncating."
         },
+        {
+          "name": "aside",
+          "takes": "text",
+          "required": false,
+          "note": "After the label, on its line — 12px, muted, never cut: where a file sits (an issue's ref and project) when its second line is its summary (SUM-7)."
+        },
         {
           "name": "leading",
           "takes": "anything",

package/src/CommandPalette.test.tsx

@@ -94,6 +94,12 @@ describe('CommandPaletteSearch — rows', () => {
     expect(groups.map((g) => g.firstElementChild?.textContent)).toEqual(['First', 'Second'])
   })
 
+  it('draws a row’s aside after its label, on the label’s line, above the second line (SUM-7)', () => {
+    render(<Search groups={[{ label: 'Recent', rows: [row('Ship launch', { aside: 'SHI-12 · Ship 1', description: 'What we show on Friday' })] }]} />)
+    const option = screen.getByRole('option')
+    expect(within(option).getByText('What we show on Friday').previousElementSibling?.textContent).toBe('Ship launchSHI-12 · Ship 1')
+  })
+
   it('puts 2px between its rows and under each heading, as a menu does', () => {
     render(<Search groups={[{ label: 'Group', rows: [row('One'), row('Two')] }]} />)
     const [first] = screen.getAllByRole('option')

package/src/CommandPalette.tsx

@@ -196,8 +196,10 @@ export interface CommandPaletteRow {
   /** Unique in the level. The footer follows the lit row by it. */
   id: string
   label: string
-  /** The second line — where it is, who said it, when. */
+  /** The second line — where it is, who said it, when; a file's summary. */
   description?: string
+  /** After the label, muted: where a file sits (an issue's ref and project) when its second line is its summary. */
+  aside?: string
   /** A 16px icon, drawn on the row's 32px tile. */
   icon?: ReactNode
   /** Instead of `icon`: something with a look of its own — a face, a status mark — in the same 32px space, with no tile. */
@@ -414,6 +416,7 @@ export function CommandPaletteSearch({ query, onQueryChange, placeholder, groups
                       size="tall"
                       label={row.label}
                       description={row.description}
+                      aside={row.aside}
                       leading={<RowLeading row={row} />}
                       submenu={!!row.onGoIn}
                       hint={row.onGoIn ? <Kbd>Tab</Kbd> : <EnterHint />}

package/src/ComposerTriggers.test.tsx

@@ -176,6 +176,27 @@ describe('[', () => {
     expect(icons).toEqual(['kind-a', 'own', 'list'])
   })
 
+  it('draws a summary as the second line, with where the thing sits beside the label; without one, the row is as before (SUM-7)', async () => {
+    const rows = [
+      { id: 's', label: 'Ship launch', snippet: '', uri: 'nostr:s', description: 'SHI-12 · Ship 1', summary: 'What we show on Friday' },
+      { id: 'n', label: 'Old plan', snippet: '', uri: 'nostr:n', description: 'SHI-3 · Ship 1' },
+    ]
+    function Summarised() {
+      const made = useEditor({
+        extensions: [StarterKit, Chip, ReferenceTrigger.configure({ items: () => rows, nodeName: 'messageMention', ariaLabel: 'Things', sectionLabel: 'Things' })],
+      })
+      editor = made
+      return <EditorContent editor={made} />
+    }
+    render(<Summarised />)
+    await type('[')
+    const [withSummary, without] = within(screen.getByRole('listbox')).getAllByRole('option')
+    // The line above a row's second line, as a person reads it.
+    const lineAbove = (row: HTMLElement, second: string) => within(row).getByText(second).previousElementSibling?.textContent
+    expect(lineAbove(withSummary, 'What we show on Friday')).toBe('Ship launchSHI-12 · Ship 1')
+    expect(lineAbove(without, 'SHI-3 · Ship 1')).toBe('Old plan')
+  })
+
   it('draws the app’s sections in order, skips an empty one, and redraws the open list when told', async () => {
     const listeners = new Set<() => void>()
     let late: CaptionedItem[] = []

package/src/ComposerTriggers.tsx

@@ -232,6 +232,13 @@ export interface CaptionedItem {
   search?: string
   /** The row's second line, e.g. where the thing sits. The chip does not wear it. */
   description?: string
+  /**
+   * What the thing is about, in a line of plain text — a file's summary. When
+   * set, it is the row's second line and `description` moves up after the
+   * label, muted; absent, the row is as before. The chip does not wear it, and
+   * the query is not matched against it.
+   */
+  summary?: string
   /**
    * This row's own 16px icon, in place of the list's `icon`: what the thing is,
    * when the list holds several kinds — a topic, a project, a message
@@ -363,7 +370,13 @@ export function referenceMenu({ ariaLabel, sectionLabel, icon, iconFor }: Refere
       return groups
     },
     itemKey: (item) => `reference-${item.id}`,
-    row: (item) => ({ leading: item.icon ?? iconFor?.(item.uri) ?? icon, label: captionOf(item.label, item.snippet), description: item.description, hint: <EnterHint /> }),
+    row: (item) => ({
+      leading: item.icon ?? iconFor?.(item.uri) ?? icon,
+      label: captionOf(item.label, item.snippet),
+      // A summary is the second line, and where the thing sits moves up beside the label (SUM-7's story).
+      ...(item.summary ? { description: item.summary, aside: item.description } : { description: item.description }),
+      hint: <EnterHint />,
+    }),
   }
 }
 

package/src/InlineText.test.tsx

@@ -168,6 +168,27 @@ describe('InlineText: a refused save, and a change from elsewhere', () => {
     expect(field().textContent).toBe('Item one two')
   })
 
+  it('Enter and the leave that follows it save once while the save is still in flight', async () => {
+    let answer: (saved: boolean) => void = () => {}
+    const onCommit = vi.fn(() => new Promise<boolean>((resolve) => (answer = resolve)))
+    draw({ onCommit, onEnter: () => field().blur() })
+    await enter()
+    await type(' two')
+    await userEvent.keyboard('{Enter}')
+    await act(async () => answer(true))
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('a change from elsewhere made while you are in it, and you change nothing, is loaded when you leave', async () => {
+    const { rerender, onCommit } = draw()
+    await enter()
+    rerender({ value: 'Item three' })
+    expect(field().textContent).toBe('Item one')
+    await act(async () => field().blur())
+    expect(field().textContent).toBe('Item three')
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
   it('a change from elsewhere is loaded while you are not in it', async () => {
     const { rerender } = draw()
     rerender({ value: 'Item three' })

package/src/InlineText.tsx

@@ -98,14 +98,22 @@ export function InlineText({ value, placeholder, label, onCommit, onText, onEnte
   const [empty, setEmpty] = useState(!value)
   // Read at key time: the editor's handlers are built once, and a prop they
   // closed over would be the first render's.
-  const latest = useRef({ onEnter, onText, onCommit, clearable })
-  latest.current = { onEnter, onText, onCommit, clearable }
+  const latest = useRef({ onEnter, onText, onCommit, clearable, value })
+  latest.current = { onEnter, onText, onCommit, clearable, value }
+  // The text being saved right now: Enter moves on, and the leave that follows
+  // must not send the same save a second time while the first is in flight.
+  const pending = useRef<string | null>(null)
 
   const save = useCallback(async (text: string) => {
     const next = oneLine(text)
-    if (next === saved.current) return
+    if (next === saved.current || next === pending.current) return
     if (!next && !latest.current.clearable) return
-    if (await latest.current.onCommit(next)) saved.current = next
+    pending.current = next
+    try {
+      if (await latest.current.onCommit(next)) saved.current = next
+    } finally {
+      if (pending.current === next) pending.current = null
+    }
   }, [])
 
   const editor = useEditor({
@@ -156,6 +164,15 @@ export function InlineText({ value, placeholder, label, onCommit, onText, onEnte
         setEmpty(false)
         return
       }
+      // Left unchanged while someone else changed it: their text comes in now,
+      // as it would have had you not been in it.
+      const { value: current } = latest.current
+      if (oneLine(e.getText()) === saved.current && current !== saved.current && pending.current === null) {
+        e.commands.setContent(doc(current), { emitUpdate: false })
+        saved.current = current
+        setEmpty(!current)
+        return
+      }
       void save(e.getText())
     },
   }, [readOnly])

package/src/Menu.tsx

@@ -350,6 +350,12 @@ export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'ch
   size?: 'default' | 'tall'
   /** A second line under the label — a role, an address — 12px, secondary, truncating. */
   description?: string
+  /**
+   * After the label, on its line — 12px, muted, never cut: where a file sits
+   * (an issue's ref and project) when its second line is its summary (SUM-7).
+   * The label truncates before it does.
+   */
+  aside?: string
   /** Before the label: a 16px icon (stroke 1.5, secondary), or an Avatar, for rows led by a face. */
   leading?: ReactNode
   /** At the right edge: a hint, a value — anything. Wins over `shortcut` and `submenu`. */
@@ -425,7 +431,7 @@ export function menuItemClassName({ size, selected, className }: { size: 'defaul
 /** Everything inside the row — written once, for the same reason. Shared
  *  inside the package like `menuItemClassName`: `CommandPalette` draws it
  *  inside Base UI's `Autocomplete.Item`. Not exported from the index. */
-export function MenuItemBody({ label, children, size = 'default', description, leading, trailing, hint, shortcut, submenu, destructive, selected }: Pick<MenuItemProps, 'label' | 'children' | 'size' | 'description' | 'leading' | 'trailing' | 'hint' | 'shortcut' | 'submenu' | 'destructive' | 'selected'>) {
+export function MenuItemBody({ label, children, size = 'default', description, aside, leading, trailing, hint, shortcut, submenu, destructive, selected }: Pick<MenuItemProps, 'label' | 'children' | 'size' | 'description' | 'aside' | 'leading' | 'trailing' | 'hint' | 'shortcut' | 'submenu' | 'destructive' | 'selected'>) {
   const edge =
     trailing ??
     (shortcut ? (
@@ -441,9 +447,16 @@ export function MenuItemBody({ label, children, size = 'default', description, l
           colour. Ship's copy said `text-sm`, which was never the ramp. */}
       {children ?? (
         <span className={cn('flex min-w-0 flex-1 flex-col', size === 'tall' && 'gap-[2px]')}>
-          <span className={cn('truncate text-body-2', destructive ? 'text-error-default' : 'text-text-primary')}>
-            {label}
-          </span>
+          {aside ? (
+            <span className="flex min-w-0 items-baseline gap-2">
+              <span className={cn('truncate text-body-2', destructive ? 'text-error-default' : 'text-text-primary')}>{label}</span>
+              <span className="shrink-0 text-caption text-text-muted">{aside}</span>
+            </span>
+          ) : (
+            <span className={cn('truncate text-body-2', destructive ? 'text-error-default' : 'text-text-primary')}>
+              {label}
+            </span>
+          )}
           {description && <span className="truncate text-caption text-text-secondary">{description}</span>}
         </span>
       )}
@@ -469,12 +482,13 @@ export function MenuItemBody({ label, children, size = 'default', description, l
   )
 }
 
-export function MenuItem({ label, children, size = 'default', description, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }: MenuItemProps) {
+export function MenuItem({ label, children, size = 'default', description, aside, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }: MenuItemProps) {
   const body = (
     <MenuItemBody
       label={label}
       size={size}
       description={description}
+      aside={aside}
       leading={leading}
       trailing={trailing}
       hint={hint}

package/src/SuggestionMenu.tsx

@@ -34,6 +34,8 @@ import { Popover } from './Popover'
 export interface SuggestionMenuRow {
   label: string
   description?: string
+  /** After the label, muted — `MenuItem`'s. */
+  aside?: string
   leading?: ReactNode
   /** What you would type — drawn as keys at the right, e.g. `#` for a heading. */
   shortcut?: string
@@ -158,7 +160,7 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
   const drawRow = (item: T) => {
     const index = items.indexOf(item)
     const selected = index === highlight
-    const { label, description, leading, shortcut, hint, size } = row(item)
+    const { label, description, aside, leading, shortcut, hint, size } = row(item)
     return (
       // A row of a list the editor drives from its caret: focus stays in the text, so the row is no Tab stop.
       <MenuItem
@@ -171,6 +173,7 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
         size={size}
         label={label}
         description={description}
+        aside={aside}
         leading={leading}
         shortcut={shortcut}
         hint={hint}