feat: implement filter list

examples/test/index.ts

@@ -0,0 +1,12 @@
+import * as p from '@clack/prompts';
+
+async function main() {
+	console.clear();
+	p.select({
+		options: [{ value: 'basic', label: 'Basic' }],
+		message: 'Select an example to run.',
+		enableFilter: true,
+	});
+}
+
+main().catch(console.error);

examples/test/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "@example/test",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"dependencies": {
+		"@clack/core": "workspace:*",
+		"@clack/prompts": "workspace:*",
+		"picocolors": "^1.0.0"
+	},
+	"scripts": {
+		"start": "jiti ./index.ts"
+	},
+	"devDependencies": {
+		"jiti": "^1.17.0"
+	}
+}

examples/test/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

packages/core/package.json

@@ -57,6 +57,7 @@
     "sisteransi": "^1.0.5"
   },
   "devDependencies": {
-    "wrap-ansi": "^8.1.0"
+    "wrap-ansi": "^8.1.0",
+	"fzf": "^0.5.2"
   }
 }

packages/core/src/prompts/prompt.ts

@@ -6,6 +6,7 @@ import { Readable, Writable } from 'node:stream';
 import { WriteStream } from 'node:tty';
 import { cursor, erase } from 'sisteransi';
 import wrap from 'wrap-ansi';
+import { Fzf } from 'fzf';
 
 function diffLines(a: string, b: string) {
 	if (a === b) return;
@@ -46,6 +47,7 @@ export interface PromptOptions<Self extends Prompt> {
 	input?: Readable;
 	output?: Writable;
 	debug?: boolean;
+	enableFilter?: boolean;
 }
 
 export type State = 'initial' | 'active' | 'cancel' | 'submit' | 'error';
@@ -58,6 +60,7 @@ export default class Prompt {
 	private _track: boolean = false;
 	private _render: (context: Omit<Prompt, 'prompt'>) => string | void;
 	protected _cursor: number = 0;
+	private _filterKey = '';
 
 	public state: State = 'initial';
 	public value: any;
@@ -136,7 +139,7 @@ export default class Prompt {
 		arr.push({ cb, once: true });
 		this.subscribers.set(event, arr);
 	}
-	public emit(event: string, ...data: any[]) {
+	public emit<T extends any>(event: string, ...data: T[]) {
 		const cbs = this.subscribers.get(event) ?? [];
 		const cleanup: (() => void)[] = [];
 		for (const subscriber of cbs) {
@@ -157,7 +160,12 @@ export default class Prompt {
 		if (this.state === 'error') {
 			this.state = 'active';
 		}
-		if (key?.name && !this._track && aliases.has(key.name)) {
+		if (
+			key?.name &&
+			!this._track &&
+			/* disable moving aliases when enable filter */
+			(this.opts.enableFilter ? false : aliases.has(key.name))
+		) {
 			this.emit('cursor', aliases.get(key.name));
 		}
 		if (key?.name && keys.has(key.name)) {
@@ -252,4 +260,24 @@ export default class Prompt {
 		}
 		this._prevFrame = frame;
 	}
+
+	protected registerFilterer(list: string[]) {
+		if (this.opts.enableFilter) {
+			const fzf = new Fzf(list);
+			this.on('key', (key) => {
+				if (key === /* backspace */ '\x7F') {
+					if (this._filterKey.length) this._filterKey = this._filterKey.slice(0, -1);
+					if (!this._filterKey.length) this.emit('filterClear');
+				} else if (key.length === 1 && key !== ' ') {
+					this._filterKey += key;
+				}
+				const filtered = fzf.find(this._filterKey);
+				this.emit('filter', filtered);
+			});
+		}
+	}
+
+	getFilterKey() {
+		return this._filterKey;
+	}
 }

packages/core/src/prompts/select.ts

@@ -1,10 +1,13 @@
 import Prompt, { PromptOptions } from './prompt';
+import { type FzfResultItem } from 'fzf';
 
 interface SelectOptions<T extends { value: any }> extends PromptOptions<SelectPrompt<T>> {
 	options: T[];
 	initialValue?: T['value'];
+	enableFilter?: boolean;
 }
 export default class SelectPrompt<T extends { value: any }> extends Prompt {
+	originalOptions: T[] = [];
 	options: T[];
 	cursor: number = 0;
 
@@ -19,7 +22,7 @@ export default class SelectPrompt<T extends { value: any }> extends Prompt {
 	constructor(opts: SelectOptions<T>) {
 		super(opts, false);
 
-		this.options = opts.options;
+		this.originalOptions = this.options = opts.options;
 		this.cursor = this.options.findIndex(({ value }) => value === opts.initialValue);
 		if (this.cursor === -1) this.cursor = 0;
 		this.changeValue();
@@ -37,5 +40,22 @@ export default class SelectPrompt<T extends { value: any }> extends Prompt {
 			}
 			this.changeValue();
 		});
+
+		// For filter
+		this.registerFilterer(this.options.map(({ value }) => value));
+		this.on('filter', (filtered: FzfResultItem[]) => {
+			this.cursor = 0;
+			if (filtered.length) {
+				this.options = filtered.map(
+					({ item }) => this.originalOptions.find(({ value }) => value === item)!
+				);
+			} else {
+				this.options = [];
+			}
+		});
+		this.on('filterClear', () => {
+			this.cursor = 0;
+			this.options = this.originalOptions;
+		});
 	}
 }

packages/prompts/src/index.ts

@@ -178,6 +178,7 @@ export interface SelectOptions<Options extends Option<Value>[], Value> {
 	message: string;
 	options: Options;
 	initialValue?: Value;
+	enableFilter?: boolean;
 }
 
 export const select = <Options extends Option<Value>[], Value>(
@@ -200,9 +201,15 @@ export const select = <Options extends Option<Value>[], Value>(
 	return new SelectPrompt({
 		options: opts.options,
 		initialValue: opts.initialValue,
+		enableFilter: opts.enableFilter,
 		render() {
 			const title = `${color.gray(S_BAR)}\n${symbol(this.state)}  ${opts.message}\n`;
 
+			const filterKey = this.getFilterKey().length
+				? this.getFilterKey()
+				: color.gray('Type to filter...');
+			const filterer = opts.enableFilter ? `  > ${filterKey}\n${color.cyan(S_BAR)}  ` : '';
+
 			switch (this.state) {
 				case 'submit':
 					return `${title}${color.gray(S_BAR)}  ${opt(this.options[this.cursor], 'selected')}`;
@@ -212,7 +219,7 @@ export const select = <Options extends Option<Value>[], Value>(
 						'cancelled'
 					)}\n${color.gray(S_BAR)}`;
 				default: {
-					return `${title}${color.cyan(S_BAR)}  ${this.options
+					return `${title}${color.cyan(S_BAR)}${filterer}${this.options
 						.map((option, i) => opt(option, i === this.cursor ? 'active' : 'inactive'))
 						.join(`\n${color.cyan(S_BAR)}  `)}\n${color.cyan(S_BAR_END)}\n`;
 				}