InviteDialog

Invite several people by email and pick their role, checked against the seats left.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, InviteDialog, Stack, Text, Toaster } from '@weft-js/warp'import type { Invite } from '@weft-js/warp'import type { Role } from '@weft-js/warp'export function Team() {  const open = state(false)  const sent = state<string[]>([])  return (    <>      <Stack gap="related" align="center">        <Button icon="plus" onClick={() => (open.value = true)}>Invite people</Button>        <Text subtle>{sent.value.length ? `Invited ${sent.value.join(', ')}` : '3 seats left on Team.'}</Text>      </Stack>      <InviteDialog open={open} roles={INVITE_ROLES} defaultRole="member" seatsLeft={3} onSend={async emails => { await wait(600); sent.value = emails }} />      <Toaster />    </>  )}const TEAM_ROLES: Role[] = [{ value: 'owner', label: 'Owner', manages: true }, { value: 'admin', label: 'Admin', manages: true }, { value: 'member', label: 'Member' }, { value: 'viewer', label: 'Viewer' }]const INVITE_ROLES = TEAM_ROLES.slice(1)const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

import { InviteDialog } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`open`	`State<boolean>`	—	Whether it shows. You own this state.
`roles`	`{ value: string; label: string; }[]`	—	The roles to offer.
`defaultRole`	`string`	—	The role selected at the start.
`seatsLeft`	`number`	—	Seats still free.

Event	Type	Default	Description
`onSend`	`(emails: string[], role: string) => void \| Promise<void>`	—	Sends them. A thrown error keeps the dialog and its tags.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="input"]

input