@inquirer/select 1.3.3 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +26 -0
  2. package/dist/cjs/index.js +26 -18
  3. package/dist/cjs/types/index.d.ts +23 -3
  4. package/dist/esm/index.mjs +27 -19
  5. package/dist/esm/types/index.d.mts +23 -3
  6. package/package.json +6 -6
package/README.md CHANGED
@@ -54,9 +54,35 @@ const answer = await select({
54
54
  | 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. |
55
55
  | 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. |
56
56
  | 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. |
57
+ | theme | [See Theming](#Theming) | no | Customize look of the prompt. |
57
58
 
58
59
  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.
59
60
 
61
+ ## Theming
62
+
63
+ 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.
64
+
65
+ ```ts
66
+ type Theme = {
67
+ prefix: string;
68
+ spinner: {
69
+ interval: number;
70
+ frames: string[];
71
+ };
72
+ style: {
73
+ answer: (text: string) => string;
74
+ message: (text: string) => string;
75
+ error: (text: string) => string;
76
+ help: (text: string) => string;
77
+ highlight: (text: string) => string;
78
+ disabled: (text: string) => string;
79
+ };
80
+ icon: {
81
+ cursor: string;
82
+ };
83
+ };
84
+ ```
85
+
60
86
  # License
61
87
 
62
88
  Copyright (c) 2023 Simon Boudrias (twitter: [@vaxilart](https://twitter.com/Vaxilart))<br/>
package/dist/cjs/index.js CHANGED
@@ -9,26 +9,18 @@ Object.defineProperty(exports, "Separator", { enumerable: true, get: function ()
9
9
  const chalk_1 = __importDefault(require("chalk"));
10
10
  const figures_1 = __importDefault(require("figures"));
11
11
  const ansi_escapes_1 = __importDefault(require("ansi-escapes"));
12
+ const selectTheme = {
13
+ icon: { cursor: figures_1.default.pointer },
14
+ style: { disabled: (text) => chalk_1.default.dim(`- ${text}`) },
15
+ };
12
16
  function isSelectable(item) {
13
17
  return !core_1.Separator.isSeparator(item) && !item.disabled;
14
18
  }
15
- function renderItem({ item, isActive }) {
16
- if (core_1.Separator.isSeparator(item)) {
17
- return ` ${item.separator}`;
18
- }
19
- const line = item.name || item.value;
20
- if (item.disabled) {
21
- const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
22
- return chalk_1.default.dim(`- ${line} ${disabledLabel}`);
23
- }
24
- const color = isActive ? chalk_1.default.cyan : (x) => x;
25
- const prefix = isActive ? figures_1.default.pointer : ` `;
26
- return color(`${prefix} ${line}`);
27
- }
28
19
  exports.default = (0, core_1.createPrompt)((config, done) => {
29
20
  const { choices: items, loop = true, pageSize = 7 } = config;
30
21
  const firstRender = (0, core_1.useRef)(true);
31
- const prefix = (0, core_1.usePrefix)();
22
+ const theme = (0, core_1.makeTheme)(selectTheme, config.theme);
23
+ const prefix = (0, core_1.usePrefix)({ theme });
32
24
  const [status, setStatus] = (0, core_1.useState)('pending');
33
25
  const bounds = (0, core_1.useMemo)(() => {
34
26
  const first = items.findIndex(isSelectable);
@@ -71,21 +63,37 @@ exports.default = (0, core_1.createPrompt)((config, done) => {
71
63
  }
72
64
  }
73
65
  });
74
- const message = chalk_1.default.bold(config.message);
66
+ const message = theme.style.message(config.message);
75
67
  let helpTip;
76
68
  if (firstRender.current && items.length <= pageSize) {
77
69
  firstRender.current = false;
78
- helpTip = chalk_1.default.dim('(Use arrow keys)');
70
+ helpTip = theme.style.help('(Use arrow keys)');
79
71
  }
80
72
  const page = (0, core_1.usePagination)({
81
73
  items,
82
74
  active,
83
- renderItem,
75
+ renderItem({ item, isActive }) {
76
+ if (core_1.Separator.isSeparator(item)) {
77
+ return ` ${item.separator}`;
78
+ }
79
+ const line = item.name || item.value;
80
+ if (item.disabled) {
81
+ const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
82
+ return theme.style.disabled(`${line} ${disabledLabel}`);
83
+ }
84
+ const color = isActive ? theme.style.highlight : (x) => x;
85
+ const cursor = isActive ? theme.icon.cursor : ` `;
86
+ return color(`${cursor} ${line}`);
87
+ },
84
88
  pageSize,
85
89
  loop,
90
+ theme,
86
91
  });
87
92
  if (status === 'done') {
88
- return `${prefix} ${message} ${chalk_1.default.cyan(selectedChoice.name || selectedChoice.value)}`;
93
+ const answer = selectedChoice.name ||
94
+ // TODO: Could we enforce that at the type level? Name should be defined for non-string values.
95
+ String(selectedChoice.value);
96
+ return `${prefix} ${message} ${theme.style.answer(answer)}`;
89
97
  }
90
98
  const choiceDescription = selectedChoice.description
91
99
  ? `\n${selectedChoice.description}`
package/dist/cjs/types/index.d.ts CHANGED
@@ -6,12 +6,32 @@ type Choice<Value> = {
6
6
  disabled?: boolean | string;
7
7
  type?: never;
8
8
  };
9
- declare const _default: <Value extends unknown>(config: {
10
- message: string | Promise<string> | (() => Promise<string>);
9
+ declare const _default: <Value>(config: {
10
+ message: string;
11
11
  choices: readonly (Separator | Choice<Value>)[];
12
12
  pageSize?: number | undefined;
13
13
  loop?: boolean | undefined;
14
- default?: Value | undefined;
14
+ default?: unknown;
15
+ theme?: {
16
+ icon?: {
17
+ cursor?: string | undefined;
18
+ } | undefined;
19
+ style?: {
20
+ disabled?: {} | undefined;
21
+ answer?: {} | undefined;
22
+ message?: {} | undefined;
23
+ error?: {} | undefined;
24
+ defaultAnswer?: {} | undefined;
25
+ help?: {} | undefined;
26
+ highlight?: {} | undefined;
27
+ key?: {} | undefined;
28
+ } | undefined;
29
+ prefix?: string | undefined;
30
+ spinner?: {
31
+ interval?: number | undefined;
32
+ frames?: (string | undefined)[] | undefined;
33
+ } | undefined;
34
+ } | undefined;
15
35
  }, context?: import("@inquirer/type").Context | undefined) => import("@inquirer/type").CancelablePromise<Value>;
16
36
  export default _default;
17
37
  export { Separator };
package/dist/esm/index.mjs CHANGED
@@ -1,27 +1,19 @@
1
- import { createPrompt, useState, useKeypress, usePrefix, usePagination, useRef, useMemo, isEnterKey, isUpKey, isDownKey, isNumberKey, Separator, } from '@inquirer/core';
1
+ import { createPrompt, useState, useKeypress, usePrefix, usePagination, useRef, useMemo, isEnterKey, isUpKey, isDownKey, isNumberKey, Separator, makeTheme, } from '@inquirer/core';
2
2
  import chalk from 'chalk';
3
3
  import figures from 'figures';
4
4
  import ansiEscapes from 'ansi-escapes';
5
+ const selectTheme = {
6
+ icon: { cursor: figures.pointer },
7
+ style: { disabled: (text) => chalk.dim(`- ${text}`) },
8
+ };
5
9
  function isSelectable(item) {
6
10
  return !Separator.isSeparator(item) && !item.disabled;
7
11
  }
8
- function renderItem({ item, isActive }) {
9
- if (Separator.isSeparator(item)) {
10
- return ` ${item.separator}`;
11
- }
12
- const line = item.name || item.value;
13
- if (item.disabled) {
14
- const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
15
- return chalk.dim(`- ${line} ${disabledLabel}`);
16
- }
17
- const color = isActive ? chalk.cyan : (x) => x;
18
- const prefix = isActive ? figures.pointer : ` `;
19
- return color(`${prefix} ${line}`);
20
- }
21
12
  export default createPrompt((config, done) => {
22
13
  const { choices: items, loop = true, pageSize = 7 } = config;
23
14
  const firstRender = useRef(true);
24
- const prefix = usePrefix();
15
+ const theme = makeTheme(selectTheme, config.theme);
16
+ const prefix = usePrefix({ theme });
25
17
  const [status, setStatus] = useState('pending');
26
18
  const bounds = useMemo(() => {
27
19
  const first = items.findIndex(isSelectable);
@@ -64,21 +56,37 @@ export default createPrompt((config, done) => {
64
56
  }
65
57
  }
66
58
  });
67
- const message = chalk.bold(config.message);
59
+ const message = theme.style.message(config.message);
68
60
  let helpTip;
69
61
  if (firstRender.current && items.length <= pageSize) {
70
62
  firstRender.current = false;
71
- helpTip = chalk.dim('(Use arrow keys)');
63
+ helpTip = theme.style.help('(Use arrow keys)');
72
64
  }
73
65
  const page = usePagination({
74
66
  items,
75
67
  active,
76
- renderItem,
68
+ renderItem({ item, isActive }) {
69
+ if (Separator.isSeparator(item)) {
70
+ return ` ${item.separator}`;
71
+ }
72
+ const line = item.name || item.value;
73
+ if (item.disabled) {
74
+ const disabledLabel = typeof item.disabled === 'string' ? item.disabled : '(disabled)';
75
+ return theme.style.disabled(`${line} ${disabledLabel}`);
76
+ }
77
+ const color = isActive ? theme.style.highlight : (x) => x;
78
+ const cursor = isActive ? theme.icon.cursor : ` `;
79
+ return color(`${cursor} ${line}`);
80
+ },
77
81
  pageSize,
78
82
  loop,
83
+ theme,
79
84
  });
80
85
  if (status === 'done') {
81
- return `${prefix} ${message} ${chalk.cyan(selectedChoice.name || selectedChoice.value)}`;
86
+ const answer = selectedChoice.name ||
87
+ // TODO: Could we enforce that at the type level? Name should be defined for non-string values.
88
+ String(selectedChoice.value);
89
+ return `${prefix} ${message} ${theme.style.answer(answer)}`;
82
90
  }
83
91
  const choiceDescription = selectedChoice.description
84
92
  ? `\n${selectedChoice.description}`
package/dist/esm/types/index.d.mts CHANGED
@@ -6,12 +6,32 @@ type Choice<Value> = {
6
6
  disabled?: boolean | string;
7
7
  type?: never;
8
8
  };
9
- declare const _default: <Value extends unknown>(config: {
10
- message: string | Promise<string> | (() => Promise<string>);
9
+ declare const _default: <Value>(config: {
10
+ message: string;
11
11
  choices: readonly (Separator | Choice<Value>)[];
12
12
  pageSize?: number | undefined;
13
13
  loop?: boolean | undefined;
14
- default?: Value | undefined;
14
+ default?: unknown;
15
+ theme?: {
16
+ icon?: {
17
+ cursor?: string | undefined;
18
+ } | undefined;
19
+ style?: {
20
+ disabled?: {} | undefined;
21
+ answer?: {} | undefined;
22
+ message?: {} | undefined;
23
+ error?: {} | undefined;
24
+ defaultAnswer?: {} | undefined;
25
+ help?: {} | undefined;
26
+ highlight?: {} | undefined;
27
+ key?: {} | undefined;
28
+ } | undefined;
29
+ prefix?: string | undefined;
30
+ spinner?: {
31
+ interval?: number | undefined;
32
+ frames?: (string | undefined)[] | undefined;
33
+ } | undefined;
34
+ } | undefined;
15
35
  }, context?: import("@inquirer/type").Context | undefined) => import("@inquirer/type").CancelablePromise<Value>;
16
36
  export default _default;
17
37
  export { Separator };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inquirer/select",
3
- "version": "1.3.3",
3
+ "version": "2.0.0",
4
4
  "description": "Inquirer select/list prompt",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "typings": "./dist/cjs/types/index.d.ts",
@@ -54,14 +54,14 @@
54
54
  "license": "MIT",
55
55
  "homepage": "https://github.com/SBoudrias/Inquirer.js/blob/master/packages/select/README.md",
56
56
  "dependencies": {
57
- "@inquirer/core": "^6.0.0",
58
- "@inquirer/type": "^1.1.6",
57
+ "@inquirer/core": "^7.0.0",
58
+ "@inquirer/type": "^1.2.0",
59
59
  "ansi-escapes": "^4.3.2",
60
60
  "chalk": "^4.1.2",
61
61
  "figures": "^3.2.0"
62
62
  },
63
63
  "devDependencies": {
64
- "@inquirer/testing": "^2.1.10"
64
+ "@inquirer/testing": "^2.1.11"
65
65
  },
66
66
  "scripts": {
67
67
  "tsc": "yarn run tsc:esm && yarn run tsc:cjs",
@@ -72,7 +72,7 @@
72
72
  "access": "public"
73
73
  },
74
74
  "engines": {
75
- "node": ">=14.18.0"
75
+ "node": ">=18"
76
76
  },
77
77
  "exports": {
78
78
  ".": {
@@ -86,5 +86,5 @@
86
86
  }
87
87
  }
88
88
  },
89
- "gitHead": "4dee2b11d89a7c8a698c9eeda546ba8092b84f64"
89
+ "gitHead": "44016a40bc9e93455dfdb9fa6c25c27c1c109bd3"
90
90
  }