CommandMenu

import * as React from 'react';
import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator, Icon } from '@bindshq/stance-react';

const box: React.CSSProperties = { width: 'min(440px, 100%)' };

export function Basic() {
  const [last, setLast] = React.useState('');
  return (
    <div style={{ ...box, display: 'grid', gap: 8 }}>
      <CommandMenu label="Quick actions" onItemSelect={setLast}>
        <CommandInput />
        <CommandList>
          <CommandGroup heading="Templates">
            <CommandItem value="New template" icon={<Icon name="plus" />} shortcut="⌘N" />
            <CommandItem value="Browse gallery" icon={<Icon name="layout-grid" />} />
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Organisation">
            <CommandItem value="Invite user" icon={<Icon name="users" />} shortcut="⌘I" />
            <CommandItem value="Open integrations" icon={<Icon name="link" />} />
            <CommandItem value="Settings" icon={<Icon name="settings" />} shortcut="⌘," />
          </CommandGroup>
        </CommandList>
        <CommandEmpty />
      </CommandMenu>
      <span aria-live="polite">{last && `Selected: ${last}`}</span>
    </div>
  );
}

import * as React from 'react';
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandMenu, Icon } from '@bindshq/stance-react';

const box: React.CSSProperties = { width: 'min(440px, 100%)' };

export function WithKeywords() {
  return (
    <CommandMenu label="Template actions" style={box}>
      <CommandInput placeholder="Search actions…" />
      <CommandList>
        <CommandItem
          value="New template"
          keywords={['create', 'add']}
          icon={<Icon name="plus" />}
        />
        <CommandItem
          value="Import from Outlook"
          keywords={['upload']}
          icon={<Icon name="upload" />}
          disabled
        />
        <CommandItem
          value="Export as HTML"
          keywords={['download']}
          icon={<Icon name="download" />}
        />
      </CommandList>
      <CommandEmpty>No actions match. Try “create” or “download”.</CommandEmpty>
    </CommandMenu>
  );
}

import * as React from 'react';
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandMenu, Icon } from '@bindshq/stance-react';

const box: React.CSSProperties = { width: 'min(440px, 100%)' };

const people = [
  'Ada Lovelace',
  'Grace Hopper',
  'Katherine Johnson',
  'Alan Turing',
  'Margaret Hamilton',
];

export function ServerFiltering() {
  const [search, setSearch] = React.useState('');
  // Stand-in for a server query: case-insensitive "contains".
  const results = people.filter((p) => p.toLowerCase().includes(search.toLowerCase()));
  return (
    <CommandMenu
      label="Find a person"
      search={search}
      onSearchChange={setSearch}
      filter={false}
      style={box}
    >
      <CommandInput placeholder="Search people…" />
      <CommandList>
        {results.map((p) => (
          <CommandItem key={p} value={p} icon={<Icon name="user" />} />
        ))}
      </CommandList>
      <CommandEmpty>No people found.</CommandEmpty>
    </CommandMenu>
  );
}