@shopify/cli-kit 3.31.1 → 3.32.1

package/dist/private/node/ui/components/FullScreen.js

@@ -1,4 +1,4 @@
-import { Box } from 'ink';
+import { Box, useStdout } from 'ink';
 import React, { useEffect, useState } from 'react';
 /**
  * `FullScreen` renders all output in a new buffer and makes it full screen. This is useful when:
@@ -6,24 +6,26 @@ import React, { useEffect, useState } from 'react';
  * - You want to respond to the resize event of the terminal. Whenever the user resizes their terminal window the output's height and width will be recalculated and re-rendered properly.
  */
 const FullScreen = ({ children }) => {
+    const { stdout } = useStdout();
+    const standardOutput = stdout;
     const [size, setSize] = useState({
-        columns: process.stdout.columns,
-        rows: process.stdout.rows,
+        columns: standardOutput.columns,
+        rows: standardOutput.rows,
     });
     useEffect(() => {
         function onResize() {
             setSize({
-                columns: process.stdout.columns,
-                rows: process.stdout.rows,
+                columns: standardOutput.columns,
+                rows: standardOutput.rows,
             });
         }
-        process.stdout.on('resize', onResize);
+        standardOutput.on('resize', onResize);
         // switch to an alternate buffer
-        process.stdout.write('\u001B[?1049h');
+        standardOutput.write('\u001B[?1049h');
         return () => {
-            process.stdout.off('resize', onResize);
+            standardOutput.off('resize', onResize);
             // switch back to the main buffer
-            process.stdout.write('\u001B[?1049l');
+            standardOutput.write('\u001B[?1049l');
         };
     }, []);
     return (React.createElement(Box, { width: size.columns, height: size.rows }, children));

package/dist/private/node/ui/components/FullScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullScreen.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/FullScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAEhD;;;;GAIG;AACH,MAAM,UAAU,GAAa,CAAC,EAAC,QAAQ,EAAC,EAAe,EAAE;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;QAC/B,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO;QAC/B,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;KAC1B,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,QAAQ;YACf,OAAO,CAAC;gBACN,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO;gBAC/B,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;aAC1B,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QACrC,gCAAgC;QAChC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;QACrC,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;YACtC,iCAAiC;YACjC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;QACvC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,IACxC,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA","sourcesContent":["import {Box} from 'ink'\nimport React, {useEffect, useState} from 'react'\n\n/**\n * `FullScreen` renders all output in a new buffer and makes it full screen. This is useful when:\n * - You want to preserve terminal history. `ink` [normally clears the terminal history](https://github.com/vadimdemedes/ink/issues/382) if the rendered output is taller than the terminal window. By rendering in a separate buffer history will be preserved and will be visible after pressing `Ctrl+C`.\n * - You want to respond to the resize event of the terminal. Whenever the user resizes their terminal window the output's height and width will be recalculated and re-rendered properly.\n */\nconst FullScreen: React.FC = ({children}): JSX.Element => {\n  const [size, setSize] = useState({\n    columns: process.stdout.columns,\n    rows: process.stdout.rows,\n  })\n\n  useEffect(() => {\n    function onResize() {\n      setSize({\n        columns: process.stdout.columns,\n        rows: process.stdout.rows,\n      })\n    }\n\n    process.stdout.on('resize', onResize)\n    // switch to an alternate buffer\n    process.stdout.write('\\u001B[?1049h')\n    return () => {\n      process.stdout.off('resize', onResize)\n      // switch back to the main buffer\n      process.stdout.write('\\u001B[?1049l')\n    }\n  }, [])\n\n  return (\n    <Box width={size.columns} height={size.rows}>\n      {children}\n    </Box>\n  )\n}\n\nexport default FullScreen\n"]}
+{"version":3,"file":"FullScreen.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/FullScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,KAAK,CAAA;AAClC,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAEhD;;;;GAIG;AACH,MAAM,UAAU,GAAa,CAAC,EAAC,QAAQ,EAAC,EAAe,EAAE;IACvD,MAAM,EAAC,MAAM,EAAC,GAAG,SAAS,EAAE,CAAA;IAC5B,MAAM,cAAc,GAAG,MAAO,CAAA;IAE9B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;QAC/B,OAAO,EAAE,cAAc,CAAC,OAAO;QAC/B,IAAI,EAAE,cAAc,CAAC,IAAI;KAC1B,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,QAAQ;YACf,OAAO,CAAC;gBACN,OAAO,EAAE,cAAc,CAAC,OAAO;gBAC/B,IAAI,EAAE,cAAc,CAAC,IAAI;aAC1B,CAAC,CAAA;QACJ,CAAC;QAED,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QACrC,gCAAgC;QAChC,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;QACrC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;YACtC,iCAAiC;YACjC,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;QACvC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,IACxC,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA","sourcesContent":["import {Box, useStdout} from 'ink'\nimport React, {useEffect, useState} from 'react'\n\n/**\n * `FullScreen` renders all output in a new buffer and makes it full screen. This is useful when:\n * - You want to preserve terminal history. `ink` [normally clears the terminal history](https://github.com/vadimdemedes/ink/issues/382) if the rendered output is taller than the terminal window. By rendering in a separate buffer history will be preserved and will be visible after pressing `Ctrl+C`.\n * - You want to respond to the resize event of the terminal. Whenever the user resizes their terminal window the output's height and width will be recalculated and re-rendered properly.\n */\nconst FullScreen: React.FC = ({children}): JSX.Element => {\n  const {stdout} = useStdout()\n  const standardOutput = stdout!\n\n  const [size, setSize] = useState({\n    columns: standardOutput.columns,\n    rows: standardOutput.rows,\n  })\n\n  useEffect(() => {\n    function onResize() {\n      setSize({\n        columns: standardOutput.columns,\n        rows: standardOutput.rows,\n      })\n    }\n\n    standardOutput.on('resize', onResize)\n    // switch to an alternate buffer\n    standardOutput.write('\\u001B[?1049h')\n    return () => {\n      standardOutput.off('resize', onResize)\n      // switch back to the main buffer\n      standardOutput.write('\\u001B[?1049l')\n    }\n  }, [])\n\n  return (\n    <Box width={size.columns} height={size.rows}>\n      {children}\n    </Box>\n  )\n}\n\nexport default FullScreen\n"]}

package/dist/private/node/ui/components/Link.test.js

@@ -1,22 +1,22 @@
 import { Link } from './Link.js';
-import { renderString } from '../../ui.js';
 import { describe, expect, test } from 'vitest';
 import React from 'react';
+import { render } from 'ink-testing-library';
 describe('Link', async () => {
     test("renders correctly with a fallback for terminals that don't support hyperlinks", async () => {
         const link = {
             url: 'https://example.com',
             label: 'Example',
         };
-        const { output } = renderString(React.createElement(Link, { ...link }));
-        expect(output).toMatchInlineSnapshot('"Example ( https://example.com )"');
+        const { lastFrame } = render(React.createElement(Link, { ...link }));
+        expect(lastFrame()).toMatchInlineSnapshot('"Example ( https://example.com )"');
     });
     test("it doesn't render a fallback if only url is passed", async () => {
         const link = {
             url: 'https://example.com',
         };
-        const { output } = renderString(React.createElement(Link, { ...link }));
-        expect(output).toMatchInlineSnapshot('"https://example.com"');
+        const { lastFrame } = render(React.createElement(Link, { ...link }));
+        expect(lastFrame()).toMatchInlineSnapshot('"https://example.com"');
     });
 });
 //# sourceMappingURL=Link.test.js.map

package/dist/private/node/ui/components/Link.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Link.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAQ,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;IAC1B,IAAI,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;QAC/F,MAAM,IAAI,GAAG;YACX,GAAG,EAAE,qBAAqB;YAC1B,KAAK,EAAE,SAAS;SACjB,CAAA;QAED,MAAM,EAAC,MAAM,EAAC,GAAG,YAAY,CAAC,oBAAC,IAAI,OAAK,IAAI,GAAI,CAAC,CAAA;QAEjD,MAAM,CAAC,MAAM,CAAC,CAAC,qBAAqB,CAAC,4CAA4C,CAAC,CAAA;IACpF,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG;YACX,GAAG,EAAE,qBAAqB;SAC3B,CAAA;QAED,MAAM,EAAC,MAAM,EAAC,GAAG,YAAY,CAAC,oBAAC,IAAI,OAAK,IAAI,GAAI,CAAC,CAAA;QAEjD,MAAM,CAAC,MAAM,CAAC,CAAC,qBAAqB,CAAC,uBAAuB,CAAC,CAAA;IAC/D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Link} from './Link.js'\nimport {renderString} from '../../ui.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\n\ndescribe('Link', async () => {\n  test(\"renders correctly with a fallback for terminals that don't support hyperlinks\", async () => {\n    const link = {\n      url: 'https://example.com',\n      label: 'Example',\n    }\n\n    const {output} = renderString(<Link {...link} />)\n\n    expect(output).toMatchInlineSnapshot('\"Example \u001b[2m( https://example.com )\u001b[22m\"')\n  })\n\n  test(\"it doesn't render a fallback if only url is passed\", async () => {\n    const link = {\n      url: 'https://example.com',\n    }\n\n    const {output} = renderString(<Link {...link} />)\n\n    expect(output).toMatchInlineSnapshot('\"https://example.com\"')\n  })\n})\n"]}
+{"version":3,"file":"Link.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Link.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;IAC1B,IAAI,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;QAC/F,MAAM,IAAI,GAAG;YACX,GAAG,EAAE,qBAAqB;YAC1B,KAAK,EAAE,SAAS;SACjB,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,IAAI,OAAK,IAAI,GAAI,CAAC,CAAA;QAE9C,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4CAA4C,CAAC,CAAA;IACzF,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG;YACX,GAAG,EAAE,qBAAqB;SAC3B,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,IAAI,OAAK,IAAI,GAAI,CAAC,CAAA;QAE9C,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,uBAAuB,CAAC,CAAA;IACpE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Link} from './Link.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('Link', async () => {\n  test(\"renders correctly with a fallback for terminals that don't support hyperlinks\", async () => {\n    const link = {\n      url: 'https://example.com',\n      label: 'Example',\n    }\n\n    const {lastFrame} = render(<Link {...link} />)\n\n    expect(lastFrame()).toMatchInlineSnapshot('\"Example \u001b[2m( https://example.com )\u001b[22m\"')\n  })\n\n  test(\"it doesn't render a fallback if only url is passed\", async () => {\n    const link = {\n      url: 'https://example.com',\n    }\n\n    const {lastFrame} = render(<Link {...link} />)\n\n    expect(lastFrame()).toMatchInlineSnapshot('\"https://example.com\"')\n  })\n})\n"]}

package/dist/private/node/ui/components/List.test.js

@@ -1,8 +1,8 @@
 import { List } from './List.js';
-import { renderString } from '../../ui.js';
 import { unstyled } from '../../../../output.js';
 import { describe, expect, test } from 'vitest';
 import React from 'react';
+import { render } from 'ink-testing-library';
 describe('List', async () => {
     test('renders unordered items', async () => {
         const options = {
@@ -10,8 +10,8 @@ describe('List', async () => {
             items: ['Item 1', 'Item 2', 'Item 3'],
             ordered: false,
         };
-        const { output } = renderString(React.createElement(List, { ...options }));
-        expect(unstyled(output)).toMatchInlineSnapshot(`
+        const { lastFrame } = render(React.createElement(List, { ...options }));
+        expect(unstyled(lastFrame())).toMatchInlineSnapshot(`
       "List title
         • Item 1
         • Item 2
@@ -23,8 +23,8 @@ describe('List', async () => {
             items: ['Item 1', 'Item 2', 'Item 3'],
             ordered: true,
         };
-        const { output } = renderString(React.createElement(List, { ...options }));
-        expect(unstyled(output)).toMatchInlineSnapshot(`
+        const { lastFrame } = render(React.createElement(List, { ...options }));
+        expect(unstyled(lastFrame())).toMatchInlineSnapshot(`
       "  1. Item 1
         2. Item 2
         3. Item 3"

package/dist/private/node/ui/components/List.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/List.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAQ,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;IAC1B,IAAI,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;YACrC,OAAO,EAAE,KAAK;SACf,CAAA;QAED,MAAM,EAAC,MAAM,EAAC,GAAG,YAAY,CAAC,oBAAC,IAAI,OAAK,OAAO,GAAI,CAAC,CAAA;QAEpD,MAAM,CAAC,QAAQ,CAAC,MAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;KAK/C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAA;QAED,MAAM,EAAC,MAAM,EAAC,GAAG,YAAY,CAAC,oBAAC,IAAI,OAAK,OAAO,GAAI,CAAC,CAAA;QAEpD,MAAM,CAAC,QAAQ,CAAC,MAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;KAI/C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {List} from './List.js'\nimport {renderString} from '../../ui.js'\nimport {unstyled} from '../../../../output.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\n\ndescribe('List', async () => {\n  test('renders unordered items', async () => {\n    const options = {\n      title: 'List title',\n      items: ['Item 1', 'Item 2', 'Item 3'],\n      ordered: false,\n    }\n\n    const {output} = renderString(<List {...options} />)\n\n    expect(unstyled(output!)).toMatchInlineSnapshot(`\n      \"List title\n        • Item 1\n        • Item 2\n        • Item 3\"\n    `)\n  })\n\n  test('renders ordered items', async () => {\n    const options = {\n      items: ['Item 1', 'Item 2', 'Item 3'],\n      ordered: true,\n    }\n\n    const {output} = renderString(<List {...options} />)\n\n    expect(unstyled(output!)).toMatchInlineSnapshot(`\n      \"  1. Item 1\n        2. Item 2\n        3. Item 3\"\n    `)\n  })\n})\n"]}
+{"version":3,"file":"List.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/List.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;IAC1B,IAAI,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;YACrC,OAAO,EAAE,KAAK;SACf,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,IAAI,OAAK,OAAO,GAAI,CAAC,CAAA;QAEjD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;KAKpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,IAAI,OAAK,OAAO,GAAI,CAAC,CAAA;QAEjD,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;KAIpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {List} from './List.js'\nimport {unstyled} from '../../../../output.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('List', async () => {\n  test('renders unordered items', async () => {\n    const options = {\n      title: 'List title',\n      items: ['Item 1', 'Item 2', 'Item 3'],\n      ordered: false,\n    }\n\n    const {lastFrame} = render(<List {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"List title\n        • Item 1\n        • Item 2\n        • Item 3\"\n    `)\n  })\n\n  test('renders ordered items', async () => {\n    const options = {\n      items: ['Item 1', 'Item 2', 'Item 3'],\n      ordered: true,\n    }\n\n    const {lastFrame} = render(<List {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"  1. Item 1\n        2. Item 2\n        3. Item 3\"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/SelectInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface Props<T> {
     items: Item<T>[];
-    onSelect: (value: T) => void;
+    onChange: (item: Item<T>) => void;
 }
 export interface Item<T> {
     label: string;
@@ -9,4 +9,4 @@ export interface Item<T> {
     key?: string;
     group?: string;
 }
-export default function SelectInput<T>({ items, onSelect }: React.PropsWithChildren<Props<T>>): JSX.Element | null;
+export default function SelectInput<T>({ items, onChange }: React.PropsWithChildren<Props<T>>): JSX.Element | null;

package/dist/private/node/ui/components/SelectInput.js

@@ -1,9 +1,8 @@
-import { isTruthy } from '../../../../environment/utilities.js';
 import { isEqual } from '../../../../public/common/lang.js';
 import { groupBy } from '../../../../public/common/collection.js';
 import { mapValues } from '../../../../public/common/object.js';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Box, Text, useApp, useInput } from 'ink';
+import { Box, useInput, Text } from 'ink';
 function groupItems(items) {
     let index = 0;
     return mapValues(groupBy(items, 'group'), (groupItems) => groupItems.map((groupItem) => {
@@ -12,53 +11,46 @@ function groupItems(items) {
         return item;
     }));
 }
-export default function SelectInput({ items, onSelect }) {
+export default function SelectInput({ items, onChange }) {
     const [inputStack, setInputStack] = useState(null);
     const [inputTimeout, setInputTimeout] = useState(null);
     const [selectedIndex, setSelectedIndex] = useState(0);
     const keys = useRef(new Set(items.map((item) => item.key)));
-    const { exit: unmountInk } = useApp();
     const groupedItems = groupItems(items);
+    const groupedItemsValues = Object.values(groupedItems).flat();
     const groupTitles = Object.keys(groupedItems);
     const previousItems = useRef(items);
+    const changeSelection = useCallback((index) => {
+        const groupedItem = groupedItemsValues.find((item) => item.index === index);
+        setSelectedIndex(index);
+        onChange(items.find((item) => item.value === groupedItem.value));
+    }, [items]);
     // reset index when items change
     useEffect(() => {
         if (!isEqual(previousItems.current.map((item) => item.value), items.map((item) => item.value))) {
-            setSelectedIndex(0);
+            changeSelection(0);
         }
         previousItems.current = items;
     }, [items]);
     const handleInput = useCallback((input, key) => {
-        if (input === 'c' && key.ctrl) {
-            // Exceptions being throw in these hooks aren't being caught by our errorHandler.
-            // See also how we handle exceptions in CouncurrentOutput for reference.
-            process.exit(1);
-        }
         const parsedInput = parseInt(input, 10);
         if (parsedInput !== 0 && parsedInput <= items.length + 1) {
-            setSelectedIndex(parsedInput - 1);
+            changeSelection(parsedInput - 1);
         }
         else if (keys.current.has(input)) {
-            const index = items.findIndex((item) => item.key === input);
-            if (index !== -1) {
-                setSelectedIndex(index);
+            const groupedItem = groupedItemsValues.find((item) => item.key === input);
+            if (groupedItem !== undefined) {
+                changeSelection(groupedItem.index);
             }
         }
         if (key.upArrow) {
             const lastIndex = items.length - 1;
-            setSelectedIndex(selectedIndex === 0 ? lastIndex : selectedIndex - 1);
+            changeSelection(selectedIndex === 0 ? lastIndex : selectedIndex - 1);
         }
         else if (key.downArrow) {
-            setSelectedIndex(selectedIndex === items.length - 1 ? 0 : selectedIndex + 1);
-        }
-        else if (key.return) {
-            onSelect(items[selectedIndex].value);
-            // This is a workaround needed because Ink behaves differently in CI when
-            // unmounting. See https://github.com/vadimdemedes/ink/pull/266
-            if (!isTruthy(process.env.CI))
-                unmountInk();
+            changeSelection(selectedIndex === items.length - 1 ? 0 : selectedIndex + 1);
         }
-    }, [selectedIndex, items, onSelect]);
+    }, [selectedIndex, items]);
     useInput((input, key) => {
         if (input.length > 0 && Object.values(key).every((value) => value === false)) {
             const newInputStack = inputStack === null ? input : inputStack + input;

package/dist/private/node/ui/components/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/SelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {isTruthy} from '../../../../environment/utilities.js'\nimport {isEqual} from '../../../../public/common/lang.js'\nimport {groupBy} from '../../../../public/common/collection.js'\nimport {mapValues} from '../../../../public/common/object.js'\nimport React, {useState, useEffect, useRef, useCallback} from 'react'\nimport {Box, Key, Text, useApp, useInput} from 'ink'\n\nexport interface Props<T> {\n  items: Item<T>[]\n  onSelect: (value: T) => void\n}\n\nexport interface Item<T> {\n  label: string\n  value: T\n  key?: string\n  group?: string\n}\n\nfunction groupItems<T>(items: Item<T>[]) {\n  let index = 0\n\n  return mapValues(groupBy(items, 'group'), (groupItems) =>\n    groupItems.map((groupItem) => {\n      const item = {...groupItem, key: groupItem.key ?? (index + 1).toString(), index}\n      index += 1\n      return item\n    }),\n  )\n}\n\nexport default function SelectInput<T>({items, onSelect}: React.PropsWithChildren<Props<T>>): JSX.Element | null {\n  const [inputStack, setInputStack] = useState<string | null>(null)\n  const [inputTimeout, setInputTimeout] = useState<NodeJS.Timeout | null>(null)\n  const [selectedIndex, setSelectedIndex] = useState(0)\n  const keys = useRef(new Set(items.map((item) => item.key)))\n  const {exit: unmountInk} = useApp()\n  const groupedItems = groupItems(items)\n  const groupTitles = Object.keys(groupedItems)\n\n  const previousItems = useRef<Item<T>[]>(items)\n\n  // reset index when items change\n  useEffect(() => {\n    if (\n      !isEqual(\n        previousItems.current.map((item) => item.value),\n        items.map((item) => item.value),\n      )\n    ) {\n      setSelectedIndex(0)\n    }\n\n    previousItems.current = items\n  }, [items])\n\n  const handleInput = useCallback(\n    (input: string, key: Key) => {\n      if (input === 'c' && key.ctrl) {\n        // Exceptions being throw in these hooks aren't being caught by our errorHandler.\n        // See also how we handle exceptions in CouncurrentOutput for reference.\n        process.exit(1)\n      }\n\n      const parsedInput = parseInt(input, 10)\n\n      if (parsedInput !== 0 && parsedInput <= items.length + 1) {\n        setSelectedIndex(parsedInput - 1)\n      } else if (keys.current.has(input)) {\n        const index = items.findIndex((item) => item.key === input)\n        if (index !== -1) {\n          setSelectedIndex(index)\n        }\n      }\n\n      if (key.upArrow) {\n        const lastIndex = items.length - 1\n\n        setSelectedIndex(selectedIndex === 0 ? lastIndex : selectedIndex - 1)\n      } else if (key.downArrow) {\n        setSelectedIndex(selectedIndex === items.length - 1 ? 0 : selectedIndex + 1)\n      } else if (key.return) {\n        onSelect(items[selectedIndex]!.value)\n        // This is a workaround needed because Ink behaves differently in CI when\n        // unmounting. See https://github.com/vadimdemedes/ink/pull/266\n        if (!isTruthy(process.env.CI)) unmountInk()\n      }\n    },\n    [selectedIndex, items, onSelect],\n  )\n\n  useInput((input, key) => {\n    if (input.length > 0 && Object.values(key).every((value) => value === false)) {\n      const newInputStack = inputStack === null ? input : inputStack + input\n\n      setInputStack(newInputStack)\n\n      if (inputTimeout !== null) {\n        clearTimeout(inputTimeout)\n      }\n\n      setInputTimeout(\n        setTimeout(() => {\n          handleInput(newInputStack, key)\n          setInputStack(null)\n          setInputTimeout(null)\n        }, 300),\n      )\n    } else {\n      handleInput(input, key)\n    }\n  })\n\n  return (\n    <Box flexDirection=\"column\">\n      {groupTitles.map((title) => {\n        const hasTitle = title !== 'undefined'\n\n        return (\n          <Box key={title} flexDirection=\"column\" marginTop={hasTitle ? 1 : 0}>\n            {hasTitle && (\n              <Box marginLeft={3}>\n                <Text bold>{title}</Text>\n              </Box>\n            )}\n            {groupedItems[title]!.map((item) => {\n              const isSelected = item.index === selectedIndex\n\n              return (\n                <Box key={item.key}>\n                  <Box marginRight={2}>{isSelected ? <Text color=\"cyan\">{`>`}</Text> : <Text> </Text>}</Box>\n\n                  <Text color={isSelected ? 'cyan' : undefined}>{`(${item.key}) ${item.label}`}</Text>\n                </Box>\n              )\n            })}\n          </Box>\n        )\n      })}\n\n      <Box marginTop={1} marginLeft={3}>\n        <Text dimColor>navigate with arrows, enter to select</Text>\n      </Box>\n    </Box>\n  )\n}\n"]}
+{"version":3,"file":"SelectInput.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/SelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {isEqual} from '../../../../public/common/lang.js'\nimport {groupBy} from '../../../../public/common/collection.js'\nimport {mapValues} from '../../../../public/common/object.js'\nimport React, {useState, useEffect, useRef, useCallback} from 'react'\nimport {Box, Key, useInput, Text} from 'ink'\n\nexport interface Props<T> {\n  items: Item<T>[]\n  onChange: (item: Item<T>) => void\n}\n\nexport interface Item<T> {\n  label: string\n  value: T\n  key?: string\n  group?: string\n}\n\nfunction groupItems<T>(items: Item<T>[]) {\n  let index = 0\n\n  return mapValues(groupBy(items, 'group'), (groupItems) =>\n    groupItems.map((groupItem) => {\n      const item = {...groupItem, key: groupItem.key ?? (index + 1).toString(), index}\n      index += 1\n      return item\n    }),\n  )\n}\n\nexport default function SelectInput<T>({items, onChange}: React.PropsWithChildren<Props<T>>): JSX.Element | null {\n  const [inputStack, setInputStack] = useState<string | null>(null)\n  const [inputTimeout, setInputTimeout] = useState<NodeJS.Timeout | null>(null)\n  const [selectedIndex, setSelectedIndex] = useState(0)\n  const keys = useRef(new Set(items.map((item) => item.key)))\n  const groupedItems = groupItems(items)\n  const groupedItemsValues = Object.values(groupedItems).flat()\n  const groupTitles = Object.keys(groupedItems)\n  const previousItems = useRef<Item<T>[]>(items)\n\n  const changeSelection = useCallback(\n    (index: number) => {\n      const groupedItem = groupedItemsValues.find((item) => item.index === index)!\n      setSelectedIndex(index)\n      onChange(items.find((item) => item.value === groupedItem.value)!)\n    },\n    [items],\n  )\n\n  // reset index when items change\n  useEffect(() => {\n    if (\n      !isEqual(\n        previousItems.current.map((item) => item.value),\n        items.map((item) => item.value),\n      )\n    ) {\n      changeSelection(0)\n    }\n\n    previousItems.current = items\n  }, [items])\n\n  const handleInput = useCallback(\n    (input: string, key: Key) => {\n      const parsedInput = parseInt(input, 10)\n\n      if (parsedInput !== 0 && parsedInput <= items.length + 1) {\n        changeSelection(parsedInput - 1)\n      } else if (keys.current.has(input)) {\n        const groupedItem = groupedItemsValues.find((item) => item.key === input)\n        if (groupedItem !== undefined) {\n          changeSelection(groupedItem.index)\n        }\n      }\n\n      if (key.upArrow) {\n        const lastIndex = items.length - 1\n\n        changeSelection(selectedIndex === 0 ? lastIndex : selectedIndex - 1)\n      } else if (key.downArrow) {\n        changeSelection(selectedIndex === items.length - 1 ? 0 : selectedIndex + 1)\n      }\n    },\n    [selectedIndex, items],\n  )\n\n  useInput((input, key) => {\n    if (input.length > 0 && Object.values(key).every((value) => value === false)) {\n      const newInputStack = inputStack === null ? input : inputStack + input\n\n      setInputStack(newInputStack)\n\n      if (inputTimeout !== null) {\n        clearTimeout(inputTimeout)\n      }\n\n      setInputTimeout(\n        setTimeout(() => {\n          handleInput(newInputStack, key)\n          setInputStack(null)\n          setInputTimeout(null)\n        }, 300),\n      )\n    } else {\n      handleInput(input, key)\n    }\n  })\n\n  return (\n    <Box flexDirection=\"column\">\n      {groupTitles.map((title) => {\n        const hasTitle = title !== 'undefined'\n\n        return (\n          <Box key={title} flexDirection=\"column\" marginTop={hasTitle ? 1 : 0}>\n            {hasTitle && (\n              <Box marginLeft={3}>\n                <Text bold>{title}</Text>\n              </Box>\n            )}\n            {groupedItems[title]!.map((item) => {\n              const isSelected = item.index === selectedIndex\n\n              return (\n                <Box key={item.key}>\n                  <Box marginRight={2}>{isSelected ? <Text color=\"cyan\">{`>`}</Text> : <Text> </Text>}</Box>\n\n                  <Text color={isSelected ? 'cyan' : undefined}>{`(${item.key}) ${item.label}`}</Text>\n                </Box>\n              )\n            })}\n          </Box>\n        )\n      })}\n\n      <Box marginTop={1} marginLeft={3}>\n        <Text dimColor>navigate with arrows, enter to select</Text>\n      </Box>\n    </Box>\n  )\n}\n"]}

package/dist/private/node/ui/components/SelectInput.test.js

@@ -1,13 +1,13 @@
 import SelectInput from './SelectInput.js';
-import { waitForInputsToBeReady, waitForChange, sendInput } from '../../../../testing/ui.js';
+import { waitForInputsToBeReady, sendInput } from '../../../../testing/ui.js';
 import { describe, expect, test, vi } from 'vitest';
 import React from 'react';
 import { render } from 'ink-testing-library';
 const ARROW_UP = '\u001B[A';
 const ARROW_DOWN = '\u001B[B';
-const ENTER = '\r';
 describe('SelectInput', async () => {
     test('move up with up arrow key', async () => {
+        const onChange = vi.fn();
         const items = [
             {
                 label: 'First',
@@ -22,7 +22,7 @@ describe('SelectInput', async () => {
                 value: 'third',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onSelect: () => { } }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
         await sendInput(renderInstance, ARROW_UP);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
@@ -32,8 +32,10 @@ describe('SelectInput', async () => {
 
          navigate with arrows, enter to select"
     `);
+        expect(onChange).toHaveBeenCalledWith(items[2]);
     });
     test('move down with down arrow key', async () => {
+        const onChange = vi.fn();
         const items = [
             {
                 label: 'First',
@@ -48,7 +50,7 @@ describe('SelectInput', async () => {
                 value: 'third',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onSelect: () => { } }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
         await sendInput(renderInstance, ARROW_DOWN);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
@@ -58,30 +60,10 @@ describe('SelectInput', async () => {
 
          navigate with arrows, enter to select"
     `);
-    });
-    test('select item with enter key', async () => {
-        const onEnter = vi.fn();
-        const items = [
-            {
-                label: 'First',
-                value: 'first',
-            },
-            {
-                label: 'Second',
-                value: 'second',
-            },
-            {
-                label: 'Third',
-                value: 'third',
-            },
-        ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onSelect: onEnter }));
-        await waitForInputsToBeReady();
-        await sendInput(renderInstance, ARROW_DOWN);
-        await waitForChange(() => renderInstance.stdin.write(ENTER), () => onEnter.mock.calls.length);
-        expect(onEnter).toHaveBeenCalledWith(items[1].value);
+        expect(onChange).toHaveBeenCalledWith(items[1]);
     });
     test('handles keys with multiple digits', async () => {
+        const onChange = vi.fn();
         const items = [
             {
                 label: 'First',
@@ -97,7 +79,7 @@ describe('SelectInput', async () => {
                 key: '10',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onSelect: () => { } }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
         await sendInput(renderInstance, '1', '0');
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
@@ -107,8 +89,10 @@ describe('SelectInput', async () => {
 
          navigate with arrows, enter to select"
     `);
+        expect(onChange).toHaveBeenCalledWith(items[2]);
     });
     test('handles custom keys', async () => {
+        const onChange = vi.fn();
         const items = [
             {
                 label: 'First',
@@ -124,7 +108,7 @@ describe('SelectInput', async () => {
                 key: 't',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onSelect: () => { } }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
         await sendInput(renderInstance, 't');
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
@@ -134,8 +118,10 @@ describe('SelectInput', async () => {
 
          navigate with arrows, enter to select"
     `);
+        expect(onChange).toHaveBeenCalledWith(items[2]);
     });
     test('rotate after reaching the end of the list', async () => {
+        const onChange = vi.fn();
         const items = [
             {
                 label: 'First',
@@ -150,7 +136,7 @@ describe('SelectInput', async () => {
                 value: 'third',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onSelect: () => { } }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
         await sendInput(renderInstance, ARROW_DOWN);
         await sendInput(renderInstance, ARROW_DOWN);
@@ -162,21 +148,23 @@ describe('SelectInput', async () => {
 
          navigate with arrows, enter to select"
     `);
+        expect(onChange).toHaveBeenCalledWith(items[0]);
     });
     test('support groups', async () => {
+        const onChange = vi.fn();
         const items = [
             { label: 'first', value: 'first', key: 'f' },
             { label: 'second', value: 'second', key: 's' },
             { label: 'third', value: 'third' },
             { label: 'fourth', value: 'fourth' },
-            { label: 'fifth', value: 'fifth', group: 'Automations' },
+            { label: 'fifth', value: 'fifth', group: 'Automations', key: 'a' },
             { label: 'sixth', value: 'sixth', group: 'Automations' },
             { label: 'seventh', value: 'seventh' },
             { label: 'eighth', value: 'eighth', group: 'Merchant Admin' },
             { label: 'ninth', value: 'ninth', group: 'Merchant Admin' },
             { label: 'tenth', value: 'tenth' },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onSelect: () => { } }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       ">  (f) first
          (s) second
@@ -186,7 +174,48 @@ describe('SelectInput', async () => {
          (6) tenth
 
          Automations
-         (7) fifth
+         (a) fifth
+         (8) sixth
+
+         Merchant Admin
+         (9) eighth
+         (10) ninth
+
+         navigate with arrows, enter to select"
+    `);
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, 'a');
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "   (f) first
+         (s) second
+         (3) third
+         (4) fourth
+         (5) seventh
+         (6) tenth
+
+         Automations
+      >  (a) fifth
+         (8) sixth
+
+         Merchant Admin
+         (9) eighth
+         (10) ninth
+
+         navigate with arrows, enter to select"
+    `);
+        expect(onChange).toHaveBeenCalledWith(items[4]);
+        await sendInput(renderInstance, ARROW_UP);
+        await sendInput(renderInstance, ARROW_UP);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "   (f) first
+         (s) second
+         (3) third
+         (4) fourth
+      >  (5) seventh
+         (6) tenth
+
+         Automations
+         (a) fifth
          (8) sixth
 
          Merchant Admin
@@ -195,6 +224,7 @@ describe('SelectInput', async () => {
 
          navigate with arrows, enter to select"
     `);
+        expect(onChange).toHaveBeenCalledWith(items[6]);
     });
 });
 //# sourceMappingURL=SelectInput.test.js.map

package/dist/private/node/ui/components/SelectInput.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/SelectInput.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import SelectInput from './SelectInput.js'\nimport {waitForInputsToBeReady, waitForChange, sendInput} from '../../../../testing/ui.js'\nimport {describe, expect, test, vi} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\nconst ARROW_UP = '\\u001B[A'\nconst ARROW_DOWN = '\\u001B[B'\nconst ENTER = '\\r'\n\ndescribe('SelectInput', async () => {\n  test('move up with up arrow key', async () => {\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onSelect={() => {}} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_UP)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n         (2) Second\n      \u001b[36m>\u001b[39m  \u001b[36m(3) Third\u001b[39m\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n  })\n\n  test('move down with down arrow key', async () => {\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onSelect={() => {}} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_DOWN)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n      \u001b[36m>\u001b[39m  \u001b[36m(2) Second\u001b[39m\n         (3) Third\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n  })\n\n  test('select item with enter key', async () => {\n    const onEnter = vi.fn()\n\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onSelect={onEnter} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_DOWN)\n    await waitForChange(\n      () => renderInstance.stdin.write(ENTER),\n      () => onEnter.mock.calls.length,\n    )\n\n    expect(onEnter).toHaveBeenCalledWith(items[1]!.value)\n  })\n\n  test('handles keys with multiple digits', async () => {\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Tenth',\n        value: 'tenth',\n        key: '10',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onSelect={() => {}} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, '1', '0')\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n         (2) Second\n      \u001b[36m>\u001b[39m  \u001b[36m(10) Tenth\u001b[39m\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n  })\n\n  test('handles custom keys', async () => {\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n        key: 't',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onSelect={() => {}} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 't')\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n         (2) Second\n      \u001b[36m>\u001b[39m  \u001b[36m(t) Third\u001b[39m\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n  })\n\n  test('rotate after reaching the end of the list', async () => {\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onSelect={() => {}} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_DOWN)\n    await sendInput(renderInstance, ARROW_DOWN)\n    await sendInput(renderInstance, ARROW_DOWN)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[36m>\u001b[39m  \u001b[36m(1) First\u001b[39m\n         (2) Second\n         (3) Third\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n  })\n\n  test('support groups', async () => {\n    const items = [\n      {label: 'first', value: 'first', key: 'f'},\n      {label: 'second', value: 'second', key: 's'},\n      {label: 'third', value: 'third'},\n      {label: 'fourth', value: 'fourth'},\n      {label: 'fifth', value: 'fifth', group: 'Automations'},\n      {label: 'sixth', value: 'sixth', group: 'Automations'},\n      {label: 'seventh', value: 'seventh'},\n      {label: 'eighth', value: 'eighth', group: 'Merchant Admin'},\n      {label: 'ninth', value: 'ninth', group: 'Merchant Admin'},\n      {label: 'tenth', value: 'tenth'},\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onSelect={() => {}} />)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[36m>\u001b[39m  \u001b[36m(f) first\u001b[39m\n         (s) second\n         (3) third\n         (4) fourth\n         (5) seventh\n         (6) tenth\n\n         \u001b[1mAutomations\u001b[22m\n         (7) fifth\n         (8) sixth\n\n         \u001b[1mMerchant Admin\u001b[22m\n         (9) eighth\n         (10) ninth\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n  })\n})\n"]}
+{"version":3,"file":"SelectInput.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/SelectInput.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import SelectInput from './SelectInput.js'\nimport {waitForInputsToBeReady, sendInput} from '../../../../testing/ui.js'\nimport {describe, expect, test, vi} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\nconst ARROW_UP = '\\u001B[A'\nconst ARROW_DOWN = '\\u001B[B'\n\ndescribe('SelectInput', async () => {\n  test('move up with up arrow key', async () => {\n    const onChange = vi.fn()\n\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onChange={onChange} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_UP)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n         (2) Second\n      \u001b[36m>\u001b[39m  \u001b[36m(3) Third\u001b[39m\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n    expect(onChange).toHaveBeenCalledWith(items[2]!)\n  })\n\n  test('move down with down arrow key', async () => {\n    const onChange = vi.fn()\n\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onChange={onChange} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_DOWN)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n      \u001b[36m>\u001b[39m  \u001b[36m(2) Second\u001b[39m\n         (3) Third\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n    expect(onChange).toHaveBeenCalledWith(items[1]!)\n  })\n\n  test('handles keys with multiple digits', async () => {\n    const onChange = vi.fn()\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Tenth',\n        value: 'tenth',\n        key: '10',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onChange={onChange} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, '1', '0')\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n         (2) Second\n      \u001b[36m>\u001b[39m  \u001b[36m(10) Tenth\u001b[39m\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n    expect(onChange).toHaveBeenCalledWith(items[2]!)\n  })\n\n  test('handles custom keys', async () => {\n    const onChange = vi.fn()\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n        key: 't',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onChange={onChange} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 't')\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (1) First\n         (2) Second\n      \u001b[36m>\u001b[39m  \u001b[36m(t) Third\u001b[39m\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n    expect(onChange).toHaveBeenCalledWith(items[2]!)\n  })\n\n  test('rotate after reaching the end of the list', async () => {\n    const onChange = vi.fn()\n    const items = [\n      {\n        label: 'First',\n        value: 'first',\n      },\n      {\n        label: 'Second',\n        value: 'second',\n      },\n      {\n        label: 'Third',\n        value: 'third',\n      },\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onChange={onChange} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_DOWN)\n    await sendInput(renderInstance, ARROW_DOWN)\n    await sendInput(renderInstance, ARROW_DOWN)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[36m>\u001b[39m  \u001b[36m(1) First\u001b[39m\n         (2) Second\n         (3) Third\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n    expect(onChange).toHaveBeenCalledWith(items[0]!)\n  })\n\n  test('support groups', async () => {\n    const onChange = vi.fn()\n\n    const items = [\n      {label: 'first', value: 'first', key: 'f'},\n      {label: 'second', value: 'second', key: 's'},\n      {label: 'third', value: 'third'},\n      {label: 'fourth', value: 'fourth'},\n      {label: 'fifth', value: 'fifth', group: 'Automations', key: 'a'},\n      {label: 'sixth', value: 'sixth', group: 'Automations'},\n      {label: 'seventh', value: 'seventh'},\n      {label: 'eighth', value: 'eighth', group: 'Merchant Admin'},\n      {label: 'ninth', value: 'ninth', group: 'Merchant Admin'},\n      {label: 'tenth', value: 'tenth'},\n    ]\n\n    const renderInstance = render(<SelectInput items={items} onChange={onChange} />)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[36m>\u001b[39m  \u001b[36m(f) first\u001b[39m\n         (s) second\n         (3) third\n         (4) fourth\n         (5) seventh\n         (6) tenth\n\n         \u001b[1mAutomations\u001b[22m\n         (a) fifth\n         (8) sixth\n\n         \u001b[1mMerchant Admin\u001b[22m\n         (9) eighth\n         (10) ninth\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 'a')\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (f) first\n         (s) second\n         (3) third\n         (4) fourth\n         (5) seventh\n         (6) tenth\n\n         \u001b[1mAutomations\u001b[22m\n      \u001b[36m>\u001b[39m  \u001b[36m(a) fifth\u001b[39m\n         (8) sixth\n\n         \u001b[1mMerchant Admin\u001b[22m\n         (9) eighth\n         (10) ninth\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n    expect(onChange).toHaveBeenCalledWith(items[4]!)\n\n    await sendInput(renderInstance, ARROW_UP)\n    await sendInput(renderInstance, ARROW_UP)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"   (f) first\n         (s) second\n         (3) third\n         (4) fourth\n      \u001b[36m>\u001b[39m  \u001b[36m(5) seventh\u001b[39m\n         (6) tenth\n\n         \u001b[1mAutomations\u001b[22m\n         (a) fifth\n         (8) sixth\n\n         \u001b[1mMerchant Admin\u001b[22m\n         (9) eighth\n         (10) ninth\n\n         \u001b[2mnavigate with arrows, enter to select\u001b[22m\"\n    `)\n    expect(onChange).toHaveBeenCalledWith(items[6]!)\n  })\n})\n"]}

package/dist/private/node/ui/components/{Prompt.d.ts → SelectPrompt.d.ts}

@@ -1,10 +1,11 @@
 import { Props as SelectProps } from './SelectInput.js';
 import { Props as TableProps } from './Table.js';
-import React from 'react';
+import React, { ReactElement } from 'react';
 export interface Props<T> {
     message: string;
     choices: SelectProps<T>['items'];
-    onChoose: SelectProps<T>['onSelect'];
+    onSubmit: (value: T) => void;
     infoTable?: TableProps['table'];
 }
-export default function Prompt<T>({ message, choices, infoTable, onChoose, }: React.PropsWithChildren<Props<T>>): JSX.Element | null;
+declare function SelectPrompt<T>({ message, choices, infoTable, onSubmit, }: React.PropsWithChildren<Props<T>>): ReactElement | null;
+export { SelectPrompt };

package/dist/private/node/ui/components/SelectPrompt.js

@@ -0,0 +1,46 @@
+import SelectInput from './SelectInput.js';
+import Table from './Table.js';
+import { handleCtrlC } from '../../ui.js';
+import React, { useCallback, useState } from 'react';
+import { Box, measureElement, Text, useApp, useInput, useStdout } from 'ink';
+import { figures } from 'listr2';
+import ansiEscapes from 'ansi-escapes';
+function SelectPrompt({ message, choices, infoTable, onSubmit, }) {
+    const [answer, setAnswer] = useState(choices[0]);
+    const { exit: unmountInk } = useApp();
+    const [submitted, setSubmitted] = useState(false);
+    const { stdout } = useStdout();
+    const [height, setHeight] = useState(0);
+    const measuredRef = useCallback((node) => {
+        if (node !== null) {
+            const { height } = measureElement(node);
+            setHeight(height);
+        }
+    }, []);
+    useInput(useCallback((input, key) => {
+        handleCtrlC(input, key);
+        if (key.return) {
+            if (stdout && height >= stdout.rows) {
+                stdout.write(ansiEscapes.clearTerminal);
+            }
+            setSubmitted(true);
+            unmountInk();
+            onSubmit(answer.value);
+        }
+    }, [answer, onSubmit, height]));
+    return (React.createElement(Box, { flexDirection: "column", marginBottom: 1, ref: measuredRef },
+        React.createElement(Box, null,
+            React.createElement(Box, { marginRight: 2 },
+                React.createElement(Text, null, "?")),
+            React.createElement(Text, null, message)),
+        infoTable && !submitted && (React.createElement(Box, { marginLeft: 7 },
+            React.createElement(Table, { table: infoTable }))),
+        submitted ? (React.createElement(Box, null,
+            React.createElement(Box, { marginRight: 2 },
+                React.createElement(Text, { color: "cyan" }, figures.tick)),
+            React.createElement(Text, { color: "cyan" }, answer.label))) : (React.createElement(SelectInput, { items: choices, onChange: (item) => {
+                setAnswer(item);
+            } }))));
+}
+export { SelectPrompt };
+//# sourceMappingURL=SelectPrompt.js.map