From 1239d154bb9b8fb8c418df1e5db99ad4e0bcf83f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20L=C3=B6fgren?=
 <516549+ulken@users.noreply.github.com>
Date: Tue, 21 Feb 2023 23:57:34 +0100
Subject: [PATCH] add active style for default selected

---
 packages/core/src/prompts/select-key.ts | 5 +++--
 packages/prompts/src/index.ts           | 8 ++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/prompts/select-key.ts b/packages/core/src/prompts/select-key.ts
index 6eaec55..f71768b 100644
--- a/packages/core/src/prompts/select-key.ts
+++ b/packages/core/src/prompts/select-key.ts
@@ -11,11 +11,12 @@ export default class SelectKeyPrompt<T extends { value: any }> extends Prompt {
 		super(opts, false);
 
 		this.options = opts.options;
-		const keys = opts.options.map(v => v.value[0]);
+		const keys = opts.options.map(({ value: [initial] }) => initial);
+		this.cursor = Math.max(keys.indexOf(opts.initialValue), 0);
 
 		this.on('key', (key) => {
 			if (!keys.includes(key)) return;
-			const value = opts.options.find(v => v.value[0] === key);
+			const value = opts.options.find(({ value: [initial] }) => initial === key);
 			if (value) {
 				this.value = value.value;
 				this.state = 'submit';
diff --git a/packages/prompts/src/index.ts b/packages/prompts/src/index.ts
index 2c39168..1e6bf0f 100644
--- a/packages/prompts/src/index.ts
+++ b/packages/prompts/src/index.ts
@@ -222,13 +222,17 @@ export const selectKey = <Options extends Option<Value>[], Value extends string>
 ) => {
 	const opt = (
 		option: Options[number],
-		state: 'inactive' | 'selected' | 'cancelled' = 'inactive'
+		state: 'inactive' | 'active' | 'selected' | 'cancelled' = 'inactive'
 	) => {
 		const label = option.label ?? String(option.value);
 		if (state === 'selected') {
 			return `${color.dim(label)}`;
 		} else if (state === 'cancelled') {
 			return `${color.strikethrough(color.dim(label))}`;
+		} else if (state === 'active') {
+			return `${color.bgCyan(color.gray(` ${option.value} `))} ${label} ${
+				option.hint ? color.dim(`(${option.hint})`) : ''
+			}`;
 		}
 		return `${color.gray(color.bgWhite(color.inverse(` ${option.value} `)))} ${label} ${
 			option.hint ? color.dim(`(${option.hint})`) : ''
@@ -253,7 +257,7 @@ export const selectKey = <Options extends Option<Value>[], Value extends string>
 					)}`;
 				default: {
 					return `${title}${color.cyan(S_BAR)}  ${this.options
-						.map((option, i) => opt(option))
+						.map((option, i) => opt(option, i === this.cursor ? 'active' : 'inactive'))
 						.join(`\n${color.cyan(S_BAR)}  `)}\n${color.cyan(S_BAR_END)}\n`;
 				}
 			}
-- 
2.51.2