feat: add groupSpacing option to group multi select

.changeset/happy-parents-explain.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": minor
+---
+
+Adds a new `groupSpacing` option to grouped multi-select prompts. If set to an integer greater than 0, it will add that number of new lines between each group.

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

@@ -380,6 +380,94 @@ exports[`prompts (isCI = false) > groupMultiselect > cursorAt sets initial selec
 ]
 `;
 
+exports[`prompts (isCI = false) > groupMultiselect > groupSpacing > negative spacing is ignored 1`] = `
+[
+  "[?25l",
+  "│
+◆  foo
+│  ◻ group1
+│  └ ◻ group1value0
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◻ group1
+│  └ ◻ group1value0
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ group1
+│  └ ◼ group1value0
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "◇  foo
+│  group1value0",
+  "
+",
+  "[?25h",
+]
+`;
+
+exports[`prompts (isCI = false) > groupMultiselect > groupSpacing > renders spaced groups 1`] = `
+[
+  "[?25l",
+  "│
+◆  foo
+│
+│
+│  ◻ group1
+│  └ ◻ group1value0
+│
+│
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◻ group1
+│  └ ◻ group1value0
+│
+│
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ group1
+│  └ ◼ group1value0
+│
+│
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "◇  foo
+│  group1value0",
+  "
+",
+  "[?25h",
+]
+`;
+
 exports[`prompts (isCI = false) > groupMultiselect > initial values can be set 1`] = `
 [
   "[?25l",
@@ -2154,6 +2242,94 @@ exports[`prompts (isCI = true) > groupMultiselect > cursorAt sets initial select
 ]
 `;
 
+exports[`prompts (isCI = true) > groupMultiselect > groupSpacing > negative spacing is ignored 1`] = `
+[
+  "[?25l",
+  "│
+◆  foo
+│  ◻ group1
+│  └ ◻ group1value0
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◻ group1
+│  └ ◻ group1value0
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ group1
+│  └ ◼ group1value0
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "◇  foo
+│  group1value0",
+  "
+",
+  "[?25h",
+]
+`;
+
+exports[`prompts (isCI = true) > groupMultiselect > groupSpacing > renders spaced groups 1`] = `
+[
+  "[?25l",
+  "│
+◆  foo
+│
+│
+│  ◻ group1
+│  └ ◻ group1value0
+│
+│
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◻ group1
+│  └ ◻ group1value0
+│
+│
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "│  ◼ group1
+│  └ ◼ group1value0
+│
+│
+│  ◻ group2
+│  └ ◻ group2value0
+└
+",
+  "",
+  "",
+  "",
+  "◇  foo
+│  group1value0",
+  "
+",
+  "[?25h",
+]
+`;
+
 exports[`prompts (isCI = true) > groupMultiselect > initial values can be set 1`] = `
 [
   "[?25l",

packages/prompts/src/index.test.ts

@@ -1204,5 +1204,49 @@ describe.each(['true', 'false'])('prompts (isCI = %s)', (isCI) => {
 			expect(value).toEqual([value0]);
 			expect(output.buffer).toMatchSnapshot();
 		});
+
+		describe('groupSpacing', () => {
+			test('renders spaced groups', async () => {
+				const result = prompts.groupMultiselect({
+					message: 'foo',
+					input,
+					output,
+					options: {
+						group1: [{ value: 'group1value0' }],
+						group2: [{ value: 'group2value0' }],
+					},
+					groupSpacing: 2,
+				});
+
+				input.emit('keypress', '', { name: 'down' });
+				input.emit('keypress', '', { name: 'space' });
+				input.emit('keypress', '', { name: 'return' });
+
+				await result;
+
+				expect(output.buffer).toMatchSnapshot();
+			});
+
+			test('negative spacing is ignored', async () => {
+				const result = prompts.groupMultiselect({
+					message: 'foo',
+					input,
+					output,
+					options: {
+						group1: [{ value: 'group1value0' }],
+						group2: [{ value: 'group2value0' }],
+					},
+					groupSpacing: -2,
+				});
+
+				input.emit('keypress', '', { name: 'down' });
+				input.emit('keypress', '', { name: 'space' });
+				input.emit('keypress', '', { name: 'return' });
+
+				await result;
+
+				expect(output.buffer).toMatchSnapshot();
+			});
+		});
 	});
 });

packages/prompts/src/index.ts

@@ -489,9 +489,10 @@ export interface GroupMultiSelectOptions<Value> extends CommonOptions {
 	required?: boolean;
 	cursorAt?: Value;
 	selectableGroups?: boolean;
+	groupSpacing?: number;
 }
 export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) => {
-	const { selectableGroups = true } = opts;
+	const { selectableGroups = true, groupSpacing = 0 } = opts;
 	const opt = (
 		option: Option<Value>,
 		state:
@@ -510,37 +511,39 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 		const next = isItem && (options[options.indexOf(option) + 1] ?? { group: true });
 		const isLast = isItem && (next as any).group === true;
 		const prefix = isItem ? (selectableGroups ? `${isLast ? S_BAR_END : S_BAR} ` : '  ') : '';
+		const spacingPrefix =
+			groupSpacing > 0 && !isItem ? `\n${color.cyan(S_BAR)}  `.repeat(groupSpacing) : '';
 
 		if (state === 'active') {
-			return `${color.dim(prefix)}${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
+			return `${spacingPrefix}${color.dim(prefix)}${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
 				option.hint ? color.dim(`(${option.hint})`) : ''
 			}`;
 		}
 		if (state === 'group-active') {
-			return `${prefix}${color.cyan(S_CHECKBOX_ACTIVE)} ${color.dim(label)}`;
+			return `${spacingPrefix}${prefix}${color.cyan(S_CHECKBOX_ACTIVE)} ${color.dim(label)}`;
 		}
 		if (state === 'group-active-selected') {
-			return `${prefix}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
+			return `${spacingPrefix}${prefix}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
 		}
 		if (state === 'selected') {
 			const selectedCheckbox = isItem || selectableGroups ? color.green(S_CHECKBOX_SELECTED) : '';
-			return `${color.dim(prefix)}${selectedCheckbox} ${color.dim(label)} ${
+			return `${spacingPrefix}${color.dim(prefix)}${selectedCheckbox} ${color.dim(label)} ${
 				option.hint ? color.dim(`(${option.hint})`) : ''
 			}`;
 		}
 		if (state === 'cancelled') {
 			return `${color.strikethrough(color.dim(label))}`;
 		}
 		if (state === 'active-selected') {
-			return `${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${label} ${
+			return `${spacingPrefix}${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${label} ${
 				option.hint ? color.dim(`(${option.hint})`) : ''
 			}`;
 		}
 		if (state === 'submitted') {
 			return `${color.dim(label)}`;
 		}
 		const unselectedCheckbox = isItem || selectableGroups ? color.dim(S_CHECKBOX_INACTIVE) : '';
-		return `${color.dim(prefix)}${unselectedCheckbox} ${color.dim(label)}`;
+		return `${spacingPrefix}${color.dim(prefix)}${unselectedCheckbox} ${color.dim(label)}`;
 	};
 
 	return new GroupMultiSelectPrompt({