fix(#44): support booleans and numbers in select values

bombshell-dev · Feb 16, 2023 · 493c592 · 493c592
1 parent fe777cc
commit 493c592
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/bright-eagles-happen.md b/.changeset/bright-eagles-happen.md
@@ -0,0 +1,5 @@
+---
+"@clack/prompts": minor
+---
+
+Improve types for select/multiselect prompts. Numbers and booleans are now supported as the `value` option.
diff --git a/packages/prompts/src/index.ts b/packages/prompts/src/index.ts
@@ -105,32 +105,33 @@ export const confirm = (opts: ConfirmOptions) => {
   }).prompt() as Promise<boolean | symbol>;
 };
 
-interface Option<Value extends Readonly<string>> {
+type Primitive = Readonly<string | boolean | number>;
+interface Option<Value extends Primitive> {
   value: Value;
   label?: string;
   hint?: string;
 }
-export interface SelectOptions<Options extends Option<Value>[], Value extends Readonly<string>> {
+export interface SelectOptions<Options extends Option<Value>[], Value extends Primitive> {
   message: string;
   options: Options;
   initialValue?: Options[number]["value"];
 }
 
-export interface MultiSelectOptions<Options extends Option<Value>[], Value extends Readonly<string>> {
+export interface MultiSelectOptions<Options extends Option<Value>[], Value extends Primitive> {
   message: string;
   options: Options;
   initialValue?: Options[number]['value'][];
   cursorAt?: Options[number]["value"]
 }
 
-export const select = <Options extends Option<Value>[], Value extends Readonly<string>>(
+export const select = <Options extends Option<Value>[], Value extends Primitive>(
   opts: SelectOptions<Options, Value>
 ) => {
   const opt = (
     option: Options[number],
     state: "inactive" | "active" | "selected" | "cancelled"
   ) => {
-    const label = option.label ?? option.value;
+    const label = option.label ?? String(option.value);
     if (state === "active") {
       return `${color.green("●")} ${label} ${
         option.hint ? color.dim(`(${option.hint})`) : ""
@@ -174,9 +175,9 @@ export const select = <Options extends Option<Value>[], Value extends Readonly<s
   }).prompt() as Promise<Options[number]['value'] | symbol>;
 };
 
-export const multiselect = <Options extends Option<Value>[], Value extends Readonly<string>>(opts: MultiSelectOptions<Options, Value>) => {
+export const multiselect = <Options extends Option<Value>[], Value extends Primitive>(opts: MultiSelectOptions<Options, Value>) => {
     const opt = (option: Options[number], state: 'inactive' | 'active' | 'selected' | 'active-selected' | 'submitted' | 'cancelled') => {
-        const label =  option.label ?? option.value;
+        const label =  option.label ?? String(option.value);
         if (state === 'active') {
             return `${color.cyan('◻')} ${label} ${option.hint ? color.dim(`(${option.hint})`) : ''}`
         } else if (state === 'selected') {