@topcli/prompts 1.5.1 → 1.6.0

package/README.md

@@ -108,6 +108,8 @@ const os = await multiselect('Choose OS', {
 });
 ```
 
+Use `autocomplete` to allow filtered choices. This can be usefull for a large list of choices.
+
 ### `confirm()`
 
 ```ts
@@ -177,6 +179,7 @@ export interface MultiselectOptions extends SharedOptions  {
   maxVisible?: number;
   preSelectedChoices?: (Choice | string)[];
   validators?: Validator[];
+  autocomplete?: boolean;
 }
 
 export interface ConfirmOptions extends SharedOptions  {

package/index.d.ts

@@ -35,6 +35,7 @@ export interface MultiselectOptions extends SharedOptions  {
   maxVisible?: number;
   preSelectedChoices?: (Choice | string)[];
   validators?: Validator[];
+  autocomplete?: boolean;
 }
 
 export interface ConfirmOptions extends SharedOptions  {

package/index.js

@@ -1,31 +1,28 @@
 // Import Internal Dependencies
-import { ConfirmPrompt } from "./src/confirm-prompt.js";
-import { SelectPrompt } from "./src/select-prompt.js";
-import { QuestionPrompt } from "./src/question-prompt.js";
+import * as prompts from "./src/prompts/index.js";
 import { required } from "./src/validators.js";
 import { PromptAgent } from "./src/prompt-agent.js";
-import { MultiselectPrompt } from "./src/multiselect-prompt.js";
 
 export async function question(message, options = {}) {
-  const questionPrompt = new QuestionPrompt(message, options);
+  const questionPrompt = new prompts.QuestionPrompt(message, options);
 
   return questionPrompt.question();
 }
 
 export async function select(message, options) {
-  const selectPrompt = new SelectPrompt(message, options);
+  const selectPrompt = new prompts.SelectPrompt(message, options);
 
   return selectPrompt.select();
 }
 
 export async function confirm(message, options) {
-  const confirmPrompt = new ConfirmPrompt(message, options);
+  const confirmPrompt = new prompts.ConfirmPrompt(message, options);
 
   return confirmPrompt.confirm();
 }
 
 export async function multiselect(message, options) {
-  const multiselectPrompt = new MultiselectPrompt(message, options);
+  const multiselectPrompt = new prompts.MultiselectPrompt(message, options);
 
   return multiselectPrompt.multiselect();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topcli/prompts",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Node.js user input library for command-line interfaces.",
   "scripts": {
     "test": "node --no-warnings=ExperimentalWarning --loader=esmock --test test/",
@@ -31,10 +31,7 @@
   },
   "dependencies": {
     "@topcli/wcwidth": "^1.0.1",
-    "is-ci": "^3.0.1",
-    "is-unicode-supported": "^2.0.0",
-    "kleur": "^4.1.5",
-    "strip-ansi": "^7.1.0"
+    "kleur": "^4.1.5"
   },
   "engines": {
     "node": ">=14"

package/src/constants.js

@@ -1,7 +1,8 @@
 // Import Third-party Dependencies
 import kleur from "kleur";
-import isUnicodeSupported from "is-unicode-supported";
-import isCI from "is-ci";
+
+// Import Internal Dependencies
+import { isUnicodeSupported } from "./utils.js";
 
 const kMainSymbols = {
   tick: "✔",
@@ -21,7 +22,7 @@ const kFallbackSymbols = {
   active: "(+)",
   inactive: "(-)"
 };
-const kSymbols = isUnicodeSupported() || isCI ? kMainSymbols : kFallbackSymbols;
+const kSymbols = isUnicodeSupported() || process.env.CI ? kMainSymbols : kFallbackSymbols;
 const kPointer = kleur.gray(kSymbols.pointer);
 
 export const SYMBOLS = {

package/src/{abstract-prompt.js → prompts/abstract.js}

@@ -3,11 +3,9 @@ import { EOL } from "node:os";
 import { createInterface } from "node:readline";
 import { Writable } from "node:stream";
 
-// Import Third-party Dependencies
-import stripAnsi from "strip-ansi";
-
 // Import Internal Dependencies
-import { PromptAgent } from "./prompt-agent.js";
+import { stripAnsi } from "../utils.js";
+import { PromptAgent } from "../prompt-agent.js";
 
 export class AbstractPrompt {
   constructor(message, input = process.stdin, output = process.stdout) {

package/src/{confirm-prompt.js → prompts/confirm.js}

@@ -3,12 +3,12 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
-import stripAnsi from "strip-ansi";
 import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
-import { AbstractPrompt } from "./abstract-prompt.js";
-import { SYMBOLS } from "./constants.js";
+import { AbstractPrompt } from "./abstract.js";
+import { stripAnsi } from "../utils.js";
+import { SYMBOLS } from "../constants.js";
 
 // CONSTANTS
 const kToggleKeys = new Set([

package/src/prompts/index.js

@@ -0,0 +1,12 @@
+// Import Internal Dependencies
+import { QuestionPrompt } from "./question.js";
+import { ConfirmPrompt } from "./confirm.js";
+import { SelectPrompt } from "./select.js";
+import { MultiselectPrompt } from "./multiselect.js";
+
+export {
+  QuestionPrompt,
+  ConfirmPrompt,
+  SelectPrompt,
+  MultiselectPrompt
+};

package/src/{multiselect-prompt.js → prompts/multiselect.js}

@@ -3,12 +3,15 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
-import stripAnsi from "strip-ansi";
 import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
-import { AbstractPrompt } from "./abstract-prompt.js";
-import { SYMBOLS } from "./constants.js";
+import { AbstractPrompt } from "./abstract.js";
+import { stripAnsi } from "../utils.js";
+import { SYMBOLS } from "../constants.js";
+
+// CONSTANTS
+const kRequiredChoiceProperties = ["label", "value"];
 
 export class MultiselectPrompt extends AbstractPrompt {
   #boundExitEvent = () => void 0;
@@ -18,11 +21,42 @@ export class MultiselectPrompt extends AbstractPrompt {
   activeIndex = 0;
   selectedIndexes = [];
   questionMessage;
+  autocompleteValue = "";
 
   get choices() {
     return this.options.choices;
   }
 
+  get filteredChoices() {
+    return this.options.autocomplete && this.autocompleteValue.length > 0 ? this.choices.filter((choice) => {
+      if (typeof choice === "string") {
+        if (this.autocompleteValue.includes(" ")) {
+          return this.autocompleteValue.split(" ").every((word) => choice.includes(word)) ||
+          choice.includes(this.autocompleteValue);
+        }
+
+        return choice.includes(this.autocompleteValue);
+      }
+
+      if (this.autocompleteValue.includes(" ")) {
+        return this.autocompleteValue.split(" ").every((word) => choice.label.includes(word)) ||
+        choice.label.includes(this.autocompleteValue);
+      }
+
+      return choice.label.includes(this.autocompleteValue);
+    }) : this.choices;
+  }
+
+  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,
@@ -46,31 +80,27 @@ export class MultiselectPrompt extends AbstractPrompt {
       throw new TypeError("Missing required param: choices");
     }
 
-    this.longestChoice = Math.max(...choices.map((choice) => {
+    this.#validators = validators;
+
+    for (const choice of choices) {
       if (typeof choice === "string") {
-        return choice.length;
+        continue;
       }
 
-      const kRequiredChoiceProperties = ["label", "value"];
-
       for (const prop of kRequiredChoiceProperties) {
         if (!choice[prop]) {
           this.destroy();
           throw new TypeError(`Missing ${prop} for choice ${JSON.stringify(choice)}`);
         }
       }
-
-      return choice.label.length;
-    }));
-
-    this.#validators = validators;
+    }
 
     if (!preSelectedChoices) {
       return;
     }
 
     for (const choice of preSelectedChoices) {
-      const choiceIndex = this.choices.findIndex((item) => {
+      const choiceIndex = this.filteredChoices.findIndex((item) => {
         if (typeof item === "string") {
           return item === choice;
         }
@@ -87,7 +117,7 @@ export class MultiselectPrompt extends AbstractPrompt {
   }
 
   #getFormattedChoice(choiceIndex) {
-    const choice = this.choices[choiceIndex];
+    const choice = this.filteredChoices[choiceIndex];
 
     if (typeof choice === "string") {
       return { value: choice, label: choice };
@@ -98,12 +128,12 @@ export class MultiselectPrompt 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 };
   }
@@ -112,12 +142,15 @@ export class MultiselectPrompt extends AbstractPrompt {
     const { startIndex, endIndex } = this.#getVisibleChoices();
     this.lastRender = { startIndex, endIndex };
 
+    if (this.options.autocomplete) {
+      this.write(`${SYMBOLS.Pointer} ${this.autocompleteValue}${EOL}`);
+    }
     for (let choiceIndex = startIndex; choiceIndex < endIndex; choiceIndex++) {
       const choice = this.#getFormattedChoice(choiceIndex);
       const isChoiceActive = choiceIndex === this.activeIndex;
       const isChoiceSelected = this.selectedIndexes.includes(choiceIndex);
       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) {
@@ -156,34 +189,30 @@ export class MultiselectPrompt 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 === "a") {
-      this.selectedIndexes = this.selectedIndexes.length === this.choices.length ? [] : this.choices.map((_, index) => index);
+    else if (key.ctrl && key.name === "a") {
+      // eslint-disable-next-line max-len
+      this.selectedIndexes = this.selectedIndexes.length === this.filteredChoices.length ? [] : this.filteredChoices.map((_, index) => index);
       render();
     }
-    else if (key.name === "space") {
-      const isChoiceSelected = this.selectedIndexes.includes(this.activeIndex);
-
-      if (isChoiceSelected) {
-        this.selectedIndexes = this.selectedIndexes.filter((index) => index !== this.activeIndex);
-      }
-      else {
-        this.selectedIndexes.push(this.activeIndex);
-      }
-
+    else if (key.name === "right") {
+      this.selectedIndexes.push(this.activeIndex);
+      render();
+    }
+    else if (key.name === "left") {
+      this.selectedIndexes = this.selectedIndexes.filter((index) => index !== this.activeIndex);
       render();
     }
     else if (key.name === "return") {
-      const labels = this.selectedIndexes.map((index) => this.choices[index].label ?? this.choices[index]);
-      const values = this.selectedIndexes.map((index) => this.choices[index].value ?? this.choices[index]);
+      const labels = this.selectedIndexes.map((index) => this.filteredChoices[index].label ?? this.filteredChoices[index]);
+      const values = this.selectedIndexes.map((index) => this.filteredChoices[index].value ?? this.filteredChoices[index]);
 
       for (const validator of this.#validators) {
         if (!validator.validate(values)) {
@@ -207,6 +236,17 @@ export class MultiselectPrompt extends AbstractPrompt {
       resolve(values);
     }
     else {
+      if (!key.ctrl && this.options.autocomplete) {
+        // reset selected choices when user type
+        this.selectedIndexes = [];
+        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();
     }
   }
@@ -236,6 +276,15 @@ export class MultiselectPrompt extends AbstractPrompt {
           this.clearLastLine();
           linesToClear--;
         }
+        if (this.options.autocomplete) {
+          let linesToClear = Math.ceil(
+            wcwidth(`${SYMBOLS.Pointer} ${this.autocompleteValue}`) / this.stdout.columns
+          );
+          while (linesToClear > 0) {
+            this.clearLastLine();
+            linesToClear--;
+          }
+        }
       }
 
       if (clearRender) {
@@ -249,7 +298,8 @@ export class MultiselectPrompt extends AbstractPrompt {
       }
 
       if (error) {
-        this.stdout.moveCursor(0, -2);
+        const linesToClear = Math.ceil(wcwidth(this.questionMessage) / this.stdout.columns) + 1;
+        this.stdout.moveCursor(0, -linesToClear);
         this.stdout.clearScreenDown();
         this.#showQuestion(error);
       }
@@ -270,7 +320,8 @@ export class MultiselectPrompt extends AbstractPrompt {
 
   #showQuestion(error = null) {
     let hint = kleur.gray(
-      `(Press ${kleur.bold("<a>")} to toggle all, ${kleur.bold("<space>")} to select, ${kleur.bold("<return>")} to submit)`
+      // eslint-disable-next-line max-len
+      `(Press ${kleur.bold("<Ctrl+A>")} to toggle all, ${kleur.bold("<Ctrl+Space>")} to select, ${kleur.bold("<Left/Right>")} to toggle, ${kleur.bold("<Return>")} to submit)`
     );
     if (error) {
       hint += ` ${kleur.red().bold(`[${error}]`)}`;

package/src/{question-prompt.js → prompts/question.js}

@@ -3,12 +3,12 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
-import stripAnsi from "strip-ansi";
 import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
-import { AbstractPrompt } from "./abstract-prompt.js";
-import { SYMBOLS } from "./constants.js";
+import { AbstractPrompt } from "./abstract.js";
+import { stripAnsi } from "../utils.js";
+import { SYMBOLS } from "../constants.js";
 
 export class QuestionPrompt extends AbstractPrompt {
   #validators;

package/src/{select-prompt.js → prompts/select.js}

@@ -3,12 +3,12 @@ import { EOL } from "node:os";
 
 // Import Third-party Dependencies
 import kleur from "kleur";
-import stripAnsi from "strip-ansi";
 import wcwidth from "@topcli/wcwidth";
 
 // Import Internal Dependencies
-import { AbstractPrompt } from "./abstract-prompt.js";
-import { SYMBOLS } from "./constants.js";
+import { AbstractPrompt } from "./abstract.js";
+import { stripAnsi } from "../utils.js";
+import { SYMBOLS } from "../constants.js";
 
 export class SelectPrompt extends AbstractPrompt {
   #boundExitEvent = () => void 0;

package/src/utils.js

@@ -0,0 +1,43 @@
+import process from "node:process";
+
+// CONSTANTS
+const kAnsiRegex = ansiRegex();
+
+/**
+ * @see https://github.com/chalk/ansi-regex
+ */
+export function ansiRegex({onlyFirst = false} = {}) {
+	const pattern = [
+		'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)',
+		'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))'
+	].join('|');
+
+	return new RegExp(pattern, onlyFirst ? undefined : 'g');
+}
+
+/**
+ * @param {!string} string
+ * @returns {string}
+ */
+export function stripAnsi(string) {
+  return string.replace(kAnsiRegex, "");
+}
+
+/**
+ * @see https://github.com/sindresorhus/is-unicode-supported
+ * @returns {boolean}
+ */
+export function isUnicodeSupported() {
+	if (process.platform !== 'win32') {
+		return process.env.TERM !== 'linux'; // Linux console (kernel)
+	}
+
+	return Boolean(process.env.WT_SESSION) // Windows Terminal
+		|| Boolean(process.env.TERMINUS_SUBLIME) // Terminus (<0.2.27)
+		|| process.env.ConEmuTask === '{cmd::Cmder}' // ConEmu and cmder
+		|| process.env.TERM_PROGRAM === 'Terminus-Sublime'
+		|| process.env.TERM_PROGRAM === 'vscode'
+		|| process.env.TERM === 'xterm-256color'
+		|| process.env.TERM === 'alacritty'
+		|| process.env.TERMINAL_EMULATOR === 'JetBrains-JediTerm';
+}