@estiva-app/ui 0.61.0 → 0.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.61.0",
+  "version": "0.62.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.61.0",
+    "packageVersion": "0.62.0",
     "exports": 134,
     "typeExports": 141,
     "files": null
@@ -3480,7 +3480,7 @@
           "name": "self",
           "takes": "a handler",
           "required": false,
-          "note": "The viewer's own row on top: \"Join\" when they are not in, \"Leave\" when they are."
+          "note": "What the viewer can do: \"Leave\" on their own row when they are in, which is drawn first; a \"Join\" row on top when they are not."
         },
         {
           "name": "candidates",

package/src/MembersDialog.mdx

@@ -25,6 +25,7 @@ Who is in this, with joining, leaving and adding people — the list a
 ```tsx
 import { MembersDialog } from '@estiva-app/ui'
 
+const myId = ''
 const roster: { id: string; name: string; picture?: string; caption?: string }[] = []
 const directory: { id: string; label: string; picture?: string }[] = []
 const [open, setOpen] = useState(false)
@@ -32,7 +33,7 @@ const [open, setOpen] = useState(false)
 {open && (
   <MembersDialog
     members={roster}
-    self={{ action: 'join', onToggle: () => {} }}
+    self={{ action: 'join', onToggle: () => {}, id: myId }}
     candidates={directory}
     onAdd={(chosen) => {}}
     onClose={() => setOpen(false)}
@@ -43,9 +44,11 @@ const [open, setOpen] = useState(false)
 - A row is `{ id, name, picture?, caption? }`. The caption is the second
   line: a role, a relation such as "Assignee", or a state. Name the viewer's
   own row "You".
-- `self` puts **Join** or **Leave** on top. Leave it out while membership is
-  still being read: no row is better than a wrong one. The row waits while
-  `onToggle`'s promise runs.
+- `self` gives the viewer **Join** or **Leave**. `self.id` is their row in
+  `members`. A member's row comes first, with a small red **Leave** at its end.
+  A non-member has no row: **Join** is a row on top, like "Add members". Leave
+  `self` out while membership is still being read: no button is better than a
+  wrong one. The button waits while `onToggle`'s promise runs.
 - `onAdd` shows **Add members**, which opens the add layer: an "Invite people"
   **ChipInput** over `candidates`, leaving out anyone already a member by id.
   Return `false` to stay on the layer; otherwise it returns to the roster.

package/src/MembersDialog.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
       { id: 'me', name: 'You', caption: 'Product designer' },
       { id: 'ana', name: 'Ana Duarte', caption: 'Assignee' },
     ],
-    self: { action: 'leave', onToggle: () => {} },
+    self: { action: 'leave', onToggle: () => {}, id: 'me' },
     candidates: people,
     onAdd: () => {},
     onClose: () => {},
@@ -26,23 +26,34 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-/** A member: Leave and "Add members" on top. */
+/** A member: "Add members" on top, and Leave on your own row. */
 export const Member: Story = {}
 
-/** Not a member yet: Join on top, and nothing to add until you are in. */
+/** Not a member yet: Join on top, no row of your own, and nothing to add until you are in. */
 export const NotAMember: Story = {
   args: {
     members: [{ id: 'ana', name: 'Ana Duarte', caption: 'Assignee' }],
-    self: { action: 'join', onToggle: () => {} },
+    self: { action: 'join', onToggle: () => {}, id: 'me' },
     onAdd: undefined,
   },
 }
 
-/** Membership still being read: no row on top rather than a wrong one. */
+/** Membership still being read: no Join or Leave rather than a wrong one. */
 export const Unknown: Story = {
   args: { self: undefined, onAdd: undefined },
 }
 
+/** Your row comes first, whatever order the roster is given in. */
+export const YouListedLast: Story = {
+  args: {
+    members: [
+      { id: 'ana', name: 'Ana Duarte', caption: 'Assignee' },
+      { id: 'ravi', name: 'Ravi Mehta' },
+      { id: 'me', name: 'You', caption: 'Author' },
+    ],
+  },
+}
+
 /** Someone who left but still holds a role, and a line about what membership covers. */
 export const WithNote: Story = {
   args: {

package/src/MembersDialog.test.tsx

@@ -31,10 +31,24 @@ describe('MembersDialog', () => {
   it('says Join to a non-member and Leave to a member, and calls onToggle once', async () => {
     const user = userEvent.setup()
     const onToggle = vi.fn()
-    const { rerender } = render(<MembersDialog members={members} self={{ action: 'join', onToggle }} onClose={() => {}} />)
+    const { rerender } = render(<MembersDialog members={members.slice(1)} self={{ action: 'join', onToggle, id: 'me' }} onClose={() => {}} />)
     await user.click(await screen.findByRole('button', { name: 'Join' }))
     expect(onToggle).toHaveBeenCalledTimes(1)
-    rerender(<MembersDialog members={members} self={{ action: 'leave', onToggle }} onClose={() => {}} />)
+    rerender(<MembersDialog members={members} self={{ action: 'leave', onToggle, id: 'me' }} onClose={() => {}} />)
+    await user.click(await screen.findByRole('button', { name: 'Leave' }))
+    expect(onToggle).toHaveBeenCalledTimes(2)
+  })
+
+  it("puts Leave on the viewer's own row, and that row first", async () => {
+    render(<MembersDialog members={[...members].reverse()} self={{ action: 'leave', onToggle: () => {}, id: 'me' }} onClose={() => {}} />)
+    const leave = await screen.findByRole('button', { name: 'Leave' })
+    const row = leave.parentElement!
+    expect(row.textContent).toContain('You')
+    expect(row.parentElement!.textContent!.indexOf('You')).toBeLessThan(row.parentElement!.textContent!.indexOf('Ana Duarte'))
+  })
+
+  it('keeps Leave on top when the viewer has no row of their own', async () => {
+    render(<MembersDialog members={members.slice(1)} self={{ action: 'leave', onToggle: () => {}, id: 'me' }} onClose={() => {}} />)
     expect(await screen.findByRole('button', { name: 'Leave' })).toBeTruthy()
   })
 

package/src/MembersDialog.tsx

@@ -34,13 +34,16 @@ export interface MembersDialogProps {
   /** The number in the title's chip. Defaults to how many rows there are. */
   count?: number
   /**
-   * The viewer's own row on top: "Join" when they are not in, "Leave" when
-   * they are. Absent while it is not known, or where they cannot change it —
-   * no row is better than a wrong one.
+   * What the viewer can do: "Leave" on their own row when they are in, which
+   * is drawn first; a "Join" row on top when they are not. Absent while it is
+   * not known, or where they cannot change it — no button is better than a
+   * wrong one.
    */
   self?: {
     action: MembersDialogSelfAction
     onToggle: () => void | Promise<unknown>
+    /** The viewer's id: the row in `members` that carries Leave and comes first. */
+    id: string
   }
   /** Who "Add members" may offer. Members are left out by id. */
   candidates?: MembersDialogCandidate[]
@@ -65,8 +68,10 @@ const LEADING_CLASSES = 'size-8 rounded-md bg-accent-muted flex items-center jus
  *
  * Moved from Peek's `MembersDialog` (2026-10-06; Katerina's design of 22 July,
  * with the row and inset rulings of 15 September). Two layers in one dialog:
- * the roster, with the viewer's Join or Leave and "Add members" on top, and the
- * add layer, whose back arrow returns to the roster. Adding returns to the
+ * the roster, with "Add members" (and Join, for a non-member) on top, and the
+ * add layer, whose back arrow returns to the roster. Leave is a small red
+ * button on the viewer's own row, which always comes first (Katerina, 8
+ * October: a Leave row on top looked like an invite, the same as Add members). Adding returns to the
  * roster so the new people are visible at once.
  */
 export function MembersDialog({ members, count, self, candidates = [], onAdd, note, initialView = 'list', onClose }: MembersDialogProps) {
@@ -92,6 +97,11 @@ export function MembersDialog({ members, count, self, candidates = [], onAdd, no
     setView('list')
   }
 
+  // Leave sits on the viewer's own row, drawn first. A viewer with no row of their own gets Leave on top, as Join is.
+  const ownRow = self?.action === 'leave' ? members.find((m) => m.id === self.id) : undefined
+  const roster = ownRow ? [ownRow, ...members.filter((m) => m !== ownRow)] : members
+  const selfOnTop = self && !ownRow
+
   if (view === 'add' && onAdd) {
     return (
       <DialogShell
@@ -146,9 +156,9 @@ export function MembersDialog({ members, count, self, candidates = [], onAdd, no
     >
       {/* MenuItem outside a Menu is a plain button. Its fill sits 8px in from the dialog's sides,
           and its own 12px inset puts the square over the rows' faces, 20px in, at the same 48px. */}
-      {(self || onAdd) && (
+      {(selfOnTop || onAdd) && (
         <div className="flex flex-col px-2">
-          {self && (
+          {selfOnTop && (
             <MenuItem
               size="tall"
               className="py-2"
@@ -169,13 +179,18 @@ export function MembersDialog({ members, count, self, candidates = [], onAdd, no
           )}
         </div>
       )}
-      {members.map((member) => (
+      {roster.map((member) => (
         <div key={member.id} className="flex h-12 items-center gap-3 px-5">
           <Avatar size={32} name={member.name} src={member.picture} />
           <div className="flex min-w-0 flex-1 flex-col justify-center gap-[2px]">
             <div className="truncate text-body-2 text-text-primary">{member.name}</div>
             {member.caption && <div className="truncate text-caption text-text-secondary">{member.caption}</div>}
           </div>
+          {member === ownRow && (
+            <Button variant="destructive" size="small" disabled={toggling} onClick={() => void toggle()}>
+              Leave
+            </Button>
+          )}
         </div>
       ))}
       {note && <div className="px-5 pb-2 pt-3 text-caption text-text-secondary">{note}</div>}