feat(core + prompts): adds autocomplete

packages/prompts/src/autocomplete.ts

@@ -65,10 +65,10 @@ export interface AutocompleteOptions<Value> extends CommonOptions {
 }
 
 export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
-	const prompt = new AutocompletePrompt<Option<Value>>({
+	const prompt = new AutocompletePrompt({
 		options: opts.options,
 		placeholder: opts.placeholder,
-		initialValue: opts.initialValue ? [{ value: opts.initialValue }] : undefined,
+		initialValue: opts.initialValue ? [opts.initialValue] : undefined,
 		filter: (search: string, opt: Option<Value>) => {
 			return getFilteredOption(search, opt);
 		},
@@ -83,10 +83,7 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 			switch (this.state) {
 				case 'submit': {
 					// Show selected value
-					const selected = getSelectedOptions(
-						this.selectedValues.map((v) => v),
-						this.options
-					);
+					const selected = getSelectedOptions(this.selectedValues, this.options);
 					const label = selected.length > 0 ? selected.map(getLabel).join(', ') : '';
 					return `${title}${color.gray(S_BAR)}  ${color.dim(label)}`;
 				}
@@ -208,11 +205,16 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 		input: opts.input,
 		output: opts.output,
 		render() {
-			const formatOption = (option: Option<Value>, active: boolean, selectedValues: Value[]) => {
+			const formatOption = (
+				option: Option<Value>,
+				active: boolean,
+				selectedValues: Value[],
+				focusedValue: Value | undefined
+			) => {
 				const isSelected = selectedValues.includes(option.value);
 				const label = option.label ?? String(option.value ?? '');
 				const hint =
-					option.hint && this.focusedValue !== undefined && option.value === this.focusedValue
+					option.hint && focusedValue !== undefined && option.value === focusedValue
 						? color.dim(` (${option.hint})`)
 						: '';
 				const checkbox = isSelected
@@ -274,7 +276,8 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 					const displayOptions = limitOptions({
 						cursor: this.cursor,
 						options: this.filteredOptions,
-						style: (option, active) => formatOption(option, active, this.selectedValues),
+						style: (option, active) =>
+							formatOption(option, active, this.selectedValues, this.focusedValue),
 						maxItems: opts.maxItems,
 						output: opts.output,
 					});

packages/prompts/test/__snapshots__/autocomplete.test.ts.snap

@@ -0,0 +1,201 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`autocomplete > limits displayed options when maxItems is set 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+]
+`;
+
+exports[`autocomplete > renders initial UI with message and instructions 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+]
+`;
+
+exports[`autocomplete > shows hint when option has hint and is focused 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search:
+│  ○ Apple
+│  ● Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=5>",
+  "<erase.down>",
+  "│  ○ Banana
+│  ● Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=6>",
+  "<erase.down>",
+  "│  ○ Cherry
+│  ● Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=7>",
+  "<erase.down>",
+  "│  ○ Grape
+│  ● Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=8>",
+  "<erase.down>",
+  "│  ○ Orange
+│  ● Kiwi (New Zealand)
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+]
+`;
+
+exports[`autocomplete > shows no matches message when search has no results 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: z█ (0 matches)
+│  No matches found
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+]
+`;
+
+exports[`autocomplete > shows placeholder when provided 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+]
+`;
+
+exports[`autocomplete > shows selected value in submit state 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search:
+│  ○ Apple
+│  ● Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  Banana",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocomplete > shows strikethrough in cancel state 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "■  Select a fruit
+│",
+  "
+",
+  "<cursor.show>",
+]
+`;