feat: add selectableGroups option to group multi-select (#255)

Co-authored-by: Nate Moore <[email protected]>

Author: 43081j

.changeset/free-wasps-decide.md

@@ -0,0 +1,6 @@
+---
+"@clack/prompts": patch
+"@clack/core": patch
+---
+
+Adds a new `selectableGroups` boolean to the group multi-select prompt. Using `selectableGroups: false` will disable the ability to select a top-level group, but still allow every child to be selected individually.

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

@@ -6,10 +6,12 @@ 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 = 0;
+	#selectableGroups: boolean;
 
 	getGroupItems(group: string): T[] {
 		return this.options.filter((o) => o.group === group);
@@ -44,26 +46,37 @@ export default class GroupMultiSelectPrompt<T extends { value: any }> extends Pr
 	constructor(opts: GroupMultiSelectOptions<T>) {
 		super(opts, false);
 		const { options } = opts;
+		this.#selectableGroups = opts.selectableGroups !== false;
 		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':
+				case 'up': {
 					this.cursor = this.cursor === 0 ? this.options.length - 1 : this.cursor - 1;
+					const currentIsGroup = this.options[this.cursor]?.group === true;
+					if (!this.#selectableGroups && currentIsGroup) {
+						this.cursor = this.cursor === 0 ? this.options.length - 1 : this.cursor - 1;
+					}
 					break;
+				}
 				case 'down':
-				case 'right':
+				case 'right': {
 					this.cursor = this.cursor === this.options.length - 1 ? 0 : this.cursor + 1;
+					const currentIsGroup = this.options[this.cursor]?.group === true;
+					if (!this.#selectableGroups && currentIsGroup) {
+						this.cursor = this.cursor === this.options.length - 1 ? 0 : this.cursor + 1;
+					}
 					break;
+				}
 				case 'space':
 					this.toggleValue();
 					break;

packages/prompts/src/index.ts

@@ -462,8 +462,10 @@ export interface GroupMultiSelectOptions<Value> {
 	initialValues?: Value[];
 	required?: boolean;
 	cursorAt?: Value;
+	selectableGroups?: boolean;
 }
 export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) => {
+	const { selectableGroups = true } = opts;
 	const opt = (
 		option: Option<Value>,
 		state:
@@ -481,7 +483,7 @@ 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} ` : '  ') : '';
 
 		if (state === 'active') {
 			return `${color.dim(prefix)}${color.cyan(S_CHECKBOX_ACTIVE)} ${label} ${
@@ -495,7 +497,8 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 			return `${prefix}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
 		}
 		if (state === 'selected') {
-			return `${color.dim(prefix)}${color.green(S_CHECKBOX_SELECTED)} ${color.dim(label)}`;
+			const selectedCheckbox = isItem || selectableGroups ? color.green(S_CHECKBOX_SELECTED) : '';
+			return `${color.dim(prefix)}${selectedCheckbox} ${color.dim(label)}`;
 		}
 		if (state === 'cancelled') {
 			return `${color.strikethrough(color.dim(label))}`;
@@ -508,14 +511,16 @@ export const groupMultiselect = <Value>(opts: GroupMultiSelectOptions<Value>) =>
 		if (state === 'submitted') {
 			return `${color.dim(label)}`;
 		}
-		return `${color.dim(prefix)}${color.dim(S_CHECKBOX_INACTIVE)} ${color.dim(label)}`;
+		const unselectedCheckbox = isItem || selectableGroups ? color.dim(S_CHECKBOX_INACTIVE) : '';
+		return `${color.dim(prefix)}${unselectedCheckbox} ${color.dim(label)}`;
 	};
 
 	return new GroupMultiSelectPrompt({
 		options: opts.options,
 		initialValues: opts.initialValues,
 		required: opts.required ?? true,
 		cursorAt: opts.cursorAt,
+		selectableGroups,
 		validate(selected: Value[]) {
 			if (this.required && selected.length === 0)
 				return `Please select at least one option.\n${color.reset(