@inquirer/select 1.3.3 → 2.1.0

package/README.md

@@ -54,9 +54,35 @@ const answer = await select({
 | default  | `string`                                                                                                   | no       | Defines in front of which item the cursor will initially appear. When omitted, the cursor will appear on the first selectable item.                                                                                                                                                 |
 | pageSize | `number`                                                                                                   | no       | By default, lists of choice longer than 7 will be paginated. Use this option to control how many choices will appear on the screen at once.                                                                                                                                         |
 | loop     | `boolean`                                                                                                  | no       | Defaults to `true`. When set to `false`, the cursor will be constrained to the top and bottom of the choice list without looping.                                                                                                                                                   |
+| theme    | [See Theming](#Theming)                                                                                    | no       | Customize look of the prompt.                                                                                                                                                                                                                                                       |
 
 The `Separator` object can be used to render non-selectable lines in the choice list. By default it'll render a line, but you can provide the text as argument (`new Separator('-- Dependencies --')`). This option is often used to add labels to groups within long list of options.
 
+## Theming
+
+You can theme a prompt by passing a `theme` object option. The theme object only need to includes the keys you wish to modify, we'll fallback on the defaults for the rest.
+
+```ts
+type Theme = {
+  prefix: string;
+  spinner: {
+    interval: number;
+    frames: string[];
+  };
+  style: {
+    answer: (text: string) => string;
+    message: (text: string) => string;
+    error: (text: string) => string;
+    help: (text: string) => string;
+    highlight: (text: string) => string;
+    disabled: (text: string) => string;
+  };
+  icon: {
+    cursor: string;
+  };
+};
+```
+
 # License
 
 Copyright (c) 2023 Simon Boudrias (twitter: [@vaxilart](https://twitter.com/Vaxilart))<br/>

package/dist/cjs/index.js

@@ -9,27 +9,20 @@ Object.defineProperty(exports, "Separator", { enumerable: true, get: function ()
 const chalk_1 = __importDefault(require("chalk"));
 const figures_1 = __importDefault(require("figures"));
 const ansi_escapes_1 = __importDefault(require("ansi-escapes"));
+const selectTheme = {
+    icon: { cursor: figures_1.default.pointer },
+    style: { disabled: (text) => chalk_1.default.dim(`- ${text}`) },
+};
 function isSelectable(item) {
     return !core_1.Separator.isSeparator(item) && !item.disabled;
 }
-function renderItem({ item, isActive }) {
-    if (core_1.Separator.isSeparator(item)) {
-        return ` ${item.separator}`;
-    }
-    const line = item.name || item.value;
-    if (item.disabled) {
-        const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
-        return chalk_1.default.dim(`- ${line} ${disabledLabel}`);
-    }
-    const color = isActive ? chalk_1.default.cyan : (x) => x;
-    const prefix = isActive ? figures_1.default.pointer : ` `;
-    return color(`${prefix} ${line}`);
-}
 exports.default = (0, core_1.createPrompt)((config, done) => {
     const { choices: items, loop = true, pageSize = 7 } = config;
     const firstRender = (0, core_1.useRef)(true);
-    const prefix = (0, core_1.usePrefix)();
+    const theme = (0, core_1.makeTheme)(selectTheme, config.theme);
+    const prefix = (0, core_1.usePrefix)({ theme });
     const [status, setStatus] = (0, core_1.useState)('pending');
+    const searchTimeoutRef = (0, core_1.useRef)(undefined);
     const bounds = (0, core_1.useMemo)(() => {
         const first = items.findIndex(isSelectable);
         // TODO: Replace with `findLastIndex` when it's available.
@@ -46,12 +39,14 @@ exports.default = (0, core_1.createPrompt)((config, done) => {
     const [active, setActive] = (0, core_1.useState)(defaultItemIndex === -1 ? bounds.first : defaultItemIndex);
     // Safe to assume the cursor position always point to a Choice.
     const selectedChoice = items[active];
-    (0, core_1.useKeypress)((key) => {
+    (0, core_1.useKeypress)((key, rl) => {
+        clearTimeout(searchTimeoutRef.current);
         if ((0, core_1.isEnterKey)(key)) {
             setStatus('done');
             done(selectedChoice.value);
         }
         else if ((0, core_1.isUpKey)(key) || (0, core_1.isDownKey)(key)) {
+            rl.clearLine(0);
             if (loop ||
                 ((0, core_1.isUpKey)(key) && active !== bounds.first) ||
                 ((0, core_1.isDownKey)(key) && active !== bounds.last)) {
@@ -64,28 +59,65 @@ exports.default = (0, core_1.createPrompt)((config, done) => {
             }
         }
         else if ((0, core_1.isNumberKey)(key)) {
+            rl.clearLine(0);
             const position = Number(key.name) - 1;
             const item = items[position];
             if (item != null && isSelectable(item)) {
                 setActive(position);
             }
         }
+        else if ((0, core_1.isBackspaceKey)(key)) {
+            rl.clearLine(0);
+        }
+        else {
+            // Default to search
+            const searchTerm = rl.line.toLowerCase();
+            const matchIndex = items.findIndex((item) => {
+                if (core_1.Separator.isSeparator(item) || !isSelectable(item))
+                    return false;
+                return String(item.name || item.value)
+                    .toLowerCase()
+                    .startsWith(searchTerm);
+            });
+            if (matchIndex >= 0) {
+                setActive(matchIndex);
+            }
+            searchTimeoutRef.current = setTimeout(() => {
+                rl.clearLine(0);
+            }, 700);
+        }
     });
-    const message = chalk_1.default.bold(config.message);
+    const message = theme.style.message(config.message);
     let helpTip;
     if (firstRender.current && items.length <= pageSize) {
         firstRender.current = false;
-        helpTip = chalk_1.default.dim('(Use arrow keys)');
+        helpTip = theme.style.help('(Use arrow keys)');
     }
     const page = (0, core_1.usePagination)({
         items,
         active,
-        renderItem,
+        renderItem({ item, isActive }) {
+            if (core_1.Separator.isSeparator(item)) {
+                return ` ${item.separator}`;
+            }
+            const line = item.name || item.value;
+            if (item.disabled) {
+                const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
+                return theme.style.disabled(`${line} ${disabledLabel}`);
+            }
+            const color = isActive ? theme.style.highlight : (x) => x;
+            const cursor = isActive ? theme.icon.cursor : ` `;
+            return color(`${cursor} ${line}`);
+        },
         pageSize,
         loop,
+        theme,
     });
     if (status === 'done') {
-        return `${prefix} ${message} ${chalk_1.default.cyan(selectedChoice.name || selectedChoice.value)}`;
+        const answer = selectedChoice.name ||
+            // TODO: Could we enforce that at the type level? Name should be defined for non-string values.
+            String(selectedChoice.value);
+        return `${prefix} ${message} ${theme.style.answer(answer)}`;
     }
     const choiceDescription = selectedChoice.description
         ? `\n${selectedChoice.description}`

package/dist/cjs/types/index.d.ts

@@ -6,12 +6,32 @@ type Choice<Value> = {
     disabled?: boolean | string;
     type?: never;
 };
-declare const _default: <Value extends unknown>(config: {
-    message: string | Promise<string> | (() => Promise<string>);
+declare const _default: <Value>(config: {
+    message: string;
     choices: readonly (Separator | Choice<Value>)[];
     pageSize?: number | undefined;
     loop?: boolean | undefined;
-    default?: Value | undefined;
+    default?: unknown;
+    theme?: {
+        icon?: {
+            cursor?: string | undefined;
+        } | undefined;
+        style?: {
+            disabled?: {} | undefined;
+            answer?: {} | undefined;
+            message?: {} | undefined;
+            error?: {} | undefined;
+            defaultAnswer?: {} | undefined;
+            help?: {} | undefined;
+            highlight?: {} | undefined;
+            key?: {} | undefined;
+        } | undefined;
+        prefix?: string | undefined;
+        spinner?: {
+            interval?: number | undefined;
+            frames?: (string | undefined)[] | undefined;
+        } | undefined;
+    } | undefined;
 }, context?: import("@inquirer/type").Context | undefined) => import("@inquirer/type").CancelablePromise<Value>;
 export default _default;
 export { Separator };

package/dist/esm/index.mjs

@@ -1,28 +1,21 @@
-import { createPrompt, useState, useKeypress, usePrefix, usePagination, useRef, useMemo, isEnterKey, isUpKey, isDownKey, isNumberKey, Separator, } from '@inquirer/core';
+import { createPrompt, useState, useKeypress, usePrefix, usePagination, useRef, useMemo, isBackspaceKey, isEnterKey, isUpKey, isDownKey, isNumberKey, Separator, makeTheme, } from '@inquirer/core';
 import chalk from 'chalk';
 import figures from 'figures';
 import ansiEscapes from 'ansi-escapes';
+const selectTheme = {
+    icon: { cursor: figures.pointer },
+    style: { disabled: (text) => chalk.dim(`- ${text}`) },
+};
 function isSelectable(item) {
     return !Separator.isSeparator(item) && !item.disabled;
 }
-function renderItem({ item, isActive }) {
-    if (Separator.isSeparator(item)) {
-        return ` ${item.separator}`;
-    }
-    const line = item.name || item.value;
-    if (item.disabled) {
-        const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
-        return chalk.dim(`- ${line} ${disabledLabel}`);
-    }
-    const color = isActive ? chalk.cyan : (x) => x;
-    const prefix = isActive ? figures.pointer : ` `;
-    return color(`${prefix} ${line}`);
-}
 export default createPrompt((config, done) => {
     const { choices: items, loop = true, pageSize = 7 } = config;
     const firstRender = useRef(true);
-    const prefix = usePrefix();
+    const theme = makeTheme(selectTheme, config.theme);
+    const prefix = usePrefix({ theme });
     const [status, setStatus] = useState('pending');
+    const searchTimeoutRef = useRef(undefined);
     const bounds = useMemo(() => {
         const first = items.findIndex(isSelectable);
         // TODO: Replace with `findLastIndex` when it's available.
@@ -39,12 +32,14 @@ export default createPrompt((config, done) => {
     const [active, setActive] = useState(defaultItemIndex === -1 ? bounds.first : defaultItemIndex);
     // Safe to assume the cursor position always point to a Choice.
     const selectedChoice = items[active];
-    useKeypress((key) => {
+    useKeypress((key, rl) => {
+        clearTimeout(searchTimeoutRef.current);
         if (isEnterKey(key)) {
             setStatus('done');
             done(selectedChoice.value);
         }
         else if (isUpKey(key) || isDownKey(key)) {
+            rl.clearLine(0);
             if (loop ||
                 (isUpKey(key) && active !== bounds.first) ||
                 (isDownKey(key) && active !== bounds.last)) {
@@ -57,28 +52,65 @@ export default createPrompt((config, done) => {
             }
         }
         else if (isNumberKey(key)) {
+            rl.clearLine(0);
             const position = Number(key.name) - 1;
             const item = items[position];
             if (item != null && isSelectable(item)) {
                 setActive(position);
             }
         }
+        else if (isBackspaceKey(key)) {
+            rl.clearLine(0);
+        }
+        else {
+            // Default to search
+            const searchTerm = rl.line.toLowerCase();
+            const matchIndex = items.findIndex((item) => {
+                if (Separator.isSeparator(item) || !isSelectable(item))
+                    return false;
+                return String(item.name || item.value)
+                    .toLowerCase()
+                    .startsWith(searchTerm);
+            });
+            if (matchIndex >= 0) {
+                setActive(matchIndex);
+            }
+            searchTimeoutRef.current = setTimeout(() => {
+                rl.clearLine(0);
+            }, 700);
+        }
     });
-    const message = chalk.bold(config.message);
+    const message = theme.style.message(config.message);
     let helpTip;
     if (firstRender.current && items.length <= pageSize) {
         firstRender.current = false;
-        helpTip = chalk.dim('(Use arrow keys)');
+        helpTip = theme.style.help('(Use arrow keys)');
     }
     const page = usePagination({
         items,
         active,
-        renderItem,
+        renderItem({ item, isActive }) {
+            if (Separator.isSeparator(item)) {
+                return ` ${item.separator}`;
+            }
+            const line = item.name || item.value;
+            if (item.disabled) {
+                const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
+                return theme.style.disabled(`${line} ${disabledLabel}`);
+            }
+            const color = isActive ? theme.style.highlight : (x) => x;
+            const cursor = isActive ? theme.icon.cursor : ` `;
+            return color(`${cursor} ${line}`);
+        },
         pageSize,
         loop,
+        theme,
     });
     if (status === 'done') {
-        return `${prefix} ${message} ${chalk.cyan(selectedChoice.name || selectedChoice.value)}`;
+        const answer = selectedChoice.name ||
+            // TODO: Could we enforce that at the type level? Name should be defined for non-string values.
+            String(selectedChoice.value);
+        return `${prefix} ${message} ${theme.style.answer(answer)}`;
     }
     const choiceDescription = selectedChoice.description
         ? `\n${selectedChoice.description}`

package/dist/esm/types/index.d.mts

@@ -6,12 +6,32 @@ type Choice<Value> = {
     disabled?: boolean | string;
     type?: never;
 };
-declare const _default: <Value extends unknown>(config: {
-    message: string | Promise<string> | (() => Promise<string>);
+declare const _default: <Value>(config: {
+    message: string;
     choices: readonly (Separator | Choice<Value>)[];
     pageSize?: number | undefined;
     loop?: boolean | undefined;
-    default?: Value | undefined;
+    default?: unknown;
+    theme?: {
+        icon?: {
+            cursor?: string | undefined;
+        } | undefined;
+        style?: {
+            disabled?: {} | undefined;
+            answer?: {} | undefined;
+            message?: {} | undefined;
+            error?: {} | undefined;
+            defaultAnswer?: {} | undefined;
+            help?: {} | undefined;
+            highlight?: {} | undefined;
+            key?: {} | undefined;
+        } | undefined;
+        prefix?: string | undefined;
+        spinner?: {
+            interval?: number | undefined;
+            frames?: (string | undefined)[] | undefined;
+        } | undefined;
+    } | undefined;
 }, context?: import("@inquirer/type").Context | undefined) => import("@inquirer/type").CancelablePromise<Value>;
 export default _default;
 export { Separator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inquirer/select",
-  "version": "1.3.3",
+  "version": "2.1.0",
   "description": "Inquirer select/list prompt",
   "main": "./dist/cjs/index.js",
   "typings": "./dist/cjs/types/index.d.ts",
@@ -54,14 +54,14 @@
   "license": "MIT",
   "homepage": "https://github.com/SBoudrias/Inquirer.js/blob/master/packages/select/README.md",
   "dependencies": {
-    "@inquirer/core": "^6.0.0",
-    "@inquirer/type": "^1.1.6",
+    "@inquirer/core": "^7.0.1",
+    "@inquirer/type": "^1.2.0",
     "ansi-escapes": "^4.3.2",
     "chalk": "^4.1.2",
     "figures": "^3.2.0"
   },
   "devDependencies": {
-    "@inquirer/testing": "^2.1.10"
+    "@inquirer/testing": "^2.1.12"
   },
   "scripts": {
     "tsc": "yarn run tsc:esm && yarn run tsc:cjs",
@@ -72,7 +72,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=14.18.0"
+    "node": ">=18"
   },
   "exports": {
     ".": {
@@ -86,5 +86,5 @@
       }
     }
   },
-  "gitHead": "4dee2b11d89a7c8a698c9eeda546ba8092b84f64"
+  "gitHead": "c91196e66689cfc05e9237763e6f95f3eb5342a1"
 }