Command palette

'use client'import { useCallback, useEffect, useId, useReducer, useRef, type ComponentProps, type ReactNode } from 'react'import { command } from '@master/ui/behaviors/command.js'import { useBehavior } from './use-behavior'export interface CommandItem {  label: string  /** A shortcut or a hint at the end of the row. */  hint?: ReactNode  /** The caption of the group the command belongs to. Commands of one group are written together. */  group?: string  /** Where the command goes. Without it, `onSelect` runs. */  href?: string  onSelect?: () => void  disabled?: boolean}export interface CommandProps extends Omit<ComponentProps<'dialog'>, 'open' | 'onSelect'> {  items: CommandItem[]  open?: boolean  onOpenChange?: (open: boolean) => void  /** The key that opens and closes the palette with Command or Control. `'k'` by default, `false` for none. */  shortcut?: string | false  /** False when `items` are already the matches; `onSearch` then says what was typed. */  filter?: boolean  onSearch?: (text: string) => void  /** The name of the search field, and the placeholder it shows. */  searchLabel: string  placeholder?: string  /** The name of the list of commands. */  listLabel: string  empty?: ReactNode}/** A command palette: a native dialog over a search field and a list. Name the dialog with `aria-label`. */export function Command({ items, open, onOpenChange, shortcut = 'k', filter = true, onSearch, searchLabel, placeholder, listLabel, empty, className, ...dialog }: CommandProps) {  const id = useId()  const element = useRef<HTMLDialogElement | null>(null)  const attach = useBehavior(command, { shortcut, filter })  const ref = useCallback((root: HTMLDialogElement | null) => {    element.current = root    return attach(root) ?? undefined  }, [attach])  const [tick, again] = useReducer((count: number) => count + 1, 0)  const heard = useRef(onOpenChange)  /** What the owner knows: the last state it set or was told. */  const known = useRef(false)  useEffect(() => { heard.current = onOpenChange })  useEffect(() => {    const root = element.current    if (!root || open === undefined) return    known.current = open    if (open && !root.open) root.showModal()    else if (!open && root.open) root.close()  }, [open, tick])  useEffect(() => {    const root = element.current    if (!root) return    const controller = new AbortController()    // The shortcut, Esc and a command that ran all open or close the dialog without asking: say so.    const report = () => {      if (root.open !== known.current) heard.current?.(known.current = root.open)      again()    }    for (const type of ['toggle', 'close']) root.addEventListener(type, report, { signal: controller.signal })    return () => controller.abort()  }, [])  const groups = [...new Set(items.map(item => item.group))]  const option = (item: CommandItem, at: number) => item.href    ? <a className="listbox-option" role="option" key={at} href={item.href} aria-disabled={item.disabled || undefined}>{item.label}{item.hint !== undefined && <span className="listbox-end">{item.hint}</span>}</a>    : <div className="listbox-option" role="option" key={at} onClick={item.onSelect} aria-disabled={item.disabled || undefined}>{item.label}{item.hint !== undefined && <span className="listbox-end">{item.hint}</span>}</div>  return (    <dialog      className={className ? `dialog command ${className}` : 'dialog command'}      ref={ref}      {...{ closedby: 'any' }}      {...dialog}    >      <label className="command-search">        <input className="command-input" type="search" role="combobox" aria-expanded="true" aria-controls={`${id}list`} aria-autocomplete="list" aria-label={searchLabel} autoComplete="off" placeholder={placeholder} autoFocus onInput={event => onSearch?.(event.currentTarget.value)} />      </label>      <div className="listbox command-list" id={`${id}list`} role="listbox" aria-label={listLabel}>        {groups.map((group, index) => group === undefined          ? items.map((item, at) => item.group === undefined && option(item, at))          : (              <div className="listbox-group" role="group" aria-labelledby={`${id}group${index}`} key={group}>                <div className="listbox-label" id={`${id}group${index}`}>{group}</div>                {items.map((item, at) => item.group === group && option(item, at))}              </div>            ))}        {empty !== undefined && <div className="listbox-empty">{empty}</div>}      </div>    </dialog>  )}

<script lang="ts" module>  import type { HTMLDialogAttributes } from 'svelte/elements'  export interface CommandItem {    label: string    /** A shortcut or a hint at the end of the row. */    hint?: string    /** The caption of the group the command belongs to. Commands of one group are written together. */    group?: string    /** Where the command goes. Without it, `onSelect` runs. */    href?: string    onSelect?: () => void    disabled?: boolean  }  export interface CommandProps extends Omit<HTMLDialogAttributes, 'open' | 'children'> {    items: CommandItem[]    /** Whether the palette is open. Bind it, or leave it out and the shortcut opens it. */    open?: boolean    onOpenChange?: (open: boolean) => void    /** The key that opens and closes the palette with Command or Control. `'k'` by default, `false` for none. */    shortcut?: string | false    /** False when `items` are already the matches; `onSearch` then says what was typed. */    filter?: boolean    onSearch?: (text: string) => void    /** The name of the search field, and the placeholder it shows. */    searchLabel: string    placeholder?: string    /** The name of the list of commands. */    listLabel: string    empty?: string  }</script><script lang="ts">  import type { Attachment } from 'svelte/attachments'  import { command } from '@master/ui/behaviors/command.js'  import { behavior } from './behavior.svelte.js'  let { items, open = $bindable(), onOpenChange, shortcut = 'k', filter = true, onSearch, searchLabel, placeholder, listLabel, empty, class: className, ...dialog }: CommandProps = $props()  const id = $props.id()  const attach = behavior(command, () => ({ shortcut, filter }))  const groups = $derived([...new Set(items.map(item => item.group))])  /** What the owner knows: the last state it set or was told. */  let known = false  const presence: Attachment<HTMLDialogElement> = (root) => {    const controller = new AbortController()    // The shortcut, Esc and a command that ran all open or close the dialog without asking: say so.    const report = () => {      if (root.open === known) return      open = known = root.open      onOpenChange?.(known)    }    for (const type of ['toggle', 'close']) root.addEventListener(type, report, { signal: controller.signal })    $effect(() => {      if (open === undefined) return      known = open      if (open && !root.open) root.showModal()      else if (!open && root.open) root.close()    })    return () => controller.abort()  }</script>{#snippet option(item: CommandItem)}  <!-- The behavior writes `aria-selected` on the option the keys are on. -->  <!-- svelte-ignore a11y_role_has_required_aria_props -->  {#if item.href}    <a class="listbox-option" role="option" href={item.href} aria-disabled={item.disabled || undefined}>{item.label}{#if item.hint !== undefined}<span class="listbox-end">{item.hint}</span>{/if}</a>  {:else}    <!-- Focus stays in the field, and Enter there clicks the option. -->    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->    <div class="listbox-option" role="option" onclick={item.onSelect} aria-disabled={item.disabled || undefined}>{item.label}{#if item.hint !== undefined}<span class="listbox-end">{item.hint}</span>{/if}</div>  {/if}{/snippet}<!--  @component  A command palette: a native dialog over a search field and a list. Name the dialog with `aria-label`.--><dialog class={['dialog', 'command', className]} closedby="any" {@attach attach} {@attach presence} {...dialog}>  <label class="command-search">    <!-- The dialog gives the field focus as it opens. -->    <!-- svelte-ignore a11y_autofocus -->    <input class="command-input" type="search" role="combobox" aria-expanded="true" aria-controls="{id}list" aria-autocomplete="list" aria-label={searchLabel} autocomplete="off" {placeholder} autofocus oninput={event => onSearch?.(event.currentTarget.value)} />  </label>  <div class="listbox command-list" id="{id}list" role="listbox" aria-label={listLabel}>    {#each groups as group, index (group)}      {#if group === undefined}        {#each items.filter(item => item.group === undefined) as item}{@render option(item)}{/each}      {:else}        <div class="listbox-group" role="group" aria-labelledby="{id}group{index}">          <div class="listbox-label" id="{id}group{index}">{group}</div>          {#each items.filter(item => item.group === group) as item}{@render option(item)}{/each}        </div>      {/if}    {/each}    {#if empty !== undefined}<div class="listbox-empty">{empty}</div>{/if}  </div></dialog>

<script lang="ts">export interface CommandItem {  label: string  /** A shortcut or a hint at the end of the row. */  hint?: string  /** The caption of the group the command belongs to. Commands of one group are written together. */  group?: string  /** Where the command goes. Without it, `onSelect` runs. */  href?: string  onSelect?: () => void  disabled?: boolean}</script><script setup lang="ts">import { computed, h, nextTick, onMounted, useId, useTemplateRef, watch, type FunctionalComponent } from 'vue'import { command } from '@master/ui/behaviors/command.js'import { useBehavior } from './use-behavior'defineOptions({ inheritAttrs: false })const { items, shortcut = 'k', filter = true } = defineProps<{  items: CommandItem[]  /** The key that opens and closes the palette with Command or Control. `'k'` by default, `false` for none. */  shortcut?: string | false  /** False when `items` are already the matches; `search` then says what was typed. */  filter?: boolean  /** The name of the search field, and the placeholder it shows. */  searchLabel: string  placeholder?: string  /** The name of the list of commands. */  listLabel: string  empty?: string}>()/** Whether the palette is open: `v-model:open`. */const open = defineModel<boolean>('open')const emit = defineEmits<{  /** What was typed in the search field. */  search: [text: string]}>()/* A command palette: a native dialog over a search field and a list. Name the dialog with `aria-label`. */const id = useId()const root = useTemplateRef<HTMLDialogElement>('root')useBehavior(root, command, () => ({ shortcut, filter }))/** What the owner knows: the last state it set or was told. */let known = falseconst sync = () => {  const dialog = root.value  if (!dialog || open.value === undefined) return  known = open.value  if (open.value && !dialog.open) dialog.showModal()  else if (!open.value && dialog.open) dialog.close()}// The shortcut, Esc and a command that ran all open or close the dialog without asking: say so.const report = () => {  const dialog = root.value  if (!dialog) return  if (dialog.open !== known) open.value = known = dialog.open  void nextTick(sync)}onMounted(sync)watch(open, sync, { flush: 'post' })const groups = computed(() => [...new Set(items.map(item => item.group))])const Row: FunctionalComponent<{ item: CommandItem }> = ({ item }) => {  const content = [item.label, item.hint !== undefined ? h('span', { class: 'listbox-end' }, item.hint) : undefined]  return item.href    ? h('a', { 'class': 'listbox-option', 'role': 'option', 'href': item.href, 'aria-disabled': item.disabled || undefined }, content)    : h('div', { 'class': 'listbox-option', 'role': 'option', 'onClick': () => item.onSelect?.(), 'aria-disabled': item.disabled || undefined }, content)}Row.props = ['item']</script><template>  <dialog class="dialog command" closedby="any" ref="root" v-bind="$attrs" @toggle="report" @close="report">    <label class="command-search">      <input class="command-input" type="search" role="combobox" aria-expanded="true" :aria-controls="`${id}-list`" aria-autocomplete="list" :aria-label="searchLabel" autocomplete="off" :placeholder="placeholder" autofocus @input="emit('search', ($event.target as HTMLInputElement).value)">    </label>    <div class="listbox command-list" :id="`${id}-list`" role="listbox" :aria-label="listLabel">      <template v-for="(group, index) in groups" :key="group ?? ''">        <template v-if="group === undefined">          <template v-for="(item, at) in items" :key="at"><Row v-if="item.group === undefined" :item="item" /></template>        </template>        <div v-else class="listbox-group" role="group" :aria-labelledby="`${id}-group-${index}`">          <div class="listbox-label" :id="`${id}-group-${index}`">{{ group }}</div>          <template v-for="(item, at) in items" :key="at"><Row v-if="item.group === group" :item="item" /></template>        </div>      </template>      <div v-if="empty !== undefined" class="listbox-empty">{{ empty }}</div>    </div>  </dialog></template>