@estiva-app/ui 0.57.2 → 0.57.3

package/dist/suggestionPopup.d.ts

@@ -1,4 +1,4 @@
-import type { SuggestionOptions } from '@tiptap/suggestion';
+import { type SuggestionOptions } from '@tiptap/suggestion';
 import { type SuggestionMenuRow, type SuggestionMenuSection } from './SuggestionMenu';
 /**
  * Open, or closed less than 100ms ago — what an Enter handler asks. Choosing a

package/dist/suggestionPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestionPopup.d.ts","sourceRoot":"","sources":["../src/suggestionPopup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA0B,iBAAiB,EAAmB,MAAM,oBAAoB,CAAA;AACpG,OAAO,EAA6C,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAkBhI;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C;AAED,mFAAmF;AACnF,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;IACjB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC5B,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,iBAAiB,CAAA;IACnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;IAChD,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,CAAA;CACjC;AA0BD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CA6DlH"}
+{"version":3,"file":"suggestionPopup.d.ts","sourceRoot":"","sources":["../src/suggestionPopup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+C,KAAK,iBAAiB,EAAwB,MAAM,oBAAoB,CAAA;AAC9H,OAAO,EAA6C,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAA;AAqBhI;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C;AAED,mFAAmF;AACnF,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAA;IACjB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAC5B,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,iBAAiB,CAAA;IACnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;IAChD,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,CAAA;CACjC;AA0BD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAsFlH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.57.2",
+  "version": "0.57.3",
   "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.57.2",
+    "packageVersion": "0.57.3",
     "exports": 130,
     "typeExports": 134,
     "files": null

package/src/ComposerTriggers.mdx

@@ -100,6 +100,10 @@ const urgent = editor ? urgentPubkeys(editor) : undefined
 - An open list is reported by `isSuggestionActive()`, so an editor that sends
   on Enter does not send on the Enter that picked a row. A list counts only
   while it shows rows: with none, Enter sends and Escape is the app's.
+- **Leaving the box ends the list.** Click or Tab into another box and the
+  list closes as it does on Escape, so that box's Escape is its own; coming
+  back finds no list, and Enter sends. A press inside the list (its scrollbar)
+  keeps the caret in the text, and switching to another window keeps the list.
 
 <Canvas of={ComposerTriggersStories.CodeAsABlock} />
 

package/src/ComposerTriggers.test.tsx

@@ -6,7 +6,7 @@
  */
 import { act } from 'react'
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
-import { render, screen, cleanup, within } from '@testing-library/react'
+import { render, screen, cleanup, fireEvent, within } from '@testing-library/react'
 import type { Editor } from '@tiptap/core'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
@@ -343,6 +343,80 @@ describe('more than one word', () => {
   })
 })
 
+describe('leaving the box', () => {
+  // A page with a second box, as Ship's issue page: the message box and the description.
+  function Page() {
+    return (
+      <>
+        <Composer />
+        <input aria-label="Other box" />
+      </>
+    )
+  }
+  const other = () => screen.getByRole<HTMLInputElement>('textbox', { name: 'Other box' })
+
+  it('ends the list when focus moves to another box, and coming back finds none', async () => {
+    // The grace after the last test's list closed is module-wide: let it pass.
+    await new Promise((resolve) => setTimeout(resolve, 120))
+    render(<Page />)
+    await type('see [')
+    // The caret is in the text before it leaves (the focus command waits a frame).
+    await act(async () => editor!.view.focus())
+    expect(document.activeElement).toBe(editor!.view.dom)
+    expect(options()).toHaveLength(6)
+    expect(isSuggestionOpen()).toBe(true)
+    await act(async () => other().focus())
+    expect(screen.queryByRole('listbox')).toBeNull()
+    // So the other box's own Escape and Enter are its own — no grace either.
+    expect(isSuggestionOpen()).toBe(false)
+    expect(isSuggestionActive()).toBe(false)
+    // A click back in, as the view takes it (the focus command waits a frame).
+    await act(async () => editor!.view.focus())
+    expect(screen.queryByRole('listbox')).toBeNull()
+    // As after Escape: the rest of that bracket is text.
+    await type('line')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    await press('Enter')
+    expect(nodes()).toEqual([])
+  })
+
+  it('keeps focus in the text when the list’s own panel is pressed (its scrollbar)', async () => {
+    render(<Page />)
+    await type('see [')
+    const panel = screen.getByRole('listbox').closest('[role="dialog"]')!
+    const pressed = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+    panel.dispatchEvent(pressed)
+    expect(pressed.defaultPrevented).toBe(true)
+    // A press anywhere else on the page is left alone.
+    const elsewhere = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+    other().dispatchEvent(elsewhere)
+    expect(elsewhere.defaultPrevented).toBe(false)
+  })
+
+  it('keeps the list when the window loses focus, not the page', async () => {
+    render(<Page />)
+    await type('see [')
+    // What a browser sends when another window takes focus: a blur, with the editor still the active element.
+    await act(async () => {
+      editor!.view.dom.dispatchEvent(new FocusEvent('blur'))
+    })
+    expect(document.activeElement).toBe(editor!.view.dom)
+    expect(options()).toHaveLength(6)
+    expect(isSuggestionOpen()).toBe(true)
+  })
+
+  it('still picks a row by mouse, which never takes focus from the text', async () => {
+    render(<Page />)
+    await type('see [')
+    const row = within(screen.getByRole('listbox')).getAllByRole('option')[2]
+    await act(async () => {
+      fireEvent.mouseDown(row)
+    })
+    expect(nodes()).toEqual([{ type: 'messageMention', attrs: { id: ITEMS[4].id, label: 'Ada', snippet: 'line 4', uri: ITEMS[4].uri } }])
+    expect(isSuggestionOpen()).toBe(false)
+  })
+})
+
 describe('a chip through HTML (copy and paste)', () => {
   it('keeps who it names and what it points at, and takes no key or uri from a crafted attribute', async () => {
     render(<Composer />)

package/src/SuggestionMenu.tsx

@@ -138,6 +138,16 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
     if (!editorElement || !open) return
     editorElement.setAttribute('aria-activedescendant', `${base}-${highlight}`)
   }, [editorElement, open, base, highlight])
+  // A press anywhere in the panel — its padding, its scrollbar — keeps focus in
+  // the text, as a row's does: the editor ends its list when it loses focus.
+  // On the list's own mount, because the panel portals in after it opens.
+  const keepFocus = useCallback((list: HTMLDivElement | null) => {
+    const panel = list?.closest('[role="dialog"]')
+    if (!panel) return
+    const keep = (event: Event) => event.preventDefault()
+    panel.addEventListener('mousedown', keep)
+    return () => panel.removeEventListener('mousedown', keep)
+  }, [])
 
   const scrollRef = useCallback((el: HTMLElement | null) => {
     el?.scrollIntoView({ block: 'nearest' })
@@ -180,7 +190,7 @@ export function SuggestionMenu<T>({ rect, editorElement, ariaLabel, width, maxHe
       {/* The list the editor drives from its caret: a listbox, because Base UI's lists need a text field of their own.
           `gap-0.5`: 2px between rows, as a menu's — a section with a heading
           had them from `MenuSection`, and rows without one touched. */}
-      <div id={listboxId} role="listbox" aria-label={ariaLabel} className="flex flex-col gap-0.5">
+      <div ref={keepFocus} id={listboxId} role="listbox" aria-label={ariaLabel} className="flex flex-col gap-0.5">
         {shown.map((section, i) => (
           <div key={section.label ?? i} className="contents">
             {i > 0 && <MenuSeparator />}

package/src/suggestionPopup.tsx

@@ -1,7 +1,7 @@
 // @estiva-escape(component-has-a-page, component-has-a-story): draws nothing of its own — it opens a SuggestionMenu from a Tiptap suggestion plugin, and SuggestionMenu's page and stories show it (UIG-31)
 import { forwardRef, useRef, useImperativeHandle } from 'react'
 import { ReactRenderer } from '@tiptap/react'
-import type { SuggestionKeyDownProps, SuggestionOptions, SuggestionProps } from '@tiptap/suggestion'
+import { exitSuggestion, type SuggestionKeyDownProps, type SuggestionOptions, type SuggestionProps } from '@tiptap/suggestion'
 import { SuggestionMenu, type SuggestionMenuHandle, type SuggestionMenuRow, type SuggestionMenuSection } from './SuggestionMenu'
 
 /*
@@ -16,6 +16,9 @@ import { SuggestionMenu, type SuggestionMenuHandle, type SuggestionMenuRow, type
  * A list counts while it shows rows, not while its trigger listens: since a
  * space stopped closing one (f586437a), "meet @ 5pm" leaves `@` listening
  * behind a hidden list to the end of the line, and that Enter must still send.
+ *
+ * And only while its editor has focus (71a4577b): a list left by a click ends,
+ * or it would stay counted and swallow Escape in the box clicked into.
  */
 let openCount = 0
 let lastClose = 0
@@ -104,14 +107,38 @@ export function suggestionPopup<T>(options: SuggestionPopupOptions<T>): NonNulla
     let last: SuggestionProps<T> | null = null
     let unsubscribe: (() => void) | undefined
     let counted = false
+    let unlisten: (() => void) | undefined
     const count = (shown: boolean) => {
       if (shown === counted) return
       counted = shown
       openCount = shown ? openCount + 1 : Math.max(0, openCount - 1)
     }
+    // The plugin's state outlives a blur — no transaction runs — so leaving the
+    // box ends the query here, as Escape does: coming back finds no list, and
+    // Enter sends (Miky, 2026-10-06). Leaving the window is not leaving the box,
+    // and a press in the list's own panel never takes focus (SuggestionMenu).
+    const listen = (props: SuggestionProps<T>) => {
+      const { view } = props.editor
+      const dom = view.dom
+      const onBlur = () => {
+        // A window that loses focus leaves its active element where it was.
+        if (dom.contains(document.activeElement) || !last) return
+        const from = last.range.from
+        // Not a pick: no grace for the other box's Enter.
+        count(false)
+        for (const plugin of view.state.plugins) {
+          const state = plugin.getState(view.state) as { active?: boolean; range?: { from: number } } | undefined
+          if (state?.active && state.range?.from === from && plugin.spec.key) exitSuggestion(view, plugin.spec.key)
+        }
+      }
+      dom.addEventListener('blur', onBlur)
+      unlisten = () => dom.removeEventListener('blur', onBlur)
+    }
     const exit = () => {
       unsubscribe?.()
       unsubscribe = undefined
+      unlisten?.()
+      unlisten = undefined
       last = null
       // The grace is for the Enter that picked a row and closed the list, not
       // for a keystroke that only left it with no rows.
@@ -131,6 +158,7 @@ export function suggestionPopup<T>(options: SuggestionPopupOptions<T>): NonNulla
         document.body.appendChild(container)
         container.appendChild(component.element)
         last = props
+        listen(props)
         const { subscribe, refresh } = options
         if (subscribe && refresh) {
           // The plugin asks for items only when the query changes; an answer