Feat (select): Allow default config in Select prompt

packages/select/README.md

@@ -51,6 +51,7 @@ const answer = await select({
 | -------- | ---------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | message  | `string`                                                                                                   | yes      | The question to ask                                                                                                                                                                                                                                                                 |
 | choices  | `Array<{ value: string, name?: string, description?: string, disabled?: boolean \| string } \| Separator>` | yes      | List of the available choices. The `value` will be returned as the answer, and used as display if no `name` is defined. Choices who're `disabled` will be displayed, but not selectable. The `description` will be displayed under the prompt when the cursor land over the choice. |
+| 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.                                                                                                                                                   |
 

packages/select/select.test.mts

@@ -452,4 +452,27 @@ describe('select prompt', () => {
 
     await expect(answer).resolves.toEqual('pineapple');
   });
+
+  it('Allows setting a default value', async () => {
+    const { answer, events, getScreen } = await render(select, {
+      message: 'Select a number',
+      choices: numberedChoices,
+      default: numberedChoices[3].value,
+    });
+
+    expect(getScreen()).toMatchInlineSnapshot(`
+        "? Select a number (Use arrow keys)
+          1
+          2
+          3
+        ❯ 4
+          5
+          6
+          7
+        (Use arrow keys to reveal more choices)"
+      `);
+
+    events.keypress('enter');
+    await expect(answer).resolves.toEqual(4);
+  });
 });

packages/select/src/index.mts

@@ -30,6 +30,7 @@
   choices: ReadonlyArray<Choice<Value> | Separator>;
   pageSize?: number;
   loop?: boolean;
+  default?: Value;
 }>;
 
 type Item<Value> = Separator | Choice<Value>;
@@ -67,7 +68,7 @@
 
     const bounds = useMemo(() => {
       const first = items.findIndex(isSelectable);
       // TODO: Replace with `findLastIndex` when it's available.
       const last = items.length - 1 - [...items].reverse().findIndex(isSelectable);
       if (first < 0)
         throw new Error(
@@ -76,7 +77,16 @@
       return { first, last };
     }, [items]);
 
-    const [active, setActive] = useState(bounds.first);
+    const defaultItemIndex = useMemo(() => {
+      if (!('default' in config)) return -1;
+      return items.findIndex(
+        (item) => isSelectable(item) && item.value === config.default,
+      );
+    }, [config.default, items]);
+
+    const [active, setActive] = useState(
+      defaultItemIndex === -1 ? bounds.first : defaultItemIndex,
+    );
 
     // Safe to assume the cursor position always point to a Choice.
     const selectedChoice = items[active] as Choice<Value>;