InviteDialog

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  Button,  InviteDialog,  Stack,  Text,  Toaster} from '@kerf-js/veneer'import type { Role, Invite } from '@kerf-js/veneer'export function Team() {  const open = state(false)  const sent = state<string[]>([])  const send = async (emails: string[]) => {    await wait(600)    sent.value = emails  }  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={send}      />      <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 @kerf-js/veneer

Usage

tsx

import { InviteDialog } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer'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.