@startsimpli/ui 0.4.77 → 0.4.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.77",
+  "version": "0.4.78",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,8 +42,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "^0.4.31",
-    "@startsimpli/api": "^0.5.46"
+    "@startsimpli/api": "^0.5.48",
+    "@startsimpli/auth": "^0.4.31"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/team/MembersSection.tsx

@@ -36,6 +36,8 @@ export interface MembersSectionProps {
   onChangeRole?: (userId: string, role: TeamRole) => void | Promise<void>
   onRemove?: (userId: string) => void | Promise<void>
   onResendInvite?: (userId: string) => void | Promise<void>
+  /** Suspend/restore a membership without deleting it (soft exit). */
+  onSetActive?: (userId: string, isActive: boolean) => void | Promise<void>
   /** When set, the invite dialog is rendered next to the heading. */
   onInvite?: (input: { email: string; teamId: string; role: TeamRole }) => Promise<InvitationLite | void>
   onInvited?: (invitation: InvitationLite | void) => void
@@ -43,8 +45,9 @@ export interface MembersSectionProps {
   availableRoles?: TeamRole[]
   inviteRoles?: TeamRole[]
   defaultInviteRole?: TeamRole
-  /** Header copy. `description` receives the member count. */
-  title?: string
+  /** Header copy. A node so a host can badge/icon the heading without
+   *  re-assembling the header row. `description` receives the member count. */
+  title?: React.ReactNode
   description?: (count: number) => React.ReactNode
   /** Set false when the host already renders a card header. */
   showHeader?: boolean
@@ -70,6 +73,7 @@ export function MembersSection({
   onChangeRole,
   onRemove,
   onResendInvite,
+  onSetActive,
   onInvite,
   onInvited,
   availableRoles,
@@ -123,6 +127,7 @@ export function MembersSection({
           onChangeRole={onChangeRole}
           onRemove={onRemove}
           onResendInvite={onResendInvite}
+          onSetActive={onSetActive}
           emptyState={emptyState}
           classNames={classNames?.table}
         />

package/src/components/team/MembersTable.tsx

@@ -46,6 +46,12 @@ export interface MembersTableProps {
    * only alongside `canManage` — an expired invite is otherwise a dead end.
    */
   onResendInvite?: (userId: string) => void | Promise<void>
+  /**
+   * Suspend or restore a membership without deleting it — the soft exit next to
+   * Remove. Offered only alongside `canManage`. Rows render Deactivate while
+   * active and Restore once `isActive === false`.
+   */
+  onSetActive?: (userId: string, isActive: boolean) => void | Promise<void>
   /** Custom empty-state slot. Defaults to a generic "No members yet" cell. */
   emptyState?: React.ReactNode
   /**
@@ -113,6 +119,7 @@ export function MembersTable({
   onChangeRole,
   onRemove,
   onResendInvite,
+  onSetActive,
   emptyState,
   showStatus,
   showLastActive,
@@ -244,6 +251,15 @@ export function MembersTable({
                         Resend invite
                       </button>
                     )}
+                    {onSetActive && (
+                      <button
+                        type="button"
+                        className={cls.deactivateButton}
+                        onClick={() => onSetActive(m.userId, m.isActive === false)}
+                      >
+                        {m.isActive === false ? 'Restore' : 'Deactivate'}
+                      </button>
+                    )}
                     {onRemove && (
                       <button
                         type="button"

package/src/components/team/__tests__/member-lifecycle.test.tsx

@@ -91,6 +91,33 @@ describe('MembersTable — invite lifecycle', () => {
     expect(screen.queryByRole('button', { name: /resend/i })).not.toBeInTheDocument()
   })
 
+  // The soft exit next to Remove. The table already paints a `deactivated`
+  // pill, but nothing could ever produce one: Remove (hard-delete) was the only
+  // way out of a foundry, so suspending someone meant destroying their role,
+  // attribution and history (startsim-768w.19.2).
+  it('offers deactivate on an active row and calls it with (userId, false)', () => {
+    const onSetActive = jest.fn()
+    render(<MembersTable members={rows} canManage onSetActive={onSetActive} />)
+    const buttons = screen.getAllByRole('button', { name: /deactivate/i })
+    expect(buttons).toHaveLength(3)
+    fireEvent.click(buttons[0])
+    expect(onSetActive).toHaveBeenCalledWith('u1', false)
+  })
+
+  it('offers restore — not deactivate — on an already deactivated row', () => {
+    const onSetActive = jest.fn()
+    const deactivated: MemberRow[] = [{ ...rows[1], isActive: false }]
+    render(<MembersTable members={deactivated} canManage onSetActive={onSetActive} />)
+    expect(screen.queryByRole('button', { name: /deactivate/i })).not.toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /restore/i }))
+    expect(onSetActive).toHaveBeenCalledWith('u2', true)
+  })
+
+  it('shows no deactivate affordance without canManage', () => {
+    render(<MembersTable members={rows} onSetActive={jest.fn()} />)
+    expect(screen.queryByRole('button', { name: /deactivate/i })).not.toBeInTheDocument()
+  })
+
   it('stays backwards compatible with rows that carry no lifecycle fields', () => {
     const legacy: MemberRow[] = [
       { id: 'm1', userId: 'u1', teamId: 't1', role: 'admin', joinedAt: '2026-01-01' },
@@ -118,6 +145,13 @@ describe('MembersSection — the page-level composer', () => {
     expect(onResendInvite).toHaveBeenCalledWith('u2')
   })
 
+  it('forwards a deactivate from the composer', () => {
+    const onSetActive = jest.fn()
+    render(<MembersSection members={rows} canManage onSetActive={onSetActive} />)
+    fireEvent.click(screen.getAllByRole('button', { name: /deactivate/i })[1])
+    expect(onSetActive).toHaveBeenCalledWith('u2', false)
+  })
+
   it('surfaces an error line when a mutation failed', () => {
     render(
       <MembersSection members={rows} canManage error="Couldn't update that member" />

package/src/components/team/members-table-default-class-names.ts

@@ -34,6 +34,8 @@ export interface MembersTableClassNames {
   invitedBy?: string
   /** Resend-invite action on a pending/expired row. */
   resendButton?: string
+  /** Deactivate / Restore action — the soft exit next to the hard Remove. */
+  deactivateButton?: string
 }
 
 export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
@@ -70,4 +72,6 @@ export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
   invitedBy: 'text-xs text-muted-foreground/80',
   resendButton:
     'rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary disabled:opacity-50',
+  deactivateButton:
+    'rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-foreground/30 hover:bg-muted hover:text-foreground disabled:opacity-50',
 }