Autocomplete

import { Label } from "@booleanpress/ui/label"
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@booleanpress/ui/autocomplete"

const TAGS = ["billing", "bounce", "dkim", "dmarc", "dns", "feature request", "onboarding", "refund", "spf", "webhook"]

export default function AutocompleteBasic() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-2">
      <Label htmlFor="autocomplete-tag">Ticket tag</Label>
      <Autocomplete items={TAGS}>
        <AutocompleteInput id="autocomplete-tag" placeholder="Type a tag" />
        <AutocompleteContent>
          <AutocompleteList>
            {(tag: string) => (
              <AutocompleteItem key={tag} value={tag}>
                {tag}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  )
}

import { Label } from "@booleanpress/ui/label"
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@booleanpress/ui/autocomplete"

const ZONES = ["Africa/Cairo", "America/Chicago", "America/New_York", "Asia/Dhaka", "Asia/Tokyo", "Europe/Berlin", "Europe/London", "Europe/Madrid"]

export default function AutocompleteInline() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-2">
      <Label htmlFor="autocomplete-zone">Time zone</Label>
      <Autocomplete items={ZONES} mode="both">
        <AutocompleteInput id="autocomplete-zone" placeholder="Europe/London" />
        <AutocompleteContent>
          <AutocompleteList>
            {(zone: string) => (
              <AutocompleteItem key={zone} value={zone}>
                {zone}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  )
}

import { useRef, useState } from "react"
import { Label } from "@booleanpress/ui/label"
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompleteStatus,
} from "@booleanpress/ui/autocomplete"

const ARTICLES = [
  "Set up SPF for your domain",
  "Set up DKIM signing",
  "Read a bounce report",
  "Rotate an API key",
  "Route email per site",
  "Resend failed emails",
]

// Stands in for a request to the help centre: answers after 600 ms.
function searchArticles(query: string) {
  return new Promise<string[]>((resolve) =>
    setTimeout(() => resolve(ARTICLES.filter((title) => title.toLowerCase().includes(query.toLowerCase()))), 600)
  )
}

export default function AutocompleteAsync() {
  const [results, setResults] = useState<string[]>([])
  const [loading, setLoading] = useState(false)
  const [failed, setFailed] = useState(false)
  // Only the latest request may update the list: an earlier, slower answer is dropped.
  const latest = useRef(0)

  async function search(query: string) {
    const request = ++latest.current
    setFailed(false)
    if (!query.trim()) {
      setResults([])
      setLoading(false)
      return
    }
    setLoading(true)
    try {
      const found = await searchArticles(query)
      if (request === latest.current) setResults(found)
    } catch {
      if (request === latest.current) {
        setResults([])
        setFailed(true)
      }
    } finally {
      if (request === latest.current) setLoading(false)
    }
  }

  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Label htmlFor="autocomplete-help">Search the help centre</Label>
      <Autocomplete items={results} filter={null} onValueChange={(query, { reason }) => reason !== "item-press" && search(query)}>
        <AutocompleteInput id="autocomplete-help" placeholder="e.g. bounce" loading={loading} />
        <AutocompleteContent>
          <AutocompleteStatus loading={loading}>{failed ? "Could not search the help centre. Try again." : null}</AutocompleteStatus>
          <AutocompleteList>
            {(title: string) => (
              <AutocompleteItem key={title} value={title}>
                {title}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  )
}

import { Label } from "@booleanpress/ui/label"
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteGroup,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteLabel,
  AutocompleteList,
} from "@booleanpress/ui/autocomplete"

const GROUPS = [
  { value: "Recent", items: ["invoice overdue", "bounce rate"] },
  { value: "Customers", items: ["Northwind Traders", "Fabrikam Studio", "Contoso Clinics"] },
  { value: "Mailers", items: ["Amazon SES", "Postmark", "SendGrid"] },
]

export default function AutocompleteGroups() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Label htmlFor="autocomplete-search">Search</Label>
      <Autocomplete items={GROUPS}>
        <AutocompleteInput id="autocomplete-search" placeholder="Search everything" />
        <AutocompleteContent>
          <AutocompleteEmpty />
          <AutocompleteList>
            {(group: (typeof GROUPS)[number]) => (
              <AutocompleteGroup key={group.value} items={group.items}>
                <AutocompleteLabel>{group.value}</AutocompleteLabel>
                {group.items.map((entry) => (
                  <AutocompleteItem key={entry} value={entry}>
                    {entry}
                  </AutocompleteItem>
                ))}
              </AutocompleteGroup>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  )
}

import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@booleanpress/ui/autocomplete"

const SIZES = [
  { size: "sm", label: "Small" },
  { size: "default", label: "Default" },
  { size: "lg", label: "Large" },
] as const

const SENDERS = ["Billing team", "Deliverability team", "Support team", "No reply"]

export default function AutocompleteSizes() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-4">
      {SIZES.map(({ size, label }) => (
        <Autocomplete key={size} items={SENDERS}>
          <AutocompleteInput size={size} placeholder={label} aria-label={`Sender name, ${label.toLowerCase()} size`} />
          <AutocompleteContent>
            <AutocompleteList>
              {(sender: string) => (
                <AutocompleteItem key={sender} value={sender}>
                  {sender}
                </AutocompleteItem>
              )}
            </AutocompleteList>
          </AutocompleteContent>
        </Autocomplete>
      ))}
    </div>
  )
}

import { Label } from "@booleanpress/ui/label"
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@booleanpress/ui/autocomplete"

const SUBJECTS = ["Your receipt", "Your password reset link", "Welcome aboard", "Your invoice is ready"]

export default function AutocompleteFilled() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Label htmlFor="autocomplete-subject">Subject</Label>
      <Autocomplete items={SUBJECTS}>
        <AutocompleteInput id="autocomplete-subject" variant="filled" placeholder="Write a subject" />
        <AutocompleteContent>
          <AutocompleteList>
            {(subject: string) => (
              <AutocompleteItem key={subject} value={subject}>
                {subject}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  )
}

import { Label } from "@booleanpress/ui/label"
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@booleanpress/ui/autocomplete"

const SENDERS = ["Billing team", "Support team"]

export default function AutocompleteDisabled() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-2">
      <Label htmlFor="autocomplete-sender">Sender name</Label>
      <Autocomplete items={SENDERS} defaultValue="Support team" disabled>
        <AutocompleteInput id="autocomplete-sender" disabled />
        <AutocompleteContent>
          <AutocompleteList>
            {(sender: string) => (
              <AutocompleteItem key={sender} value={sender}>
                {sender}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  )
}

import { Label } from "@booleanpress/ui/label"
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@booleanpress/ui/autocomplete"

const DOMAINS = ["example.com", "mail.example.com", "news.example.com"]

export default function AutocompleteInvalid() {
  return (
    <div className="flex w-full max-w-56 flex-col gap-2">
      <Label htmlFor="autocomplete-domain">Sending domain</Label>
      <Autocomplete items={DOMAINS} required>
        <AutocompleteInput
          id="autocomplete-domain"
          placeholder="example.com"
          aria-invalid
          aria-describedby="autocomplete-domain-error"
        />
        <AutocompleteContent>
          <AutocompleteList>
            {(domain: string) => (
              <AutocompleteItem key={domain} value={domain}>
                {domain}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
      <p id="autocomplete-domain-error" className="text-xs text-destructive-strong">
        Enter the domain you send from.
      </p>
    </div>
  )
}