@estiva-app/ui 0.60.0 → 0.60.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.60.0",
+  "version": "0.60.1",
   "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.60.0",
+    "packageVersion": "0.60.1",
     "exports": 134,
     "typeExports": 141,
     "files": null

package/src/TopBar.mdx

@@ -64,6 +64,8 @@ import { TopBar, IdentityMenu } from '@estiva-app/ui'
   don't restyle it per app.
 - `onSearch` is called on every Ctrl+K, open or not: to close the launcher
   on a second Ctrl+K, toggle in your handler.
+- A click on the field leaves focus where it was, so a launcher can act on the
+  text box and the selection you were in. Tab still reaches the field.
 - The frame is desktop-only for now — there is no narrow-screen
   behaviour; the menu button collapses panels, it does not open a drawer.
 

package/src/TopBar.test.tsx

@@ -29,6 +29,30 @@ describe('TopBar search', () => {
     expect(onSearch).toHaveBeenCalledTimes(1)
   })
 
+  it('leaves focus where it was on a click', async () => {
+    const onSearch = vi.fn()
+    render(
+      <>
+        <input aria-label="composer" />
+        <TopBar onSearch={onSearch} />
+      </>,
+    )
+    const composer = screen.getByRole('textbox', { name: 'composer' })
+    composer.focus()
+    await userEvent.click(screen.getByRole('button', { name: /Search…/ }))
+    expect(onSearch).toHaveBeenCalledTimes(1)
+    expect(document.activeElement).toBe(composer)
+  })
+
+  it('is reached with Tab and pressed with Enter', async () => {
+    const onSearch = vi.fn()
+    render(<TopBar onSearch={onSearch} />)
+    await userEvent.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: /Search…/ }))
+    await userEvent.keyboard('{Enter}')
+    expect(onSearch).toHaveBeenCalledTimes(1)
+  })
+
   it('says "Search…" when given no words', () => {
     render(<TopBar onSearch={() => {}} />)
     expect(screen.getByRole('button', { name: /Search…/ })).toBeTruthy()

package/src/TopBar.tsx

@@ -32,6 +32,11 @@ import { shortcutLabel } from './shortcuts'
  * app searches with — and Ctrl+K (Cmd+K on a Mac) presses it from anywhere.
  * Before, every app drew its own field and listened for the keys itself.
  * A `search` of the caller's own still takes the centre.
+ *
+ * **A click leaves focus where it was**, as Peek's field did: what searching
+ * opens often acts on what you were in — Peek's launcher reads the composer
+ * you were typing in and its selection — and taking focus would leave it
+ * nothing. Tab still reaches the field, and Enter or Space presses it.
  */
 export interface TopBarProps {
   variant?: 'solid' | 'floating' | 'inset'
@@ -73,7 +78,7 @@ export function TopBar({ variant = 'solid', menu, logo, search, onSearch, search
   const centre =
     search ??
     (onSearch && (
-      <BaseButton type="button" onClick={onSearch} className={cn('flex w-[290px] cursor-pointer items-center gap-2 px-3 py-2', FIELD_SHELL_CLASSES)}>
+      <BaseButton type="button" onMouseDown={(event) => event.preventDefault()} onClick={onSearch} className={cn('flex w-[290px] cursor-pointer items-center gap-2 px-3 py-2', FIELD_SHELL_CLASSES)}>
         <span className="min-w-0 flex-1 truncate text-left text-input-value text-text-muted">{searchPlaceholder}</span>
         <Kbd>{shortcutLabel('Mod-K')}</Kbd>
       </BaseButton>