feat: allow selecting all and selecting inverse

Author: tefkah

packages/core/src/prompts/autocomplete.ts

@@ -140,6 +140,8 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 		const isUpKey = key.name === 'up';
 		const isDownKey = key.name === 'down';
 		const isReturnKey = key.name === 'return';
+		const isLeft = key.name === 'left';
+		const isRight = key.name === 'right';
 
 		// Start navigation mode with up/down arrows
 		if (isUpKey || isDownKey) {
@@ -161,6 +163,15 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 					(key.name === 'tab' || (this.isNavigating && key.name === 'space'))
 				) {
 					this.toggleSelected(this.focusedValue);
+				} else if (isLeft) {
+					// set to none if all are selected
+					if (this.selectedValues.length === this.filteredOptions.length) {
+						this.deselectAll();
+					} else {
+						this.selectAll();
+					}
+				} else if (isRight) {
+					this.invertSelected();
 				} else {
 					this.isNavigating = false;
 				}
@@ -173,10 +184,20 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 		}
 	}
 
+	selectAll() {
+		this.selectedValues = this.filteredOptions.map((opt) => opt.value);
+	}
+
 	deselectAll() {
 		this.selectedValues = [];
 	}
 
+	invertSelected() {
+		this.selectedValues = this.filteredOptions
+			.filter((opt) => !this.selectedValues.includes(opt.value))
+			.map((opt) => opt.value);
+	}
+
 	toggleSelected(value: T['value']) {
 		if (this.filteredOptions.length === 0) {
 			return;

packages/prompts/src/autocomplete.ts

@@ -96,6 +96,7 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 			const placeholder = opts.placeholder;
 			const showPlaceholder = valueAsString === '' && placeholder !== undefined;
 
+			console.log(this.state);
 			// Handle different states
 			switch (this.state) {
 				case 'submit': {
@@ -275,6 +276,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 					// Instructions
 					const instructions = [
 						`${color.dim('↑/↓')} to navigate`,
+						`${color.dim('←/→')} select all/inverse`,
 						`${color.dim('Space:')} select`,
 						`${color.dim('Enter:')} confirm`,
 						`${color.dim('Type:')} to search`,

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

@@ -286,6 +286,49 @@ exports[`autocomplete > supports initialValue 1`] = `
 ]
 `;
 
+exports[`autocompleteMultiselect > all selection only applies to filtered options 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: r█ (3 matches)
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=8>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: r (3 matches)
+│  ◼ Cherry
+│  ◼ Grape
+│  ◼ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=8>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  3 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocompleteMultiselect > can be aborted by a signal 1`] = `
 [
   "<cursor.hide>",
@@ -298,8 +341,195 @@ exports[`autocompleteMultiselect > can be aborted by a signal 1`] = `
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocompleteMultiselect > everything can be selected with left arrow 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ◼ Apple
+│  ◼ Banana
+│  ◼ Cherry
+│  ◼ Grape
+│  ◼ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  5 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocompleteMultiselect > everything is deselected if left is pressed again 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ◼ Apple
+│  ◼ Banana
+│  ◼ Cherry
+│  ◼ Grape
+│  ◼ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  0 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocompleteMultiselect > inverse can be selected with right arrow 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: 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 navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=5>",
+  "<erase.line><cursor.left count=1>",
+  "│  ◼ Banana",
+  "<cursor.down count=5>",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ◼ Apple
+│  ◻ Banana
+│  ◼ Cherry
+│  ◼ Grape
+│  ◼ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
 └",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  4 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocompleteMultiselect > inversion only applies to filtered options 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: r█ (3 matches)
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=8>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: r (3 matches)
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=8>",
+  "<cursor.down count=5>",
+  "<erase.line><cursor.left count=1>",
+  "│  ◼ Grape",
+  "<cursor.down count=3>",
+  "<cursor.backward count=999><cursor.up count=8>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ◼ Cherry
+│  ◻ Grape
+│  ◼ Orange
+│  ↑/↓ to navigate • ←/→ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=8>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  2 items selected",
   "
 ",
   "<cursor.show>",
@@ -318,7 +548,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
+[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2m←/→[22m[2m select all/inverse • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
 └",
   "<cursor.backward count=999><cursor.up count=10>",
   "<cursor.down count=1>",
@@ -332,7 +562,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
+[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2m←/→[22m[2m select all/inverse • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
 └",
   "<cursor.backward count=999><cursor.up count=11>",
   "<cursor.down count=1>",
@@ -345,7 +575,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
+[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2m←/→[22m[2m select all/inverse • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
 └",
   "<cursor.backward count=999><cursor.up count=10>",
   "<cursor.down count=1>",