@estiva-app/ui 0.60.0 → 0.60.2

package/package.json

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

package/src/AppProvider.mdx

@@ -54,7 +54,9 @@ function Root({ children }) {
   did, which is also what a story or a test sees without one.
 - `pictureFor` gets the person's name and returns an address, or nothing for
   the initials.
-- `navigate` gets the link's `href` exactly as written. The browser keeps
+- `navigate` gets the link's path, query and `#` part (`/message/1?x=2`),
+  also when the `href` is the app's whole address (`https://app.test/message/1`):
+  a router reads a whole address as a path under the current page. The browser keeps
   every other click: one already handled (`preventDefault`), one with Ctrl,
   Cmd, Shift or Alt, the middle button, a link that opens a new tab or
   downloads, and an address on another site or in another scheme

package/src/AppProvider.test.tsx

@@ -86,6 +86,13 @@ describe('changing page', () => {
     expect(navigate).toHaveBeenCalledWith('/topics')
   })
 
+  it("hands over the path when the href is the app's whole address", async () => {
+    const navigate = vi.fn()
+    inApp(navigate, <Link href={`${window.location.origin}/message/1?thread=2#r3`}>Message</Link>)
+    await userEvent.click(screen.getByRole('link'))
+    expect(navigate).toHaveBeenCalledWith('/message/1?thread=2#r3')
+  })
+
   it("runs the caller's own onClick first", async () => {
     const order: string[] = []
     inApp(() => order.push('navigate'), <Link href="/topics" onClick={() => order.push('caller')}>Topics</Link>)

package/src/AppProvider.tsx

@@ -10,8 +10,9 @@ export interface AppProviderProps {
   pictureFor?: (name: string) => string | null | undefined
   /**
    * How this app changes page without reloading. A plain click on a link to
-   * this app's own address calls it with the link's `href` instead of loading
-   * the page again: `Link` (and so `Card` and `Breadcrumb`'s crumbs),
+   * this app's own address calls it with the link's path (`/message/1`, also
+   * when the `href` is the whole `https://…` address) instead of loading the
+   * page again: `Link` (and so `Card` and `Breadcrumb`'s crumbs),
    * `NavItem` (and so `NavTree`'s rows), `RailItem`, `Chip`, `InlineChip`, and
    * `IconButton` (and so `ToolbarLink`).
    */
@@ -71,6 +72,8 @@ export function useInAppClick<E extends HTMLElement>(href: string | undefined, o
     }
     if (url.origin !== window.location.origin) return
     event.preventDefault()
-    navigate(href)
+    // The path, never the whole address: a router reads `https://…` as a path
+    // under the current page and lands nowhere (Peek's message link, 8 October).
+    navigate(`${url.pathname}${url.search}${url.hash}`)
   }
 }

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>