@startsimpli/ui 0.4.147 → 0.4.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.147",
+  "version": "0.4.149",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -55,9 +55,9 @@
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
-    "@startsimpli/i18n": "^0.1.3",
     "@startsimpli/api": "^0.5.66",
-    "@startsimpli/auth": "^0.4.39"
+    "@startsimpli/auth": "^0.4.39",
+    "@startsimpli/i18n": "^0.1.3"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/navigation/__tests__/nav-drawer.test.tsx

@@ -0,0 +1,73 @@
+/**
+ * NavDrawer — the phone-width home of an app's left rail (bd startsim-g2m75).
+ *
+ * At 390px a fixed 240px rail left the content column ~52px wide. Below the
+ * breakpoint the rail must become a menu button that opens the same nav as a
+ * modal drawer: focus trapped inside, Escape closes, choosing a link closes.
+ * jsdom has no viewport, so width is proven in Playwright; this pins behaviour.
+ */
+import { useState } from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { NavDrawer, NavDrawerButton } from '../nav-drawer'
+
+function Harness() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <NavDrawerButton open={open} onOpenChange={setOpen} />
+      <NavDrawer open={open} onOpenChange={setOpen} title="Navigation">
+        <a href="/t/topic" onClick={() => setOpen(false)}>
+          Topics
+        </a>
+        <button type="button">Log out</button>
+      </NavDrawer>
+    </>
+  )
+}
+
+describe('NavDrawer', () => {
+  it('is closed until the menu button is pressed, and says so', () => {
+    render(<Harness />)
+    const btn = screen.getByRole('button', { name: /open navigation/i })
+    expect(btn).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('opens the nav as a labelled modal dialog', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    const dialog = screen.getByRole('dialog', { name: 'Navigation' })
+    expect(dialog).toContainElement(screen.getByRole('link', { name: 'Topics' }))
+    expect(screen.getByRole('button', { name: /open navigation/i, hidden: true })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    )
+  })
+
+  it('moves focus into the drawer when it opens', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    expect(screen.getByRole('dialog')).toContainElement(document.activeElement as HTMLElement)
+  })
+
+  it('closes on Escape', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' })
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('closes from its own close button', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    fireEvent.click(screen.getByRole('button', { name: /close navigation/i }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('closes when a nav link is chosen', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: /open navigation/i }))
+    fireEvent.click(screen.getByRole('link', { name: 'Topics' }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+})

package/src/components/navigation/index.ts

@@ -5,3 +5,4 @@ export * from './app-shell'
 export * from './grouped-nav'
 export * from './entity-switcher'
 export * from './breadcrumbs'
+export * from './nav-drawer'

package/src/components/navigation/nav-drawer.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Menu, X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+/**
+ * The phone-width home of an app's left rail (bd startsim-g2m75).
+ *
+ * A fixed 240px rail beside the content works on a laptop and leaves ~52px of
+ * content at 390px. Below the app's breakpoint the rail should become a
+ * <NavDrawerButton/> that opens the SAME nav inside a <NavDrawer/>: a modal
+ * left drawer built on Radix Dialog, so focus is trapped, Escape and an outside
+ * tap close it, focus returns to the button, and the page behind can't scroll.
+ *
+ * The open state is the caller's client state — never a search param, since a
+ * Next layout doesn't re-render on soft navigation. Close it from the nav
+ * link's own onClick (it then also closes on a tap of the current page, which a
+ * pathname effect would miss).
+ *
+ *   const [open, setOpen] = useState(false)
+ *   <div className="md:hidden"><NavDrawerButton open={open} onOpenChange={setOpen} /></div>
+ *   <NavDrawer open={open} onOpenChange={setOpen} title="Navigation">{nav}</NavDrawer>
+ */
+export interface NavDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Accessible name of the drawer (visually hidden). */
+  title?: string;
+  /** Classes for the drawer panel — e.g. a width or a dark rail background. */
+  className?: string;
+  children: ReactNode;
+}
+
+export function NavDrawer({
+  open,
+  onOpenChange,
+  title = 'Navigation',
+  className,
+  children,
+}: NavDrawerProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className={cn(
+            'fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col overflow-hidden bg-white shadow-xl focus:outline-none',
+            className,
+          )}
+        >
+          <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>
+          {children}
+          <DialogPrimitive.Close
+            aria-label="Close navigation"
+            className="absolute right-2 top-2 flex h-10 w-10 items-center justify-center rounded-md opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          >
+            <X className="h-5 w-5" aria-hidden />
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}
+
+export interface NavDrawerButtonProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+  /** Accessible label (default "Open navigation"). */
+  label?: string;
+}
+
+/** The menu button that opens a <NavDrawer/>. Hide it at the rail's breakpoint. */
+export function NavDrawerButton({
+  open,
+  onOpenChange,
+  className,
+  label = 'Open navigation',
+}: NavDrawerButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-expanded={open}
+      aria-haspopup="dialog"
+      onClick={() => onOpenChange(!open)}
+      className={cn(
+        'flex h-10 w-10 items-center justify-center rounded-md text-gray-700 transition hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        className,
+      )}
+    >
+      <Menu className="h-5 w-5" aria-hidden />
+    </button>
+  );
+}

package/src/components/track-changes/__tests__/rails.test.tsx

@@ -517,7 +517,17 @@ describe('createHttpTrackChangesClient', () => {
     await c.listComments!({ field: 'blog', status: 'all' })
     await c.roster!({})
     expect(f.mock.calls[0][0]).toBe('/api/v1/entities/d1/comments/?field=blog&status=all')
-    expect(f.mock.calls[1][0]).toBe('/api/v1/org/roster/')
+    expect(f.mock.calls[1][0]).toBe('/api/v1/org/roster/?record=d1')
+  })
+
+  it("asks for the RECORD's team, so only people who can read it are offered (bd startsim-whwxd, mention roster = team)", async () => {
+    const f = fake(200, { results: [], next_cursor: null })
+    const c = createHttpTrackChangesClient('rec-42', { headers: () => ({}), url: (p) => p, fetch: f })
+    await c.roster!({ cursor: 'abc' })
+    const url = new URL(f.mock.calls[0][0], 'https://t.test')
+    expect(url.pathname).toBe('/api/v1/org/roster')
+    expect(url.searchParams.get('record')).toBe('rec-42')
+    expect(url.searchParams.get('cursor')).toBe('abc')
   })
 
   it('throws the status and body on a refusal', async () => {

package/src/components/track-changes/http-client.ts

@@ -104,6 +104,9 @@ export function createHttpTrackChangesClient(
     reply: (threadId, req) => call<CommentWire>(`${base}/comments/${threadId}/replies`, { method: 'POST', body: req }),
     resolveThread: (threadId) => call(`${base}/comments/${threadId}/resolve`, { method: 'POST', body: {} }),
     reopenThread: (threadId) => call(`${base}/comments/${threadId}/reopen`, { method: 'POST', body: {} }),
-    roster: ({ cursor }) => call<RosterPageWire>(`/api/v1/org/roster`, { query: { cursor } }),
+    // The RECORD's team: the tenant keeps only colleagues who can read this
+    // record, so nobody is offered who could not open it (bd startsim-whwxd, mention roster = team).
+    roster: ({ cursor }) =>
+      call<RosterPageWire>(`/api/v1/org/roster`, { query: { record: String(recordId), cursor } }),
   };
 }