feat: Inactive group headers for GroupMultiSelectPrompt

.changeset/early-deers-cough.md

@@ -0,0 +1,6 @@
+---
+'@clack/prompts': minor
+'@clack/core': minor
+---
+
+feat: added `selectableGroups` option for inactive group headers for `GroupMultiSelectPrompt`

packages/core/src/prompts/group-multiselect.ts

@@ -6,18 +6,20 @@ interface GroupMultiSelectOptions<T extends { value: any }>
 	initialValues?: T['value'][];
 	required?: boolean;
 	cursorAt?: T['value'];
+	selectableGroups?: boolean;
 }
 export default class GroupMultiSelectPrompt<T extends { value: any }> extends Prompt {
 	options: (T & { group: string | boolean })[];
 	cursor: number = 0;
+	#selectableGroups: boolean;
 
 	getGroupItems(group: string): T[] {
 		return this.options.filter((o) => o.group === group);
 	}
 
 	isGroupSelected(group: string) {
 		const items = this.getGroupItems(group);
-		return items.every((i) => this.value.includes(i.value));
+		return this.#selectableGroups && items.every((i) => this.value.includes(i.value));
 	}
 
 	private toggleValue() {
@@ -44,25 +46,32 @@ export default class GroupMultiSelectPrompt<T extends { value: any }> extends Pr
 	constructor(opts: GroupMultiSelectOptions<T>) {
 		super(opts, false);
 		const { options } = opts;
+		this.#selectableGroups = opts.selectableGroups ?? true;
 		this.options = Object.entries(options).flatMap(([key, option]) => [
 			{ value: key, group: true, label: key },
 			...option.map((opt) => ({ ...opt, group: key })),
 		]) as any;
 		this.value = [...(opts.initialValues ?? [])];
 		this.cursor = Math.max(
 			this.options.findIndex(({ value }) => value === opts.cursorAt),
-			0
+			this.#selectableGroups ? 0 : 1
 		);
 
 		this.on('cursor', (key) => {
 			switch (key) {
 				case 'left':
 				case 'up':
 					this.cursor = this.cursor === 0 ? this.options.length - 1 : this.cursor - 1;
+					if (!this.#selectableGroups && this.options[this.cursor].group === true) {
+						this.cursor = this.cursor === 0 ? this.options.length - 1 : this.cursor - 1;
+					}
 					break;
 				case 'down':
 				case 'right':
 					this.cursor = this.cursor === this.options.length - 1 ? 0 : this.cursor + 1;
+					if (!this.#selectableGroups && this.options[this.cursor].group === true) {
+						this.cursor = this.cursor === this.options.length - 1 ? 0 : this.cursor + 1;
+					}
 					break;
 				case 'space':
 					this.toggleValue();

packages/prompts/src/index.ts

@@ -428,8 +428,11 @@ export interface GroupMultiSelectOptions<Value> {
 	initialValues?: Value[];
 	required?: boolean;
 	cursorAt?: Value;
+	selectableGroups?: boolean;
+	spacedGroups?: boolean;
 }
 export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) => {
+	const { selectableGroups = false, spacedGroups = false } = opts;
 	const opt = (
 		option: Option<Value>,
 		state:
@@ -447,35 +450,41 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 		const isItem = typeof (option as any).group === 'string';
 		const next = isItem && (options[options.indexOf(option) + 1] ?? { group: true });
 		const isLast = isItem && (next as any).group === true;
-		const prefix = isItem ? `${isLast ? S_BAR_END : S_BAR} ` : '';
+		const prefix = isItem ? (selectableGroups ? `${isLast ? S_BAR_END : S_BAR} ` : ' ') : '';
+		const spacingPrefix = spacedGroups && !isItem ? `\n${color.cyan(S_BAR)}  ` : '';
 
 		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})`) : ''
 			}`;
 		} else 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)}`;
 		} else 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)}`;
 		} else if (state === 'selected') {
-			return `${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
+			return `${spacingPrefix}${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(
+				label
+			)}`;
 		} else if (state === 'cancelled') {
-			return `${color.strikethrough(color.dim(label))}`;
+			return `${spacingPrefix}${color.strikethrough(color.dim(label))}`;
 		} else 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})`) : ''
 			}`;
 		} else if (state === 'submitted') {
 			return `${color.dim(label)}`;
 		}
-		return `${color.dim(prefix)}${color.dim(S_CHECKBOX_INACTIVE)} ${color.dim(label)}`;
+		return `${spacingPrefix}${color.dim(prefix)}${
+			isItem || selectableGroups ? `${color.dim(S_CHECKBOX_INACTIVE)} ` : ''
+		}${color.dim(label)}`;
 	};
 
 	return new GroupMultiSelectPrompt({
 		options: opts.options,
 		initialValues: opts.initialValues,
 		required: opts.required ?? true,
 		cursorAt: opts.cursorAt,
+		selectableGroups: selectableGroups,
 		validate(selected: Value[]) {
 			if (this.required && selected.length === 0)
 				return `Please select at least one option.\n${color.reset(