Combobox

'use client'import { useId, useState, type ComponentProps, type ReactNode } from 'react'import { combobox } from '@master/ui/behaviors/combobox.js'import { useBehavior } from './use-behavior'export interface ComboboxOption {  /** What choosing the option gives `onValueChange`. */  value: string  /** What the option says, and what the field holds once it is chosen. */  label: string  description?: string  disabled?: boolean}export interface ComboboxProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'role'> {  options: ComboboxOption[]  /** The value of the chosen option; null while the field holds text no option was chosen for. */  value?: string | null  defaultValue?: string | null  onValueChange?: (value: string | null) => void  /** False when `options` are already the matches, from a server or a search of your own. */  filter?: boolean  /** The name of the list, for assistive technology. */  listLabel: string  /** The name of the button that opens the list. */  toggleLabel: string  /** What the list says when no option matches. */  empty?: ReactNode}/** * A combobox. Name the field with `aria-label`, or give it an `id` a label points at; every other prop of * an input goes to the field, so `onChange` hears what is typed. */export function Combobox({ options, value, defaultValue, onValueChange, filter = true, listLabel, toggleLabel, empty, className, ...field }: ComboboxProps) {  const id = useId()  const ref = useBehavior(combobox, { filter }, { value, defaultValue, onValueChange })  const [first] = useState(value ?? defaultValue)  return (    <div className={className ? `combobox ${className}` : 'combobox'} ref={ref}>      <div className="input-group">        <input className="input-group-field" role="combobox" aria-expanded="false" aria-controls={`${id}list`} aria-autocomplete="list" autoComplete="off" defaultValue={options.find(option => option.value === first)?.label} {...field} />        <button type="button" className="combobox-toggle" tabIndex={-1} aria-label={toggleLabel} />      </div>      <div id={`${id}list`} popover="manual" className="listbox" role="listbox" aria-label={listLabel}>        {options.map(option => (          <div className="listbox-option" role="option" key={option.value} data-value={option.value} aria-checked={option.value === first} aria-disabled={option.disabled || undefined}>            {option.description              ? <span className="listbox-body"><span>{option.label}</span><span className="listbox-description">{option.description}</span></span>              : option.label}          </div>        ))}        {empty !== undefined && <div className="listbox-empty">{empty}</div>}      </div>    </div>  )}

<script lang="ts" module>  import type { HTMLInputAttributes } from 'svelte/elements'  export interface ComboboxOption {    /** What choosing the option gives `onValueChange`. */    value: string    /** What the option says, and what the field holds once it is chosen. */    label: string    description?: string    disabled?: boolean  }  export interface ComboboxProps extends Omit<HTMLInputAttributes, 'value' | 'role' | 'children'> {    options: ComboboxOption[]    /** The value of the chosen option; null while the field holds text no option was chosen for. Bind it, or leave it out. */    value?: string | null    onValueChange?: (value: string | null) => void    /** False when `options` are already the matches, from a server or a search of your own. */    filter?: boolean    /** The name of the list, for assistive technology. */    listLabel: string    /** The name of the button that opens the list. */    toggleLabel: string    /** What the list says when no option matches. */    empty?: string  }</script><script lang="ts">  import { untrack } from 'svelte'  import { combobox } from '@master/ui/behaviors/combobox.js'  import { behavior } from './behavior.svelte.js'  let { options, value = $bindable(), onValueChange, filter = true, listLabel, toggleLabel, empty, class: className, ...field }: ComboboxProps = $props()  const id = $props.id()  const first = untrack(() => value)  const text = untrack(() => options.find(option => option.value === first)?.label)  const attach = behavior(combobox, () => ({ filter }), {    value: () => value,    change: (next) => { value = next; onValueChange?.(next) },  })</script><!--  @component  A combobox. Name the field with `aria-label`, or give it an `id` a label points at; every other prop of  an input goes to the field, so `oninput` hears what is typed.--><div class={['combobox', className]} {@attach attach}>  <div class="input-group">    <input class="input-group-field" role="combobox" aria-expanded="false" aria-controls="{id}list" aria-autocomplete="list" autocomplete="off" value={text} {...field} />    <button type="button" class="combobox-toggle" tabindex={-1} aria-label={toggleLabel}></button>  </div>  <div id="{id}list" popover="manual" class="listbox" role="listbox" aria-label={listLabel}>    {#each options as option (option.value)}      <!-- The behavior writes `aria-selected` on the option the keys are on. -->      <!-- svelte-ignore a11y_role_has_required_aria_props -->      <div class="listbox-option" role="option" data-value={option.value} aria-checked={option.value === first} aria-disabled={option.disabled || undefined}>        {#if option.description}          <span class="listbox-body"><span>{option.label}</span><span class="listbox-description">{option.description}</span></span>        {:else}          {option.label}        {/if}      </div>    {/each}    {#if empty !== undefined}<div class="listbox-empty">{empty}</div>{/if}  </div></div>

<script lang="ts">export interface ComboboxOption {  /** What choosing the option gives the model. */  value: string  /** What the option says, and what the field holds once it is chosen. */  label: string  description?: string  disabled?: boolean}</script><script setup lang="ts">import { useAttrs, useId, useTemplateRef } from 'vue'import { combobox } from '@master/ui/behaviors/combobox.js'import { useBehavior } from './use-behavior'defineOptions({ inheritAttrs: false })const { options, filter = true } = defineProps<{  options: ComboboxOption[]  /** False when `options` are already the matches, from a server or a search of your own. */  filter?: boolean  /** The name of the list, for assistive technology. */  listLabel: string  /** The name of the button that opens the list. */  toggleLabel: string  /** What the list says when no option matches. */  empty?: string}>()/** The value of the chosen option; null while the field holds text no option was chosen for: `v-model`. */const model = defineModel<string | null>()/* * A combobox. Name the field with `aria-label`, or give it an `id` a label points at; every attribute but * the class goes to the field, so `@change` hears what is typed. */const id = useId()const attrs = useAttrs()const field = () => {  const { class: _, ...rest } = attrs  return rest}const first = model.value// The first label is the field's default value, an attribute: what is typed after is not Vue's to write.const firstLabel = options.find(option => option.value === first)?.labelconst root = useTemplateRef<HTMLDivElement>('root')useBehavior(root, combobox, () => ({ filter }), model)</script><template>  <div class="combobox" :class="$attrs.class" ref="root">    <div class="input-group">      <input class="input-group-field" role="combobox" aria-expanded="false" :aria-controls="`${id}-list`" aria-autocomplete="list" autocomplete="off" :value.attr="firstLabel" v-bind="field()">      <button type="button" class="combobox-toggle" tabindex="-1" :aria-label="toggleLabel" />    </div>    <div :id="`${id}-list`" popover="manual" class="listbox" role="listbox" :aria-label="listLabel">      <div v-for="option in options" :key="option.value" class="listbox-option" role="option" :data-value="option.value" :aria-checked="option.value === first" :aria-disabled="option.disabled || undefined">        <span v-if="option.description" class="listbox-body"><span>{{ option.label }}</span><span class="listbox-description">{{ option.description }}</span></span>        <template v-else>{{ option.label }}</template>      </div>      <div v-if="empty !== undefined" class="listbox-empty">{{ empty }}</div>    </div>  </div></template>