@topcli/prompts 1.8.0 → 1.9.0

package/README.md

@@ -86,6 +86,10 @@ select(message: string, options: SelectOptions): Promise<string>
 Scrollable select depending `maxVisible` (default `8`).
 Use `ignoreValues` to skip result render & clear lines after a selected one.
 
+Use `autocomplete` to allow filtered choices. This can be useful for a large list of choices.
+
+Use `caseSensitive` to make autocomplete filters case sensitive. Default `false`
+
 ### `multiselect()`
 
 ```ts
@@ -97,6 +101,8 @@ Use `preSelectedChoices` to pre-select choices.
 
 Use `validators` to handle user input.
 
+Use `showHint: false` to disable hint (this option is truthy by default).
+
 **Example**
 
 ```js
@@ -106,7 +112,7 @@ const os = await multiselect('Choose OS', {
 });
 ```
 
-Use `autocomplete` to allow filtered choices. This can be usefull for a large list of choices.
+Use `autocomplete` to allow filtered choices. This can be useful for a large list of choices.
 
 Use `caseSensitive` to make autocomplete filters case sensitive. Default `false`
 
@@ -172,6 +178,8 @@ export interface SelectOptions extends SharedOptions  {
   choices: (Choice | string)[];
   maxVisible?: number;
   ignoreValues?: (string | number | boolean)[];
+  autocomplete?: boolean;
+  caseSensitive?: boolean;
 }
 
 export interface MultiselectOptions extends SharedOptions  {
@@ -181,6 +189,7 @@ export interface MultiselectOptions extends SharedOptions  {
   validators?: Validator[];
   autocomplete?: boolean;
   caseSensitive?: boolean;
+  showHint?: boolean;
 }
 
 export interface ConfirmOptions extends SharedOptions  {
@@ -201,6 +210,8 @@ export interface ConfirmOptions extends SharedOptions  {
       <td align="center" valign="top" width="14.28%"><a href="http://tonygo.dev"><img src="https://avatars0.githubusercontent.com/u/22824417?v=4?s=100" width="100px;" alt="Tony Gorez"/><br /><sub><b>Tony Gorez</b></sub></a><br /><a href="https://github.com/TopCli/prompts/pulls?q=is%3Apr+reviewed-by%3Atony-go" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://sofiand.github.io/portfolio-client/"><img src="https://avatars.githubusercontent.com/u/39944043?v=4?s=100" width="100px;" alt="Yefis"/><br /><sub><b>Yefis</b></sub></a><br /><a href="https://github.com/TopCli/prompts/commits?author=SofianD" title="Code">💻</a> <a href="https://github.com/TopCli/prompts/commits?author=SofianD" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://justie.dev"><img src="https://avatars.githubusercontent.com/u/7118300?v=4?s=100" width="100px;" alt="Ben"/><br /><sub><b>Ben</b></sub></a><br /><a href="https://github.com/TopCli/prompts/commits?author=JUSTIVE" title="Documentation">📖</a> <a href="#maintenance-JUSTIVE" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ncukondo"><img src="https://avatars.githubusercontent.com/u/17022138?v=4?s=100" width="100px;" alt="Takeshi Kondo"/><br /><sub><b>Takeshi Kondo</b></sub></a><br /><a href="#maintenance-ncukondo" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/FredGuiou"><img src="https://avatars.githubusercontent.com/u/99122562?v=4?s=100" width="100px;" alt="FredGuiou"/><br /><sub><b>FredGuiou</b></sub></a><br /><a href="https://github.com/TopCli/prompts/commits?author=FredGuiou" title="Code">💻</a> <a href="https://github.com/TopCli/prompts/commits?author=FredGuiou" title="Tests">⚠️</a> <a href="https://github.com/TopCli/prompts/commits?author=FredGuiou" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>

package/dist/index.cjs

@@ -314,6 +314,7 @@ var kToggleKeys = /* @__PURE__ */ new Set([
 var ConfirmPrompt = class extends AbstractPrompt {
   initial;
   selectedValue;
+  fastAnswer;
   #boundKeyPressEvent;
   #boundExitEvent;
   constructor(message, options = {}) {
@@ -357,7 +358,18 @@ var ConfirmPrompt = class extends AbstractPrompt {
     if (kToggleKeys.has(key.name ?? "")) {
       this.selectedValue = !this.selectedValue;
     }
-    this.#render();
+    if (key.name === "y") {
+      this.selectedValue = true;
+      resolve(true);
+      this.fastAnswer = true;
+    } else if (key.name === "n") {
+      this.selectedValue = false;
+      resolve(false);
+      this.fastAnswer = true;
+    }
+    if (!this.fastAnswer) {
+      this.#render();
+    }
   }
   #onProcessExit() {
     this.stdin.off("keypress", this.#boundKeyPressEvent);
@@ -367,9 +379,10 @@ var ConfirmPrompt = class extends AbstractPrompt {
     return `${query} ${this.#getHint()}`;
   }
   #onQuestionAnswer() {
+    this.clearLastLine();
     this.stdout.moveCursor(
       -this.stdout.columns,
-      -(Math.floor((0, import_wcwidth2.default)(stripAnsi(this.#getQuestionQuery())) / this.stdout.columns) || 1)
+      -Math.floor((0, import_wcwidth2.default)(stripAnsi(this.#getQuestionQuery())) / this.stdout.columns)
     );
     this.stdout.clearScreenDown();
     this.write(`${this.selectedValue ? SYMBOLS.Tick : SYMBOLS.Cross} ${import_kleur3.default.bold(this.message)}${import_node_os3.EOL}`);
@@ -400,18 +413,47 @@ var ConfirmPrompt = class extends AbstractPrompt {
 var import_node_os4 = require("os");
 var import_kleur4 = __toESM(require("kleur"), 1);
 var import_wcwidth3 = __toESM(require("@topcli/wcwidth"), 1);
+var kRequiredChoiceProperties = ["label", "value"];
 var SelectPrompt = class extends AbstractPrompt {
   #boundExitEvent = () => void 0;
   #boundKeyPressEvent = () => void 0;
   activeIndex = 0;
-  selectedIndexes = [];
   questionMessage;
-  longestChoicelength;
+  autocompleteValue = "";
   options;
   lastRender;
   get choices() {
     return this.options.choices;
   }
+  get filteredChoices() {
+    if (!(this.options.autocomplete && this.autocompleteValue.length > 0)) {
+      return this.choices;
+    }
+    const isCaseSensitive = this.options.caseSensitive;
+    const autocompleteValue = isCaseSensitive ? this.autocompleteValue : this.autocompleteValue.toLowerCase();
+    return this.choices.filter((choice) => this.#filterChoice(choice, autocompleteValue, isCaseSensitive));
+  }
+  #filterChoice(choice, autocompleteValue, isCaseSensitive = false) {
+    const choiceValue = typeof choice === "string" ? isCaseSensitive ? choice : choice.toLowerCase() : isCaseSensitive ? choice.label : choice.label.toLowerCase();
+    if (autocompleteValue.includes(" ")) {
+      return this.#filterMultipleWords(choiceValue, autocompleteValue, isCaseSensitive);
+    }
+    return choiceValue.includes(autocompleteValue);
+  }
+  #filterMultipleWords(choiceValue, autocompleteValue, isCaseSensitive) {
+    return autocompleteValue.split(" ").every((word) => {
+      const wordValue = isCaseSensitive ? word : word.toLowerCase();
+      return choiceValue.includes(wordValue) || choiceValue.includes(autocompleteValue);
+    });
+  }
+  get longestChoice() {
+    return Math.max(...this.filteredChoices.map((choice) => {
+      if (typeof choice === "string") {
+        return choice.length;
+      }
+      return choice.label.length;
+    }));
+  }
   constructor(message, options) {
     const {
       stdin = process.stdin,
@@ -428,22 +470,20 @@ var SelectPrompt = class extends AbstractPrompt {
       this.destroy();
       throw new TypeError("Missing required param: choices");
     }
-    this.longestChoicelength = Math.max(...choices.map((choice) => {
+    for (const choice of choices) {
       if (typeof choice === "string") {
-        return choice.length;
+        continue;
       }
-      const kRequiredChoiceProperties2 = ["label", "value"];
-      for (const prop of kRequiredChoiceProperties2) {
+      for (const prop of kRequiredChoiceProperties) {
         if (!choice[prop]) {
           this.destroy();
           throw new TypeError(`Missing ${prop} for choice ${JSON.stringify(choice)}`);
         }
       }
-      return choice.label.length;
-    }));
+    }
   }
   #getFormattedChoice(choiceIndex) {
-    const choice = this.choices[choiceIndex];
+    const choice = this.filteredChoices[choiceIndex];
     if (typeof choice === "string") {
       return { value: choice, label: choice };
     }
@@ -451,21 +491,24 @@ var SelectPrompt = class extends AbstractPrompt {
   }
   #getVisibleChoices() {
     const maxVisible = this.options.maxVisible || 8;
-    let startIndex = Math.min(this.choices.length - maxVisible, this.activeIndex - Math.floor(maxVisible / 2));
+    let startIndex = Math.min(this.filteredChoices.length - maxVisible, this.activeIndex - Math.floor(maxVisible / 2));
     if (startIndex < 0) {
       startIndex = 0;
     }
-    const endIndex = Math.min(startIndex + maxVisible, this.choices.length);
+    const endIndex = Math.min(startIndex + maxVisible, this.filteredChoices.length);
     return { startIndex, endIndex };
   }
   #showChoices() {
     const { startIndex, endIndex } = this.#getVisibleChoices();
     this.lastRender = { startIndex, endIndex };
+    if (this.options.autocomplete) {
+      this.write(`${SYMBOLS.Pointer} ${this.autocompleteValue}${import_node_os4.EOL}`);
+    }
     for (let choiceIndex = startIndex; choiceIndex < endIndex; choiceIndex++) {
       const choice = this.#getFormattedChoice(choiceIndex);
       const isChoiceSelected = choiceIndex === this.activeIndex;
       const showPreviousChoicesArrow = startIndex > 0 && choiceIndex === startIndex;
-      const showNextChoicesArrow = endIndex < this.choices.length && choiceIndex === endIndex - 1;
+      const showNextChoicesArrow = endIndex < this.filteredChoices.length && choiceIndex === endIndex - 1;
       let prefixArrow = " ";
       if (showPreviousChoicesArrow) {
         prefixArrow = SYMBOLS.Previous;
@@ -474,16 +517,17 @@ var SelectPrompt = class extends AbstractPrompt {
       }
       const prefix = `${prefixArrow}${isChoiceSelected ? `${SYMBOLS.Pointer} ` : "  "}`;
       const formattedLabel = choice.label.padEnd(
-        this.longestChoicelength < 10 ? this.longestChoicelength : 0
+        this.longestChoice < 10 ? this.longestChoice : 0
       );
       const formattedDescription = choice.description ? ` - ${choice.description}` : "";
       const color = isChoiceSelected ? import_kleur4.default.white().bold : import_kleur4.default.gray;
-      const str = color(`${prefix}${formattedLabel}${formattedDescription}${import_node_os4.EOL}`);
+      const str = `${prefix}${color(`${formattedLabel}${formattedDescription}`)}${import_node_os4.EOL}`;
       this.write(str);
     }
   }
   #showAnsweredQuestion(choice) {
-    const prefix = `${SYMBOLS.Tick} ${import_kleur4.default.bold(this.message)} ${SYMBOLS.Pointer}`;
+    const symbolPrefix = choice === "" ? SYMBOLS.Cross : SYMBOLS.Tick;
+    const prefix = `${symbolPrefix} ${import_kleur4.default.bold(this.message)} ${SYMBOLS.Pointer}`;
     const formattedChoice = import_kleur4.default.yellow(typeof choice === "string" ? choice : choice.label);
     this.write(`${prefix} ${formattedChoice}${import_node_os4.EOL}`);
   }
@@ -496,17 +540,18 @@ var SelectPrompt = class extends AbstractPrompt {
   #onKeypress(...args) {
     const [resolve, render, , key] = args;
     if (key.name === "up") {
-      this.activeIndex = this.activeIndex === 0 ? this.choices.length - 1 : this.activeIndex - 1;
+      this.activeIndex = this.activeIndex === 0 ? this.filteredChoices.length - 1 : this.activeIndex - 1;
       render();
     } else if (key.name === "down") {
-      this.activeIndex = this.activeIndex === this.choices.length - 1 ? 0 : this.activeIndex + 1;
+      this.activeIndex = this.activeIndex === this.filteredChoices.length - 1 ? 0 : this.activeIndex + 1;
       render();
     } else if (key.name === "return") {
+      const choice = this.filteredChoices[this.activeIndex] || "";
+      const label = typeof choice === "string" ? choice : choice.label;
+      const value = typeof choice === "string" ? choice : choice.value;
       render({ clearRender: true });
-      const currentChoice = this.choices[this.activeIndex];
-      const value = typeof currentChoice === "string" ? currentChoice : currentChoice.value;
       if (!this.options.ignoreValues?.includes(value)) {
-        this.#showAnsweredQuestion(currentChoice);
+        this.#showAnsweredQuestion(label);
       }
       this.write(SYMBOLS.ShowCursor);
       this.destroy();
@@ -514,16 +559,23 @@ var SelectPrompt = class extends AbstractPrompt {
       process.off("exit", this.#boundExitEvent);
       resolve(value);
     } else {
+      if (!key.ctrl && this.options.autocomplete) {
+        this.activeIndex = 0;
+        if (key.name === "backspace" && this.autocompleteValue.length > 0) {
+          this.autocompleteValue = this.autocompleteValue.slice(0, -1);
+        } else if (key.name !== "backspace") {
+          this.autocompleteValue += key.sequence;
+        }
+      }
       render();
     }
   }
   async select() {
     const answer = this.agent.nextAnswers.shift();
     if (answer !== void 0) {
-      const formatedAnser = Array.isArray(answer) ? answer.join(", ") : answer;
-      this.#showAnsweredQuestion(formatedAnser);
+      this.#showAnsweredQuestion(answer);
       this.destroy();
-      return Array.isArray(answer) ? answer : [answer];
+      return answer;
     }
     this.write(SYMBOLS.HideCursor);
     this.#showQuestion();
@@ -538,6 +590,15 @@ var SelectPrompt = class extends AbstractPrompt {
           this.clearLastLine();
           linesToClear--;
         }
+        if (this.options.autocomplete) {
+          let linesToClear2 = Math.ceil(
+            (0, import_wcwidth3.default)(`${SYMBOLS.Pointer} ${this.autocompleteValue}`) / this.stdout.columns
+          );
+          while (linesToClear2 > 0) {
+            this.clearLastLine();
+            linesToClear2--;
+          }
+        }
       }
       if (clearRender) {
         const questionLineCount = Math.ceil(
@@ -567,11 +628,12 @@ var SelectPrompt = class extends AbstractPrompt {
 var import_node_os5 = require("os");
 var import_kleur5 = __toESM(require("kleur"), 1);
 var import_wcwidth4 = __toESM(require("@topcli/wcwidth"), 1);
-var kRequiredChoiceProperties = ["label", "value"];
+var kRequiredChoiceProperties2 = ["label", "value"];
 var MultiselectPrompt = class extends AbstractPrompt {
   #boundExitEvent = () => void 0;
   #boundKeyPressEvent = () => void 0;
   #validators;
+  #showHint;
   activeIndex = 0;
   selectedIndexes = [];
   questionMessage;
@@ -616,7 +678,8 @@ var MultiselectPrompt = class extends AbstractPrompt {
       stdout = process.stdout,
       choices,
       preSelectedChoices,
-      validators = []
+      validators = [],
+      showHint = true
     } = options ?? {};
     super(message, stdin, stdout);
     if (!options) {
@@ -629,11 +692,12 @@ var MultiselectPrompt = class extends AbstractPrompt {
       throw new TypeError("Missing required param: choices");
     }
     this.#validators = validators;
+    this.#showHint = showHint;
     for (const choice of choices) {
       if (typeof choice === "string") {
         continue;
       }
-      for (const prop of kRequiredChoiceProperties) {
+      for (const prop of kRequiredChoiceProperties2) {
         if (!choice[prop]) {
           this.destroy();
           throw new TypeError(`Missing ${prop} for choice ${JSON.stringify(choice)}`);
@@ -823,14 +887,14 @@ var MultiselectPrompt = class extends AbstractPrompt {
     });
   }
   #showQuestion(error = null) {
-    let hint = import_kleur5.default.gray(
+    let hint = this.#showHint ? import_kleur5.default.gray(
       // eslint-disable-next-line max-len
-      `(Press ${import_kleur5.default.bold("<Ctrl+A>")} to toggle all, ${import_kleur5.default.bold("<Ctrl+Space>")} to select, ${import_kleur5.default.bold("<Left/Right>")} to toggle, ${import_kleur5.default.bold("<Return>")} to submit)`
-    );
+      `(Press ${import_kleur5.default.bold("<Ctrl+A>")} to toggle all, ${import_kleur5.default.bold("<Left/Right>")} to toggle, ${import_kleur5.default.bold("<Return>")} to submit)`
+    ) : "";
     if (error) {
-      hint += ` ${import_kleur5.default.red().bold(`[${error}]`)}`;
+      hint += `${hint.length > 0 ? " " : ""}${import_kleur5.default.red().bold(`[${error}]`)}`;
     }
-    this.questionMessage = `${SYMBOLS.QuestionMark} ${import_kleur5.default.bold(this.message)} ${hint}`;
+    this.questionMessage = `${SYMBOLS.QuestionMark} ${import_kleur5.default.bold(this.message)}${hint.length > 0 ? ` ${hint}` : ""}`;
     this.write(`${this.questionMessage}${import_node_os5.EOL}`);
   }
 };

package/dist/index.d.cts

@@ -61,16 +61,19 @@ interface MultiselectOptions extends SharedOptions {
     validators?: PromptValidator[];
     autocomplete?: boolean;
     caseSensitive?: boolean;
+    showHint?: boolean;
 }
 
 interface SelectOptions extends SharedOptions {
     choices: (Choice | string)[];
     maxVisible?: number;
     ignoreValues?: (string | number | boolean)[];
+    autocomplete?: boolean;
+    caseSensitive?: boolean;
 }
 
-declare function question(message: any, options?: {}): Promise<string>;
-declare function select(message: string, options: SelectOptions): Promise<string[]>;
+declare function question(message: string, options?: QuestionOptions): Promise<string>;
+declare function select(message: string, options: SelectOptions): Promise<string>;
 declare function confirm(message: string, options: ConfirmOptions): Promise<boolean>;
 declare function multiselect(message: string, options: MultiselectOptions): Promise<string[]>;
 

package/dist/index.d.ts

@@ -61,16 +61,19 @@ interface MultiselectOptions extends SharedOptions {
     validators?: PromptValidator[];
     autocomplete?: boolean;
     caseSensitive?: boolean;
+    showHint?: boolean;
 }
 
 interface SelectOptions extends SharedOptions {
     choices: (Choice | string)[];
     maxVisible?: number;
     ignoreValues?: (string | number | boolean)[];
+    autocomplete?: boolean;
+    caseSensitive?: boolean;
 }
 
-declare function question(message: any, options?: {}): Promise<string>;
-declare function select(message: string, options: SelectOptions): Promise<string[]>;
+declare function question(message: string, options?: QuestionOptions): Promise<string>;
+declare function select(message: string, options: SelectOptions): Promise<string>;
 declare function confirm(message: string, options: ConfirmOptions): Promise<boolean>;
 declare function multiselect(message: string, options: MultiselectOptions): Promise<string[]>;
 

package/dist/index.js

@@ -274,6 +274,7 @@ var kToggleKeys = /* @__PURE__ */ new Set([
 var ConfirmPrompt = class extends AbstractPrompt {
   initial;
   selectedValue;
+  fastAnswer;
   #boundKeyPressEvent;
   #boundExitEvent;
   constructor(message, options = {}) {
@@ -317,7 +318,18 @@ var ConfirmPrompt = class extends AbstractPrompt {
     if (kToggleKeys.has(key.name ?? "")) {
       this.selectedValue = !this.selectedValue;
     }
-    this.#render();
+    if (key.name === "y") {
+      this.selectedValue = true;
+      resolve(true);
+      this.fastAnswer = true;
+    } else if (key.name === "n") {
+      this.selectedValue = false;
+      resolve(false);
+      this.fastAnswer = true;
+    }
+    if (!this.fastAnswer) {
+      this.#render();
+    }
   }
   #onProcessExit() {
     this.stdin.off("keypress", this.#boundKeyPressEvent);
@@ -327,9 +339,10 @@ var ConfirmPrompt = class extends AbstractPrompt {
     return `${query} ${this.#getHint()}`;
   }
   #onQuestionAnswer() {
+    this.clearLastLine();
     this.stdout.moveCursor(
       -this.stdout.columns,
-      -(Math.floor(wcwidth2(stripAnsi(this.#getQuestionQuery())) / this.stdout.columns) || 1)
+      -Math.floor(wcwidth2(stripAnsi(this.#getQuestionQuery())) / this.stdout.columns)
     );
     this.stdout.clearScreenDown();
     this.write(`${this.selectedValue ? SYMBOLS.Tick : SYMBOLS.Cross} ${kleur3.bold(this.message)}${EOL3}`);
@@ -360,18 +373,47 @@ var ConfirmPrompt = class extends AbstractPrompt {
 import { EOL as EOL4 } from "os";
 import kleur4 from "kleur";
 import wcwidth3 from "@topcli/wcwidth";
+var kRequiredChoiceProperties = ["label", "value"];
 var SelectPrompt = class extends AbstractPrompt {
   #boundExitEvent = () => void 0;
   #boundKeyPressEvent = () => void 0;
   activeIndex = 0;
-  selectedIndexes = [];
   questionMessage;
-  longestChoicelength;
+  autocompleteValue = "";
   options;
   lastRender;
   get choices() {
     return this.options.choices;
   }
+  get filteredChoices() {
+    if (!(this.options.autocomplete && this.autocompleteValue.length > 0)) {
+      return this.choices;
+    }
+    const isCaseSensitive = this.options.caseSensitive;
+    const autocompleteValue = isCaseSensitive ? this.autocompleteValue : this.autocompleteValue.toLowerCase();
+    return this.choices.filter((choice) => this.#filterChoice(choice, autocompleteValue, isCaseSensitive));
+  }
+  #filterChoice(choice, autocompleteValue, isCaseSensitive = false) {
+    const choiceValue = typeof choice === "string" ? isCaseSensitive ? choice : choice.toLowerCase() : isCaseSensitive ? choice.label : choice.label.toLowerCase();
+    if (autocompleteValue.includes(" ")) {
+      return this.#filterMultipleWords(choiceValue, autocompleteValue, isCaseSensitive);
+    }
+    return choiceValue.includes(autocompleteValue);
+  }
+  #filterMultipleWords(choiceValue, autocompleteValue, isCaseSensitive) {
+    return autocompleteValue.split(" ").every((word) => {
+      const wordValue = isCaseSensitive ? word : word.toLowerCase();
+      return choiceValue.includes(wordValue) || choiceValue.includes(autocompleteValue);
+    });
+  }
+  get longestChoice() {
+    return Math.max(...this.filteredChoices.map((choice) => {
+      if (typeof choice === "string") {
+        return choice.length;
+      }
+      return choice.label.length;
+    }));
+  }
   constructor(message, options) {
     const {
       stdin = process.stdin,
@@ -388,22 +430,20 @@ var SelectPrompt = class extends AbstractPrompt {
       this.destroy();
       throw new TypeError("Missing required param: choices");
     }
-    this.longestChoicelength = Math.max(...choices.map((choice) => {
+    for (const choice of choices) {
       if (typeof choice === "string") {
-        return choice.length;
+        continue;
       }
-      const kRequiredChoiceProperties2 = ["label", "value"];
-      for (const prop of kRequiredChoiceProperties2) {
+      for (const prop of kRequiredChoiceProperties) {
         if (!choice[prop]) {
           this.destroy();
           throw new TypeError(`Missing ${prop} for choice ${JSON.stringify(choice)}`);
         }
       }
-      return choice.label.length;
-    }));
+    }
   }
   #getFormattedChoice(choiceIndex) {
-    const choice = this.choices[choiceIndex];
+    const choice = this.filteredChoices[choiceIndex];
     if (typeof choice === "string") {
       return { value: choice, label: choice };
     }
@@ -411,21 +451,24 @@ var SelectPrompt = class extends AbstractPrompt {
   }
   #getVisibleChoices() {
     const maxVisible = this.options.maxVisible || 8;
-    let startIndex = Math.min(this.choices.length - maxVisible, this.activeIndex - Math.floor(maxVisible / 2));
+    let startIndex = Math.min(this.filteredChoices.length - maxVisible, this.activeIndex - Math.floor(maxVisible / 2));
     if (startIndex < 0) {
       startIndex = 0;
     }
-    const endIndex = Math.min(startIndex + maxVisible, this.choices.length);
+    const endIndex = Math.min(startIndex + maxVisible, this.filteredChoices.length);
     return { startIndex, endIndex };
   }
   #showChoices() {
     const { startIndex, endIndex } = this.#getVisibleChoices();
     this.lastRender = { startIndex, endIndex };
+    if (this.options.autocomplete) {
+      this.write(`${SYMBOLS.Pointer} ${this.autocompleteValue}${EOL4}`);
+    }
     for (let choiceIndex = startIndex; choiceIndex < endIndex; choiceIndex++) {
       const choice = this.#getFormattedChoice(choiceIndex);
       const isChoiceSelected = choiceIndex === this.activeIndex;
       const showPreviousChoicesArrow = startIndex > 0 && choiceIndex === startIndex;
-      const showNextChoicesArrow = endIndex < this.choices.length && choiceIndex === endIndex - 1;
+      const showNextChoicesArrow = endIndex < this.filteredChoices.length && choiceIndex === endIndex - 1;
       let prefixArrow = " ";
       if (showPreviousChoicesArrow) {
         prefixArrow = SYMBOLS.Previous;
@@ -434,16 +477,17 @@ var SelectPrompt = class extends AbstractPrompt {
       }
       const prefix = `${prefixArrow}${isChoiceSelected ? `${SYMBOLS.Pointer} ` : "  "}`;
       const formattedLabel = choice.label.padEnd(
-        this.longestChoicelength < 10 ? this.longestChoicelength : 0
+        this.longestChoice < 10 ? this.longestChoice : 0
       );
       const formattedDescription = choice.description ? ` - ${choice.description}` : "";
       const color = isChoiceSelected ? kleur4.white().bold : kleur4.gray;
-      const str = color(`${prefix}${formattedLabel}${formattedDescription}${EOL4}`);
+      const str = `${prefix}${color(`${formattedLabel}${formattedDescription}`)}${EOL4}`;
       this.write(str);
     }
   }
   #showAnsweredQuestion(choice) {
-    const prefix = `${SYMBOLS.Tick} ${kleur4.bold(this.message)} ${SYMBOLS.Pointer}`;
+    const symbolPrefix = choice === "" ? SYMBOLS.Cross : SYMBOLS.Tick;
+    const prefix = `${symbolPrefix} ${kleur4.bold(this.message)} ${SYMBOLS.Pointer}`;
     const formattedChoice = kleur4.yellow(typeof choice === "string" ? choice : choice.label);
     this.write(`${prefix} ${formattedChoice}${EOL4}`);
   }
@@ -456,17 +500,18 @@ var SelectPrompt = class extends AbstractPrompt {
   #onKeypress(...args) {
     const [resolve, render, , key] = args;
     if (key.name === "up") {
-      this.activeIndex = this.activeIndex === 0 ? this.choices.length - 1 : this.activeIndex - 1;
+      this.activeIndex = this.activeIndex === 0 ? this.filteredChoices.length - 1 : this.activeIndex - 1;
       render();
     } else if (key.name === "down") {
-      this.activeIndex = this.activeIndex === this.choices.length - 1 ? 0 : this.activeIndex + 1;
+      this.activeIndex = this.activeIndex === this.filteredChoices.length - 1 ? 0 : this.activeIndex + 1;
       render();
     } else if (key.name === "return") {
+      const choice = this.filteredChoices[this.activeIndex] || "";
+      const label = typeof choice === "string" ? choice : choice.label;
+      const value = typeof choice === "string" ? choice : choice.value;
       render({ clearRender: true });
-      const currentChoice = this.choices[this.activeIndex];
-      const value = typeof currentChoice === "string" ? currentChoice : currentChoice.value;
       if (!this.options.ignoreValues?.includes(value)) {
-        this.#showAnsweredQuestion(currentChoice);
+        this.#showAnsweredQuestion(label);
       }
       this.write(SYMBOLS.ShowCursor);
       this.destroy();
@@ -474,16 +519,23 @@ var SelectPrompt = class extends AbstractPrompt {
       process.off("exit", this.#boundExitEvent);
       resolve(value);
     } else {
+      if (!key.ctrl && this.options.autocomplete) {
+        this.activeIndex = 0;
+        if (key.name === "backspace" && this.autocompleteValue.length > 0) {
+          this.autocompleteValue = this.autocompleteValue.slice(0, -1);
+        } else if (key.name !== "backspace") {
+          this.autocompleteValue += key.sequence;
+        }
+      }
       render();
     }
   }
   async select() {
     const answer = this.agent.nextAnswers.shift();
     if (answer !== void 0) {
-      const formatedAnser = Array.isArray(answer) ? answer.join(", ") : answer;
-      this.#showAnsweredQuestion(formatedAnser);
+      this.#showAnsweredQuestion(answer);
       this.destroy();
-      return Array.isArray(answer) ? answer : [answer];
+      return answer;
     }
     this.write(SYMBOLS.HideCursor);
     this.#showQuestion();
@@ -498,6 +550,15 @@ var SelectPrompt = class extends AbstractPrompt {
           this.clearLastLine();
           linesToClear--;
         }
+        if (this.options.autocomplete) {
+          let linesToClear2 = Math.ceil(
+            wcwidth3(`${SYMBOLS.Pointer} ${this.autocompleteValue}`) / this.stdout.columns
+          );
+          while (linesToClear2 > 0) {
+            this.clearLastLine();
+            linesToClear2--;
+          }
+        }
       }
       if (clearRender) {
         const questionLineCount = Math.ceil(
@@ -527,11 +588,12 @@ var SelectPrompt = class extends AbstractPrompt {
 import { EOL as EOL5 } from "os";
 import kleur5 from "kleur";
 import wcwidth4 from "@topcli/wcwidth";
-var kRequiredChoiceProperties = ["label", "value"];
+var kRequiredChoiceProperties2 = ["label", "value"];
 var MultiselectPrompt = class extends AbstractPrompt {
   #boundExitEvent = () => void 0;
   #boundKeyPressEvent = () => void 0;
   #validators;
+  #showHint;
   activeIndex = 0;
   selectedIndexes = [];
   questionMessage;
@@ -576,7 +638,8 @@ var MultiselectPrompt = class extends AbstractPrompt {
       stdout = process.stdout,
       choices,
       preSelectedChoices,
-      validators = []
+      validators = [],
+      showHint = true
     } = options ?? {};
     super(message, stdin, stdout);
     if (!options) {
@@ -589,11 +652,12 @@ var MultiselectPrompt = class extends AbstractPrompt {
       throw new TypeError("Missing required param: choices");
     }
     this.#validators = validators;
+    this.#showHint = showHint;
     for (const choice of choices) {
       if (typeof choice === "string") {
         continue;
       }
-      for (const prop of kRequiredChoiceProperties) {
+      for (const prop of kRequiredChoiceProperties2) {
         if (!choice[prop]) {
           this.destroy();
           throw new TypeError(`Missing ${prop} for choice ${JSON.stringify(choice)}`);
@@ -783,14 +847,14 @@ var MultiselectPrompt = class extends AbstractPrompt {
     });
   }
   #showQuestion(error = null) {
-    let hint = kleur5.gray(
+    let hint = this.#showHint ? kleur5.gray(
       // eslint-disable-next-line max-len
-      `(Press ${kleur5.bold("<Ctrl+A>")} to toggle all, ${kleur5.bold("<Ctrl+Space>")} to select, ${kleur5.bold("<Left/Right>")} to toggle, ${kleur5.bold("<Return>")} to submit)`
-    );
+      `(Press ${kleur5.bold("<Ctrl+A>")} to toggle all, ${kleur5.bold("<Left/Right>")} to toggle, ${kleur5.bold("<Return>")} to submit)`
+    ) : "";
     if (error) {
-      hint += ` ${kleur5.red().bold(`[${error}]`)}`;
+      hint += `${hint.length > 0 ? " " : ""}${kleur5.red().bold(`[${error}]`)}`;
     }
-    this.questionMessage = `${SYMBOLS.QuestionMark} ${kleur5.bold(this.message)} ${hint}`;
+    this.questionMessage = `${SYMBOLS.QuestionMark} ${kleur5.bold(this.message)}${hint.length > 0 ? ` ${hint}` : ""}`;
     this.write(`${this.questionMessage}${EOL5}`);
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topcli/prompts",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Node.js user input library for command-line interfaces.",
   "scripts": {
     "build": "tsup index.ts --format cjs,esm --dts --clean",
@@ -32,10 +32,10 @@
   "type": "module",
   "devDependencies": {
     "@nodesecure/eslint-config": "^1.9.0",
-    "@types/node": "^20.10.6",
-    "c8": "^8.0.1",
+    "@types/node": "^20.11.6",
+    "c8": "^9.1.0",
     "eslint": "^8.56.0",
-    "esmock": "^2.6.0",
+    "esmock": "^2.6.3",
     "glob": "^10.3.10",
     "tsup": "^8.0.1",
     "tsx": "^4.7.0",