Merge branch 'main' into placeholder-fixeroos

Author: 43081j

.changeset/moody-baboons-greet.md

@@ -0,0 +1,5 @@
+---
+"@clack/core": patch
+---
+
+Set initial values of auto complete prompt to first option when multiple is false.

.changeset/strong-ravens-greet.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": minor
+---
+
+Add a `required` option to autocomplete multiselect.

packages/core/src/prompts/autocomplete.ts

@@ -95,8 +95,10 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt {
 			} else {
 				initialValues = opts.initialValue.slice(0, 1);
 			}
-		} else if (!this.multiple && this.options.length > 0) {
-			initialValues = [this.options[0].value];
+		} else {
+			if (!this.multiple && this.options.length > 0) {
+				initialValues = [this.options[0].value];
+			}
 		}
 
 		if (initialValues) {
@@ -152,14 +154,19 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt {
 			}
 			this.isNavigating = true;
 		} else {
-			if (
-				this.multiple &&
-				this.focusedValue !== undefined &&
-				(key.name === 'tab' || (this.isNavigating && key.name === 'space'))
-			) {
-				this.toggleSelected(this.focusedValue);
+			if (this.multiple) {
+				if (
+					this.focusedValue !== undefined &&
+					(key.name === 'tab' || (this.isNavigating && key.name === 'space'))
+				) {
+					this.toggleSelected(this.focusedValue);
+				} else {
+					this.isNavigating = false;
+				}
 			} else {
-				this.isNavigating = false;
+				if (this.focusedValue) {
+					this.selectedValues = [this.focusedValue];
+				}
 			}
 		}
 	}

packages/core/test/prompts/autocomplete.test.ts

@@ -93,6 +93,31 @@ describe('AutocompletePrompt', () => {
 		expect(instance.selectedValues).to.deep.equal(['cherry']);
 	});
 
+	test('initialValue defaults to first option when non-multiple', () => {
+		const instance = new AutocompletePrompt({
+			input,
+			output,
+			render: () => 'foo',
+			options: testOptions,
+		});
+
+		expect(instance.cursor).to.equal(0);
+		expect(instance.selectedValues).to.deep.equal(['apple']);
+	});
+
+	test('initialValue is empty when multiple', () => {
+		const instance = new AutocompletePrompt({
+			input,
+			output,
+			render: () => 'foo',
+			options: testOptions,
+			multiple: true,
+		});
+
+		expect(instance.cursor).to.equal(0);
+		expect(instance.selectedValues).to.deep.equal([]);
+	});
+
 	test('filtering through value event', () => {
 		const instance = new AutocompletePrompt({
 			input,
@@ -136,4 +161,37 @@ describe('AutocompletePrompt', () => {
 
 		expect(instance.filteredOptions).toEqual([]);
 	});
+
+	test('submit without nav resolves to first option in non-multiple', async () => {
+		const instance = new AutocompletePrompt({
+			input,
+			output,
+			render: () => 'foo',
+			options: testOptions,
+		});
+
+		const promise = instance.prompt();
+		input.emit('keypress', '', { name: 'return' });
+		const result = await promise;
+
+		expect(instance.selectedValues).to.deep.equal(['apple']);
+		expect(result).to.equal('apple');
+	});
+
+	test('submit without nav resolves to [] in multiple', async () => {
+		const instance = new AutocompletePrompt({
+			input,
+			output,
+			render: () => 'foo',
+			options: testOptions,
+			multiple: true,
+		});
+
+		const promise = instance.prompt();
+		input.emit('keypress', '', { name: 'return' });
+		const result = await promise;
+
+		expect(instance.selectedValues).to.deep.equal([]);
+		expect(result).to.deep.equal([]);
+	});
 });

packages/prompts/src/autocomplete.ts

@@ -41,7 +41,7 @@ function getSelectedOptions<T>(values: T[], options: Option<T>[]): Option<T>[] {
 	return results;
 }
 
-export interface AutocompleteOptions<Value> extends CommonOptions {
+interface AutocompleteSharedOptions<Value> extends CommonOptions {
 	/**
 	 * The message to display to the user.
 	 */
@@ -50,10 +50,6 @@ export interface AutocompleteOptions<Value> extends CommonOptions {
 	 * Available options for the autocomplete prompt.
 	 */
 	options: Option<Value>[];
-	/**
-	 * The initial selected value.
-	 */
-	initialValue?: Value;
 	/**
 	 * Maximum number of items to display at once.
 	 */
@@ -64,6 +60,13 @@ export interface AutocompleteOptions<Value> extends CommonOptions {
 	placeholder?: string;
 }
 
+export interface AutocompleteOptions<Value> extends AutocompleteSharedOptions<Value> {
+	/**
+	 * The initial selected value.
+	 */
+	initialValue?: Value;
+}
+
 export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 	const prompt = new AutocompletePrompt({
 		options: opts.options,
@@ -162,35 +165,15 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 };
 
 // Type definition for the autocompleteMultiselect component
-export interface AutocompleteMultiSelectOptions<Value> {
-	/**
-	 * The message to display to the user
-	 */
-	message: string;
-	/**
-	 * The options for the user to choose from
-	 */
-	options: Option<Value>[];
+export interface AutocompleteMultiSelectOptions<Value> extends AutocompleteSharedOptions<Value> {
 	/**
 	 * The initial selected values
 	 */
 	initialValues?: Value[];
 	/**
-	 * The maximum number of items that can be selected
+	 * If true, at least one option must be selected
 	 */
-	maxItems?: number;
-	/**
-	 * The placeholder to display in the input
-	 */
-	placeholder?: string;
-	/**
-	 * The stream to read from
-	 */
-	input?: NodeJS.ReadStream;
-	/**
-	 * The stream to write to
-	 */
-	output?: NodeJS.WriteStream;
+	required?: boolean;
 }
 
 /**
@@ -224,6 +207,12 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 		filter: (search, opt) => {
 			return getFilteredOption(search, opt);
 		},
+		validate: () => {
+			if (opts.required && prompt.selectedValues.length === 0) {
+				return 'Please select at least one item';
+			}
+			return undefined;
+		},
 		initialValue: opts.initialValues,
 		input: opts.input,
 		output: opts.output,
@@ -272,6 +261,9 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 							? [`${color.cyan(S_BAR)}  ${color.yellow('No matches found')}`]
 							: [];
 
+					const errorMessage =
+						this.state === 'error' ? [`${color.cyan(S_BAR)}  ${color.yellow(this.error)}`] : [];
+
 					// Get limited options for display
 					const displayOptions = limitOptions({
 						cursor: this.cursor,
@@ -287,6 +279,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 						title,
 						`${color.cyan(S_BAR)}  ${color.dim('Search:')} ${searchText}${matches}`,
 						...noResults,
+						...errorMessage,
 						...displayOptions.map((option) => `${color.cyan(S_BAR)}  ${option}`),
 						`${color.cyan(S_BAR)}  ${color.dim(instructions.join(' • '))}`,
 						`${color.cyan(S_BAR_END)}`,

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

@@ -15,6 +15,14 @@ exports[`autocomplete > limits displayed options when maxItems is set 1`] = `
 │  ...
 │  ↑/↓ to select • Enter: confirm • Type: to search
 └",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select an option
+│  Option 0",
+  "
+",
+  "<cursor.show>",
 ]
 `;
 
@@ -32,6 +40,14 @@ exports[`autocomplete > renders initial UI with message and instructions 1`] = `
 │  ○ 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
+│  Apple",
+  "
+",
+  "<cursor.show>",
 ]
 `;
 
@@ -121,6 +137,14 @@ exports[`autocomplete > shows hint when option has hint and is focused 1`] = `
 │  ● Kiwi (New Zealand)
 │  ↑/↓ to select • Enter: confirm • Type: to search
 └",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  Kiwi",
+  "
+",
+  "<cursor.show>",
 ]
 `;
 
@@ -145,6 +169,14 @@ exports[`autocomplete > shows no matches message when search has no results 1`]
 │  No matches found
 │  ↑/↓ to select • Enter: confirm • Type: to search
 └",
+  "<cursor.backward count=999><cursor.up count=6>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  Apple",
+  "
+",
+  "<cursor.show>",
 ]
 `;
 
@@ -233,3 +265,55 @@ exports[`autocomplete > supports initialValue 1`] = `
   "<cursor.show>",
 ]
 `;
+
+exports[`autocompleteMultiselect > renders error when empty selection & required is true 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "▲  Select a fruit
+
+│  Search: _
+│  Please select at least one item
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◆  Select a fruit
+
+│  Search: _
+│  ◼ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  1 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;