fix: add hints for selected options in multiselect prompts & tests (bombshell-dev#279)

Author: dreyfus92

.changeset/afraid-socks-deny.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Fixes multiselect only shows hints on the first item in the options list. Now correctly shows hints for all selected options with hint property.

packages/prompts/src/__snapshots__/index.test.ts.snap

@@ -955,6 +955,42 @@ exports[`prompts (isCI = false) > multiselect > renders validation errors 1`] =
 ]
 `;
 
+exports[`prompts (isCI = false) > multiselect > shows hints for all selected options 1`] = `
+[
+  "[?25l",
+  "│
+◆  foo
+│  ◼ opt0 (Hint 0)
+│  ◼ opt1 (Hint 1)
+│  ◻ opt2
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ opt0 (Hint 0)
+│  ◼ opt1 (Hint 1)
+│  ◻ opt2
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ opt1 (Hint 1)
+│  ◻ opt2 (Hint 2)
+└
+",
+  "",
+  "",
+  "",
+  "◇  foo
+│  opt0, opt1",
+  "
+",
+  "[?25h",
+]
+`;
+
 exports[`prompts (isCI = false) > multiselect > sliding window loops downwards 1`] = `
 [
   "[?25l",
@@ -2693,6 +2729,42 @@ exports[`prompts (isCI = true) > multiselect > renders validation errors 1`] = `
 ]
 `;
 
+exports[`prompts (isCI = true) > multiselect > shows hints for all selected options 1`] = `
+[
+  "[?25l",
+  "│
+◆  foo
+│  ◼ opt0 (Hint 0)
+│  ◼ opt1 (Hint 1)
+│  ◻ opt2
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ opt0 (Hint 0)
+│  ◼ opt1 (Hint 1)
+│  ◻ opt2
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ opt1 (Hint 1)
+│  ◻ opt2 (Hint 2)
+└
+",
+  "",
+  "",
+  "",
+  "◇  foo
+│  opt0, opt1",
+  "
+",
+  "[?25h",
+]
+`;
+
 exports[`prompts (isCI = true) > multiselect > sliding window loops downwards 1`] = `
 [
   "[?25l",

packages/prompts/src/index.test.ts

@@ -790,6 +790,30 @@ describe.each(['true', 'false'])('prompts (isCI = %s)', (isCI) => {
 			expect(output.buffer).toMatchSnapshot();
 		});
 
+		test('shows hints for all selected options', async () => {
+			const result = prompts.multiselect({
+				message: 'foo',
+				options: [
+					{ value: 'opt0', hint: 'Hint 0' },
+					{ value: 'opt1', hint: 'Hint 1' },
+					{ value: 'opt2', hint: 'Hint 2' },
+				],
+				initialValues: ['opt0', 'opt1'],
+				input,
+				output,
+			});
+
+			// Check that both selected options show their hints
+			input.emit('keypress', '', { name: 'down' });
+			input.emit('keypress', '', { name: 'down' });
+			input.emit('keypress', '', { name: 'return' });
+
+			const value = await result;
+
+			expect(value).toEqual(['opt0', 'opt1']);
+			expect(output.buffer).toMatchSnapshot();
+		});
+
 		test('renders multiple cancelled values', async () => {
 			const result = prompts.multiselect({
 				message: 'foo',

packages/prompts/src/index.ts

@@ -386,7 +386,9 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 			}`;
 		}
 		if (state === 'selected') {
-			return `${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
+			return `${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)} ${
+				option.hint ? color.dim(`(${option.hint})`) : ''
+			}`;
 		}
 		if (state === 'cancelled') {
 			return `${color.strikethrough(color.dim(label))}`;
@@ -522,7 +524,9 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 		}
 		if (state === 'selected') {
 			const selectedCheckbox = isItem || selectableGroups ? color.green(S_CHECKBOX_SELECTED) : '';
-			return `${color.dim(prefix)}${selectedCheckbox} ${color.dim(label)}`;
+			return `${color.dim(prefix)}${selectedCheckbox} ${color.dim(label)} ${
+				option.hint ? color.dim(`(${option.hint})`) : ''
+			}`;
 		}
 		if (state === 'cancelled') {
 			return `${color.strikethrough(color.dim(label))}`;