Feature(@inquirer/select): new theme option to display each choice index (#1687)

Signed-off-by: ATAlgaba <[email protected]>
Co-authored-by: Simon Boudrias <[email protected]>

Author: IhToN

packages/select/README.md

@@ -144,6 +144,7 @@ type Theme = {
     cursor: string;
   };
   helpMode: 'always' | 'never' | 'auto';
+  indexMode: 'hidden' | 'number';
 };
 ```
 
@@ -153,6 +154,13 @@ type Theme = {
 - `always`: The help tips will always show and never hide.
 - `never`: The help tips will never show.
 
+### `theme.indexMode`
+
+Controls how indices are displayed before each choice:
+
+- `hidden` (default): No indices are shown
+- `number`: Display a number before each choice (e.g. "1. Option A")
+
 # License
 
 Copyright (c) 2023 Simon Boudrias (twitter: [@vaxilart](https://twitter.com/Vaxilart))<br/>

packages/select/select.test.ts

@@ -822,4 +822,27 @@ describe('select prompt', () => {
       expect(getScreen()).toMatchInlineSnapshot('"✔ Select a number 2"');
     });
   });
+
+  it('Displays the element index', async () => {
+    const { answer, events, getScreen } = await render(select, {
+      message: 'Select a number',
+      choices: numberedChoices,
+      theme: { indexMode: 'number' },
+    });
+
+    expect(getScreen()).toMatchInlineSnapshot(`
+      "? Select a number
+      ❯ 1. 1
+        2. 2
+        3. 3
+        4. 4
+        5. 5
+        6. 6
+        7. 7
+      (Use arrow keys to reveal more choices)"
+    `);
+
+    events.keypress('enter');
+    await expect(answer).resolves.toEqual(1);
+  });
 });

packages/select/src/index.ts

@@ -30,6 +30,7 @@ type SelectTheme = {
     description: (text: string) => string;
   };
   helpMode: 'always' | 'never' | 'auto';
+  indexMode: 'hidden' | 'number';
 };
 
 const selectTheme: SelectTheme = {
@@ -39,6 +40,7 @@ const selectTheme: SelectTheme = {
     description: (text: string) => colors.cyan(text),
   },
   helpMode: 'auto',
+  indexMode: 'hidden',
 };
 
 type Choice<Value> = {
@@ -222,20 +224,21 @@ export default createPrompt(
     const page = usePagination({
       items,
       active,
-      renderItem({ item, isActive }) {
+      renderItem({ item, isActive, index }) {
         if (Separator.isSeparator(item)) {
           return ` ${item.separator}`;
         }
 
+        const indexLabel = theme.indexMode === 'number' ? `${index + 1}. ` : '';
         if (item.disabled) {
           const disabledLabel =
             typeof item.disabled === 'string' ? item.disabled : '(disabled)';
-          return theme.style.disabled(`${item.name} ${disabledLabel}`);
+          return theme.style.disabled(`${indexLabel}${item.name} ${disabledLabel}`);
         }
 
         const color = isActive ? theme.style.highlight : (x: string) => x;
         const cursor = isActive ? theme.icon.cursor : ` `;
-        return color(`${cursor} ${item.name}`);
+        return color(`${cursor} ${indexLabel}${item.name}`);
       },
       pageSize,
       loop,