feat(autocomplete-multiselect): allow select all and selecting inverse using shift up/down

.changeset/happy-spoons-push.md

@@ -0,0 +1,6 @@
+---
+"@clack/prompts": minor
+"@clack/core": minor
+---
+
+add inversion and selecting all options for autocomplete multiselect

packages/core/src/prompts/autocomplete.ts

@@ -143,6 +143,12 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 
 		// Start navigation mode with up/down arrows
 		if (isUpKey || isDownKey) {
+			// shift up/down behavior
+			if (key.shift) {
+				this.#handleShiftNavigation(isUpKey);
+				return;
+			}
+
 			this.#cursor = Math.max(
 				0,
 				Math.min(this.#cursor + (isUpKey ? -1 : 1), this.filteredOptions.length - 1)
@@ -173,6 +179,39 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 		}
 	}
 
+	#handleShiftNavigation(isUpKey: boolean) {
+		// invert if Shift + Down
+		if (!isUpKey) {
+			this.invertSelectedFiltered();
+			return;
+		}
+
+		// set to none if all are selected
+		if (this.selectedValues.length === this.filteredOptions.length) {
+			this.deselectAllFiltered();
+			return;
+		}
+
+		this.selectAllFiltered();
+		return;
+	}
+
+	selectAllFiltered() {
+		this.selectedValues = this.filteredOptions.map((opt) => opt.value);
+	}
+
+	deselectAllFiltered() {
+		this.selectedValues = this.filteredOptions
+			.filter((opt) => !this.selectedValues.includes(opt.value))
+			.map((opt) => opt.value);
+	}
+
+	invertSelectedFiltered() {
+		this.selectedValues = this.filteredOptions
+			.filter((opt) => !this.selectedValues.includes(opt.value))
+			.map((opt) => opt.value);
+	}
+
 	deselectAll() {
 		this.selectedValues = [];
 	}

packages/prompts/src/autocomplete.ts

@@ -275,6 +275,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 					// Instructions
 					const instructions = [
 						`${color.dim('↑/↓')} to navigate`,
+						`${color.dim('Shift+↑/↓')} 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,48 @@ 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 • Shift+↑/↓ 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 • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=8>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ◼ Cherry
+│  ◼ Grape
+│  ◼ Orange
+│  ↑/↓ to navigate • Shift+↑/↓ 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,14 +340,201 @@ exports[`autocompleteMultiselect > can be aborted by a signal 1`] = `
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+│  ↑/↓ to navigate • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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 • Shift+↑/↓ 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>",
+]
+`;
+
 exports[`autocompleteMultiselect > renders error when empty selection & required is true 1`] = `
 [
   "<cursor.hide>",
@@ -318,7 +547,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+│  ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
 └",
   "<cursor.backward count=999><cursor.up count=10>",
   "<cursor.down count=1>",
@@ -332,7 +561,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+│  ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
 └",
   "<cursor.backward count=999><cursor.up count=11>",
   "<cursor.down count=1>",
@@ -345,7 +574,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-│  ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
+│  ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
 └",
   "<cursor.backward count=999><cursor.up count=10>",
   "<cursor.down count=1>",