@shopify/cli-kit 3.46.3 → 3.47.0-pre.0

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

@@ -1,15 +1,12 @@
-import { isEqual } from '../../../../public/common/lang.js';
 import { debounce } from '../../../../public/common/function.js';
-import React, { useState, useEffect, useRef, useCallback, forwardRef } from 'react';
+import { useSelectState } from '../hooks/use-select-state.js';
+import { handleCtrlC } from '../../ui.js';
+import React, { useRef, useCallback, forwardRef, useEffect } from 'react';
 import { Box, useInput, Text } from 'ink';
 import chalk from 'chalk';
 import figures from 'figures';
 import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
-function rotateArray(array, rotation) {
-    const arrayCopy = array.slice();
-    return arrayCopy.splice(-(rotation ?? 0) % arrayCopy.length).concat(arrayCopy);
-}
 function highlightedLabel(label, term) {
     if (!term) {
         return label;
@@ -20,10 +17,16 @@ function highlightedLabel(label, term) {
     });
 }
 // eslint-disable-next-line react/function-component-definition
-function Item({ item, previousItem, selectedIndex, highlightedTerm, enableShortcuts, items, hasAnyGroup, }) {
-    const isSelected = items.indexOf(item) === selectedIndex;
+function Item({ item, previousItem, isSelected, highlightedTerm, enableShortcuts, items, hasAnyGroup, }) {
     const label = highlightedLabel(item.label, highlightedTerm);
     let title;
+    let labelColor;
+    if (isSelected) {
+        labelColor = 'cyan';
+    }
+    else if (item.disabled) {
+        labelColor = 'dim';
+    }
     if (typeof previousItem === 'undefined' || item.group !== previousItem.group) {
         title = item.group ?? (hasAnyGroup ? 'Other' : undefined);
     }
@@ -32,10 +35,10 @@ function Item({ item, previousItem, selectedIndex, highlightedTerm, enableShortc
             React.createElement(Text, { bold: true }, title))) : null,
         React.createElement(Box, { key: item.key },
             React.createElement(Box, { marginRight: 2 }, isSelected ? React.createElement(Text, { color: "cyan" }, `>`) : React.createElement(Text, null, " ")),
-            React.createElement(Text, { color: isSelected ? 'cyan' : undefined }, enableShortcuts ? `(${item.key}) ${label}` : label))));
+            React.createElement(Text, { color: labelColor }, enableShortcuts ? `(${item.key}) ${label}` : label))));
 }
 // eslint-disable-next-line react/function-component-definition
-function SelectInputInner({ items: initialItems, onChange, enableShortcuts = true, focus = true, emptyMessage = 'No items to select.', defaultValue, highlightedTerm, loading = false, errorMessage, hasMorePages = false, morePagesMessage, infoMessage, limit, }, ref) {
+function SelectInputInner({ items: initialItems, onChange, enableShortcuts = true, focus = true, emptyMessage = 'No items to select.', defaultValue, highlightedTerm, loading = false, errorMessage, hasMorePages = false, morePagesMessage, infoMessage, limit, submitWithShortcuts = false, onSubmit, }, ref) {
     const sortBy = require('lodash/sortBy');
     const hasAnyGroup = initialItems.some((item) => typeof item.group !== 'undefined');
     const items = sortBy(initialItems, 'group');
@@ -43,69 +46,39 @@ function SelectInputInner({ items: initialItems, onChange, enableShortcuts = tru
         ...item,
         key: item.key ?? (index + 1).toString(),
     }));
-    const defaultValueIndex = defaultValue ? items.findIndex((item) => item.value === defaultValue.value) : -1;
-    const initialIndex = defaultValueIndex === -1 ? 0 : defaultValueIndex;
     const hasLimit = typeof limit !== 'undefined' && items.length > limit;
     const inputStack = useRef(null);
-    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
-    const [rotateIndex, setRotateIndex] = useState(0);
-    const slicedItemsWithKeys = hasLimit ? rotateArray(itemsWithKeys, rotateIndex).slice(0, limit) : itemsWithKeys;
-    const previousItems = useRef(undefined);
-    const changeSelection = useCallback(({ newSelectedIndex, newRotateIndex, usedShortcut = false, }) => {
-        setSelectedIndex(newSelectedIndex);
-        if (typeof newRotateIndex !== 'undefined')
-            setRotateIndex(newRotateIndex);
-        const rotatedItems = hasLimit ? rotateArray(items, newRotateIndex).slice(0, limit) : items;
-        onChange({
-            item: rotatedItems[newSelectedIndex],
-            usedShortcut,
-        });
-    }, [hasLimit, items, limit, onChange]);
+    const state = useSelectState({
+        visibleOptionCount: limit,
+        options: itemsWithKeys,
+        defaultValue,
+    });
     useEffect(() => {
-        if (items.length === 0) {
-            // reset selection when items are empty
-            onChange({
-                item: undefined,
-                usedShortcut: false,
-            });
-            // reset index when items change or the first time
+        if (typeof state.value !== 'undefined' && state.previousValue !== state.value) {
+            onChange?.(items.find((item) => item.value === state.value));
         }
-        else if (!previousItems.current) {
-            changeSelection({ newSelectedIndex: initialIndex, newRotateIndex: 0 });
-        }
-        else if (!isEqual(previousItems.current.map((item) => item.value), items.map((item) => item.value))) {
-            changeSelection({ newSelectedIndex: 0, newRotateIndex: 0 });
-        }
-        previousItems.current = items;
-    }, [changeSelection, initialIndex, items, onChange]);
+    }, [state.previousValue, state.value, items, onChange]);
     const handleArrows = (key) => {
         if (key.upArrow) {
-            const lastIndex = items.length - 1;
-            const atFirstIndex = selectedIndex === 0;
-            const nextIndex = hasLimit ? selectedIndex : lastIndex;
-            const nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
-            const nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;
-            changeSelection({ newSelectedIndex: nextSelectedIndex, newRotateIndex: nextRotateIndex });
+            state.selectPreviousOption();
         }
         else if (key.downArrow) {
-            const atLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;
-            const nextIndex = hasLimit ? selectedIndex : 0;
-            const nextRotateIndex = atLastIndex ? rotateIndex - 1 : rotateIndex;
-            const nextSelectedIndex = atLastIndex ? nextIndex : selectedIndex + 1;
-            changeSelection({ newSelectedIndex: nextSelectedIndex, newRotateIndex: nextRotateIndex });
+            state.selectNextOption();
         }
     };
     const handleShortcuts = useCallback((input) => {
-        if (slicedItemsWithKeys.map((item) => item.key).includes(input)) {
-            const itemWithKey = slicedItemsWithKeys.find((item) => item.key === input);
-            if (itemWithKey !== undefined) {
-                changeSelection({
-                    newSelectedIndex: items.findIndex((item) => item.value === itemWithKey.value),
-                    usedShortcut: true,
-                });
+        if (state.visibleOptions.map((item) => item.key).includes(input)) {
+            const itemWithKey = state.visibleOptions.find((item) => item.key === input);
+            const item = items.find((item) => item.value === itemWithKey?.value);
+            if (itemWithKey && !itemWithKey.disabled) {
+                // keep this order of operations so that there is no flickering
+                if (submitWithShortcuts && onSubmit && item) {
+                    onSubmit(item);
+                }
+                state.selectOption({ option: itemWithKey });
             }
         }
-    }, [changeSelection, items, slicedItemsWithKeys]);
+    }, [items, onSubmit, state, submitWithShortcuts]);
     // disable exhaustive-deps because we want to memoize the debounce function itself
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debounceHandleShortcuts = useCallback(debounce((newInputStack) => {
@@ -113,6 +86,13 @@ function SelectInputInner({ items: initialItems, onChange, enableShortcuts = tru
         inputStack.current = null;
     }, 300), [handleShortcuts]);
     useInput((input, key) => {
+        handleCtrlC(input, key);
+        if (typeof state.value !== 'undefined' && key.return) {
+            const item = items.find((item) => item.value === state.value);
+            if (item && onSubmit) {
+                onSubmit(item);
+            }
+        }
         // check that no special modifier (shift, control, etc.) is being pressed
         if (enableShortcuts && input.length > 0 && Object.values(key).every((value) => value === false)) {
             const newInputStack = inputStack.current === null ? input : inputStack.current + input;
@@ -139,7 +119,7 @@ function SelectInputInner({ items: initialItems, onChange, enableShortcuts = tru
     }
     else {
         return (React.createElement(Box, { flexDirection: "column", ref: ref },
-            slicedItemsWithKeys.map((item, index) => (React.createElement(Item, { key: item.key, item: item, previousItem: slicedItemsWithKeys[index - 1], highlightedTerm: highlightedTerm, selectedIndex: selectedIndex, items: slicedItemsWithKeys, enableShortcuts: enableShortcuts, hasAnyGroup: hasAnyGroup }))),
+            state.visibleOptions.map((item, index) => (React.createElement(Item, { key: item.key, item: item, previousItem: state.visibleOptions[index - 1], highlightedTerm: highlightedTerm, isSelected: item.value === state.value, items: state.visibleOptions, enableShortcuts: enableShortcuts, hasAnyGroup: hasAnyGroup }))),
             React.createElement(Box, { marginTop: 1, marginLeft: 3, flexDirection: "column" },
                 hasMorePages ? (React.createElement(Text, null,
                     React.createElement(Text, { bold: true },

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 {isEqual} from '../../../../public/common/lang.js'\nimport {debounce} from '../../../../public/common/function.js'\nimport React, {useState, useEffect, useRef, useCallback, forwardRef} from 'react'\nimport {Box, Key, useInput, Text, DOMElement} from 'ink'\nimport chalk from 'chalk'\nimport figures from 'figures'\nimport {createRequire} from 'module'\n\nconst require = createRequire(import.meta.url)\n\ndeclare module 'react' {\n  function forwardRef<T, P>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element | null,\n  ): (props: P & React.RefAttributes<T>) => JSX.Element | null\n}\n\nfunction rotateArray<T>(array: T[], rotation?: number) {\n  const arrayCopy = array.slice()\n  return arrayCopy.splice(-(rotation ?? 0) % arrayCopy.length).concat(arrayCopy)\n}\n\ninterface OnChangeOptions<T> {\n  item: Item<T> | undefined\n  usedShortcut: boolean\n}\nexport interface SelectInputProps<T> {\n  items: Item<T>[]\n  onChange: ({item, usedShortcut}: OnChangeOptions<T>) => void\n  enableShortcuts?: boolean\n  focus?: boolean\n  emptyMessage?: string\n  defaultValue?: Item<T>\n  highlightedTerm?: string\n  loading?: boolean\n  errorMessage?: string\n  hasMorePages?: boolean\n  morePagesMessage?: string\n  infoMessage?: string\n  limit?: number\n}\n\nexport interface Item<T> {\n  label: string\n  value: T\n  key?: string\n  group?: string\n}\n\ninterface ItemWithKey<T> extends Item<T> {\n  key: string\n}\n\nfunction highlightedLabel(label: string, term: string | undefined) {\n  if (!term) {\n    return label\n  }\n\n  const regex = new RegExp(term, 'i')\n  return label.replace(regex, (match) => {\n    return chalk.bold(match)\n  })\n}\n\ninterface ItemProps<T> {\n  item: ItemWithKey<T>\n  previousItem: ItemWithKey<T> | undefined\n  items: ItemWithKey<T>[]\n  selectedIndex: number\n  highlightedTerm?: string\n  enableShortcuts: boolean\n  hasAnyGroup: boolean\n}\n\n// eslint-disable-next-line react/function-component-definition\nfunction Item<T>({\n  item,\n  previousItem,\n  selectedIndex,\n  highlightedTerm,\n  enableShortcuts,\n  items,\n  hasAnyGroup,\n}: ItemProps<T>): JSX.Element {\n  const isSelected = items.indexOf(item) === selectedIndex\n  const label = highlightedLabel(item.label, highlightedTerm)\n  let title: string | undefined\n\n  if (typeof previousItem === 'undefined' || item.group !== previousItem.group) {\n    title = item.group ?? (hasAnyGroup ? 'Other' : undefined)\n  }\n\n  return (\n    <Box key={item.key} flexDirection=\"column\" marginTop={items.indexOf(item) !== 0 && title ? 1 : 0}>\n      {title ? (\n        <Box marginLeft={3}>\n          <Text bold>{title}</Text>\n        </Box>\n      ) : null}\n\n      <Box key={item.key}>\n        <Box marginRight={2}>{isSelected ? <Text color=\"cyan\">{`>`}</Text> : <Text> </Text>}</Box>\n        <Text color={isSelected ? 'cyan' : undefined}>{enableShortcuts ? `(${item.key}) ${label}` : label}</Text>\n      </Box>\n    </Box>\n  )\n}\n\n// eslint-disable-next-line react/function-component-definition\nfunction SelectInputInner<T>(\n  {\n    items: initialItems,\n    onChange,\n    enableShortcuts = true,\n    focus = true,\n    emptyMessage = 'No items to select.',\n    defaultValue,\n    highlightedTerm,\n    loading = false,\n    errorMessage,\n    hasMorePages = false,\n    morePagesMessage,\n    infoMessage,\n    limit,\n  }: SelectInputProps<T>,\n  ref: React.ForwardedRef<DOMElement>,\n): JSX.Element | null {\n  const sortBy = require('lodash/sortBy')\n  const hasAnyGroup = initialItems.some((item) => typeof item.group !== 'undefined')\n  const items = sortBy(initialItems, 'group') as Item<T>[]\n  const itemsWithKeys = items.map((item, index) => ({\n    ...item,\n    key: item.key ?? (index + 1).toString(),\n  })) as ItemWithKey<T>[]\n  const defaultValueIndex = defaultValue ? items.findIndex((item) => item.value === defaultValue.value) : -1\n  const initialIndex = defaultValueIndex === -1 ? 0 : defaultValueIndex\n  const hasLimit = typeof limit !== 'undefined' && items.length > limit\n  const inputStack = useRef<string | null>(null)\n  const [selectedIndex, setSelectedIndex] = useState(initialIndex)\n  const [rotateIndex, setRotateIndex] = useState(0)\n  const slicedItemsWithKeys = hasLimit ? rotateArray(itemsWithKeys, rotateIndex).slice(0, limit) : itemsWithKeys\n  const previousItems = useRef<Item<T>[] | undefined>(undefined)\n\n  const changeSelection = useCallback(\n    ({\n      newSelectedIndex,\n      newRotateIndex,\n      usedShortcut = false,\n    }: {\n      newSelectedIndex: number\n      usedShortcut?: boolean\n      newRotateIndex?: number\n    }) => {\n      setSelectedIndex(newSelectedIndex)\n      if (typeof newRotateIndex !== 'undefined') setRotateIndex(newRotateIndex)\n\n      const rotatedItems = hasLimit ? rotateArray(items, newRotateIndex).slice(0, limit) : items\n\n      onChange({\n        item: rotatedItems[newSelectedIndex],\n        usedShortcut,\n      })\n    },\n    [hasLimit, items, limit, onChange],\n  )\n\n  useEffect(() => {\n    if (items.length === 0) {\n      // reset selection when items are empty\n      onChange({\n        item: undefined,\n        usedShortcut: false,\n      })\n      // reset index when items change or the first time\n    } else if (!previousItems.current) {\n      changeSelection({newSelectedIndex: initialIndex, newRotateIndex: 0})\n    } else if (\n      !isEqual(\n        previousItems.current.map((item) => item.value),\n        items.map((item) => item.value),\n      )\n    ) {\n      changeSelection({newSelectedIndex: 0, newRotateIndex: 0})\n    }\n\n    previousItems.current = items\n  }, [changeSelection, initialIndex, items, onChange])\n\n  const handleArrows = (key: Key) => {\n    if (key.upArrow) {\n      const lastIndex = items.length - 1\n      const atFirstIndex = selectedIndex === 0\n      const nextIndex = hasLimit ? selectedIndex : lastIndex\n      const nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex\n      const nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1\n\n      changeSelection({newSelectedIndex: nextSelectedIndex, newRotateIndex: nextRotateIndex})\n    } else if (key.downArrow) {\n      const atLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1\n      const nextIndex = hasLimit ? selectedIndex : 0\n      const nextRotateIndex = atLastIndex ? rotateIndex - 1 : rotateIndex\n      const nextSelectedIndex = atLastIndex ? nextIndex : selectedIndex + 1\n\n      changeSelection({newSelectedIndex: nextSelectedIndex, newRotateIndex: nextRotateIndex})\n    }\n  }\n\n  const handleShortcuts = useCallback(\n    (input: string) => {\n      if (slicedItemsWithKeys.map((item) => item.key).includes(input)) {\n        const itemWithKey = slicedItemsWithKeys.find((item) => item.key === input)\n        if (itemWithKey !== undefined) {\n          changeSelection({\n            newSelectedIndex: items.findIndex((item) => item.value === itemWithKey.value),\n            usedShortcut: true,\n          })\n        }\n      }\n    },\n    [changeSelection, items, slicedItemsWithKeys],\n  )\n\n  // disable exhaustive-deps because we want to memoize the debounce function itself\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const debounceHandleShortcuts = useCallback(\n    debounce((newInputStack) => {\n      handleShortcuts(newInputStack)\n      inputStack.current = null\n    }, 300),\n    [handleShortcuts],\n  )\n\n  useInput(\n    (input, key) => {\n      // check that no special modifier (shift, control, etc.) is being pressed\n      if (enableShortcuts && input.length > 0 && Object.values(key).every((value) => value === false)) {\n        const newInputStack = inputStack.current === null ? input : inputStack.current + input\n\n        inputStack.current = newInputStack\n        debounceHandleShortcuts(newInputStack)\n      } else {\n        debounceHandleShortcuts.cancel()\n        inputStack.current = null\n        handleArrows(key)\n      }\n    },\n    {isActive: focus},\n  )\n\n  if (loading) {\n    return (\n      <Box marginLeft={3}>\n        <Text dimColor>Loading...</Text>\n      </Box>\n    )\n  } else if (errorMessage && errorMessage.length > 0) {\n    return (\n      <Box marginLeft={3}>\n        <Text color=\"red\">{errorMessage}</Text>\n      </Box>\n    )\n  } else if (items.length === 0) {\n    return (\n      <Box marginLeft={3}>\n        <Text dimColor>{emptyMessage}</Text>\n      </Box>\n    )\n  } else {\n    return (\n      <Box flexDirection=\"column\" ref={ref}>\n        {slicedItemsWithKeys.map((item, index) => (\n          <Item\n            key={item.key}\n            item={item}\n            previousItem={slicedItemsWithKeys[index - 1]}\n            highlightedTerm={highlightedTerm}\n            selectedIndex={selectedIndex}\n            items={slicedItemsWithKeys}\n            enableShortcuts={enableShortcuts}\n            hasAnyGroup={hasAnyGroup}\n          />\n        ))}\n\n        <Box marginTop={1} marginLeft={3} flexDirection=\"column\">\n          {hasMorePages ? (\n            <Text>\n              <Text bold>1-{items.length} of many</Text>\n              {morePagesMessage ? `  ${morePagesMessage}` : null}\n            </Text>\n          ) : null}\n          {hasLimit ? <Text dimColor>{`Showing ${limit} of ${items.length} items.`}</Text> : null}\n          <Text dimColor>\n            {infoMessage\n              ? infoMessage\n              : `Press ${figures.arrowUp}${figures.arrowDown} arrows to select, enter to confirm`}\n          </Text>\n        </Box>\n      </Box>\n    )\n  }\n}\n\nexport const SelectInput = forwardRef(SelectInputInner)\n"]}
+{"version":3,"file":"SelectInput.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,uCAAuC,CAAA;AAC9D,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,EAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAC,GAAG,EAAO,QAAQ,EAAE,IAAI,EAAa,MAAM,KAAK,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,OAAO,MAAM,SAAS,CAAA;AAC7B,OAAO,EAAC,aAAa,EAAC,MAAM,QAAQ,CAAA;AAEpC,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAsC9C,SAAS,gBAAgB,CAAC,KAAa,EAAE,IAAwB;IAC/D,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,KAAK,CAAA;KACb;IAED,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IACnC,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;QACpC,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAC,CAAA;AACJ,CAAC;AAYD,+DAA+D;AAC/D,SAAS,IAAI,CAAI,EACf,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,eAAe,EACf,eAAe,EACf,KAAK,EACL,WAAW,GACE;IACb,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3D,IAAI,KAAyB,CAAA;IAC7B,IAAI,UAAU,CAAA;IAEd,IAAI,UAAU,EAAE;QACd,UAAU,GAAG,MAAM,CAAA;KACpB;SAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;QACxB,UAAU,GAAG,KAAK,CAAA;KACnB;IAED,IAAI,OAAO,YAAY,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,YAAY,CAAC,KAAK,EAAE;QAC5E,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAC1D;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,KAAK,CAAC,CAAC,CAAC,CACP,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;YAChB,oBAAC,IAAI,IAAC,IAAI,UAAE,KAAK,CAAQ,CACrB,CACP,CAAC,CAAC,CAAC,IAAI;QAER,oBAAC,GAAG,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG;YAChB,oBAAC,GAAG,IAAC,WAAW,EAAE,CAAC,IAAG,UAAU,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAC,MAAM,IAAE,GAAG,CAAQ,CAAC,CAAC,CAAC,oBAAC,IAAI,YAAS,CAAO;YAC1F,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,IAAG,eAAe,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAQ,CAChF,CACF,CACP,CAAA;AACH,CAAC;AAED,+DAA+D;AAC/D,SAAS,gBAAgB,CACvB,EACE,KAAK,EAAE,YAAY,EACnB,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,KAAK,GAAG,IAAI,EACZ,YAAY,GAAG,qBAAqB,EACpC,YAAY,EACZ,eAAe,EACf,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,YAAY,GAAG,KAAK,EACpB,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,mBAAmB,GAAG,KAAK,EAC3B,QAAQ,GACY,EACtB,GAAmC;IAEnC,MAAM,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAAA;IACvC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,CAAA;IAClF,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,EAAE,OAAO,CAAc,CAAA;IACxD,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAChD,GAAG,IAAI;QACP,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;KACxC,CAAC,CAAqB,CAAA;IACvB,MAAM,QAAQ,GAAG,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,CAAC,MAAM,GAAG,KAAK,CAAA;IACrE,MAAM,UAAU,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAE9C,MAAM,KAAK,GAAG,cAAc,CAAC;QAC3B,kBAAkB,EAAE,KAAK;QACzB,OAAO,EAAE,aAAa;QACtB,YAAY;KACb,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,CAAC,KAAK,KAAK,WAAW,IAAI,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,KAAK,EAAE;YAC7E,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;SAC7D;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvD,MAAM,YAAY,GAAG,CAAC,GAAQ,EAAE,EAAE;QAChC,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,oBAAoB,EAAE,CAAA;SAC7B;aAAM,IAAI,GAAG,CAAC,SAAS,EAAE;YACxB,KAAK,CAAC,gBAAgB,EAAE,CAAA;SACzB;IACH,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAa,EAAE,EAAE;QAChB,IAAI,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAChE,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,KAAK,CAAC,CAAA;YAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE,KAAK,CAAC,CAAA;YAEpE,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;gBACxC,+DAA+D;gBAC/D,IAAI,mBAAmB,IAAI,QAAQ,IAAI,IAAI,EAAE;oBAC3C,QAAQ,CAAC,IAAI,CAAC,CAAA;iBACf;gBAED,KAAK,CAAC,YAAY,CAAC,EAAC,MAAM,EAAE,WAAW,EAAC,CAAC,CAAA;aAC1C;SACF;IACH,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAC9C,CAAA;IAED,kFAAkF;IAClF,uDAAuD;IACvD,MAAM,uBAAuB,GAAG,WAAW,CACzC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE;QACzB,eAAe,CAAC,aAAa,CAAC,CAAA;QAC9B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;IAC3B,CAAC,EAAE,GAAG,CAAC,EACP,CAAC,eAAe,CAAC,CAClB,CAAA;IAED,QAAQ,CACN,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACb,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;QAEvB,IAAI,OAAO,KAAK,CAAC,KAAK,KAAK,WAAW,IAAI,GAAG,CAAC,MAAM,EAAE;YACpD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAA;YAE7D,IAAI,IAAI,IAAI,QAAQ,EAAE;gBACpB,QAAQ,CAAC,IAAI,CAAC,CAAA;aACf;SACF;QAED,yEAAyE;QACzE,IAAI,eAAe,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE;YAC/F,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GAAG,KAAK,CAAA;YAEtF,UAAU,CAAC,OAAO,GAAG,aAAa,CAAA;YAClC,uBAAuB,CAAC,aAAa,CAAC,CAAA;SACvC;aAAM;YACL,uBAAuB,CAAC,MAAM,EAAE,CAAA;YAChC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;YACzB,YAAY,CAAC,GAAG,CAAC,CAAA;SAClB;IACH,CAAC,EACD,EAAC,QAAQ,EAAE,KAAK,EAAC,CAClB,CAAA;IAED,IAAI,OAAO,EAAE;QACX,OAAO,CACL,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;YAChB,oBAAC,IAAI,IAAC,QAAQ,uBAAkB,CAC5B,CACP,CAAA;KACF;SAAM,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;QAClD,OAAO,CACL,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;YAChB,oBAAC,IAAI,IAAC,KAAK,EAAC,KAAK,IAAE,YAAY,CAAQ,CACnC,CACP,CAAA;KACF;SAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,CACL,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;YAChB,oBAAC,IAAI,IAAC,QAAQ,UAAE,YAAY,CAAQ,CAChC,CACP,CAAA;KACF;SAAM;QACL,OAAO,CACL,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG;YACjC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACzC,oBAAC,IAAI,IACH,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,EAC7C,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,EACtC,KAAK,EAAE,KAAK,CAAC,cAAc,EAC3B,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;YAEF,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAC,QAAQ;gBACrD,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,IAAI;oBACH,oBAAC,IAAI,IAAC,IAAI;;wBAAI,KAAK,CAAC,MAAM;mCAAgB;oBACzC,gBAAgB,CAAC,CAAC,CAAC,KAAK,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAC7C,CACR,CAAC,CAAC,CAAC,IAAI;gBACP,QAAQ,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,QAAQ,UAAE,WAAW,KAAK,OAAO,KAAK,CAAC,MAAM,SAAS,CAAQ,CAAC,CAAC,CAAC,IAAI;gBACvF,oBAAC,IAAI,IAAC,QAAQ,UACX,WAAW;oBACV,CAAC,CAAC,WAAW;oBACb,CAAC,CAAC,SAAS,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,SAAS,qCAAqC,CAChF,CACH,CACF,CACP,CAAA;KACF;AACH,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import {debounce} from '../../../../public/common/function.js'\nimport {useSelectState} from '../hooks/use-select-state.js'\nimport {handleCtrlC} from '../../ui.js'\nimport React, {useRef, useCallback, forwardRef, useEffect} from 'react'\nimport {Box, Key, useInput, Text, DOMElement} from 'ink'\nimport chalk from 'chalk'\nimport figures from 'figures'\nimport {createRequire} from 'module'\n\nconst require = createRequire(import.meta.url)\n\ndeclare module 'react' {\n  function forwardRef<T, P>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element | null,\n  ): (props: P & React.RefAttributes<T>) => JSX.Element | null\n}\nexport interface SelectInputProps<T> {\n  items: Item<T>[]\n  onChange?: (item: Item<T> | undefined) => void\n  enableShortcuts?: boolean\n  focus?: boolean\n  emptyMessage?: string\n  defaultValue?: T\n  highlightedTerm?: string\n  loading?: boolean\n  errorMessage?: string\n  hasMorePages?: boolean\n  morePagesMessage?: string\n  infoMessage?: string\n  limit?: number\n  submitWithShortcuts?: boolean\n  onSubmit?: (item: Item<T>) => void\n}\n\nexport interface Item<T> {\n  label: string\n  value: T\n  key?: string\n  group?: string\n  helperText?: string\n  disabled?: boolean\n}\n\nexport interface ItemWithKey<T> extends Item<T> {\n  key: string\n}\n\nfunction highlightedLabel(label: string, term: string | undefined) {\n  if (!term) {\n    return label\n  }\n\n  const regex = new RegExp(term, 'i')\n  return label.replace(regex, (match) => {\n    return chalk.bold(match)\n  })\n}\n\ninterface ItemProps<T> {\n  item: ItemWithKey<T>\n  previousItem: ItemWithKey<T> | undefined\n  items: ItemWithKey<T>[]\n  isSelected: boolean\n  highlightedTerm?: string\n  enableShortcuts: boolean\n  hasAnyGroup: boolean\n}\n\n// eslint-disable-next-line react/function-component-definition\nfunction Item<T>({\n  item,\n  previousItem,\n  isSelected,\n  highlightedTerm,\n  enableShortcuts,\n  items,\n  hasAnyGroup,\n}: ItemProps<T>): JSX.Element {\n  const label = highlightedLabel(item.label, highlightedTerm)\n  let title: string | undefined\n  let labelColor\n\n  if (isSelected) {\n    labelColor = 'cyan'\n  } else if (item.disabled) {\n    labelColor = 'dim'\n  }\n\n  if (typeof previousItem === 'undefined' || item.group !== previousItem.group) {\n    title = item.group ?? (hasAnyGroup ? 'Other' : undefined)\n  }\n\n  return (\n    <Box key={item.key} flexDirection=\"column\" marginTop={items.indexOf(item) !== 0 && title ? 1 : 0}>\n      {title ? (\n        <Box marginLeft={3}>\n          <Text bold>{title}</Text>\n        </Box>\n      ) : null}\n\n      <Box key={item.key}>\n        <Box marginRight={2}>{isSelected ? <Text color=\"cyan\">{`>`}</Text> : <Text> </Text>}</Box>\n        <Text color={labelColor}>{enableShortcuts ? `(${item.key}) ${label}` : label}</Text>\n      </Box>\n    </Box>\n  )\n}\n\n// eslint-disable-next-line react/function-component-definition\nfunction SelectInputInner<T>(\n  {\n    items: initialItems,\n    onChange,\n    enableShortcuts = true,\n    focus = true,\n    emptyMessage = 'No items to select.',\n    defaultValue,\n    highlightedTerm,\n    loading = false,\n    errorMessage,\n    hasMorePages = false,\n    morePagesMessage,\n    infoMessage,\n    limit,\n    submitWithShortcuts = false,\n    onSubmit,\n  }: SelectInputProps<T>,\n  ref: React.ForwardedRef<DOMElement>,\n): JSX.Element | null {\n  const sortBy = require('lodash/sortBy')\n  const hasAnyGroup = initialItems.some((item) => typeof item.group !== 'undefined')\n  const items = sortBy(initialItems, 'group') as Item<T>[]\n  const itemsWithKeys = items.map((item, index) => ({\n    ...item,\n    key: item.key ?? (index + 1).toString(),\n  })) as ItemWithKey<T>[]\n  const hasLimit = typeof limit !== 'undefined' && items.length > limit\n  const inputStack = useRef<string | null>(null)\n\n  const state = useSelectState({\n    visibleOptionCount: limit,\n    options: itemsWithKeys,\n    defaultValue,\n  })\n\n  useEffect(() => {\n    if (typeof state.value !== 'undefined' && state.previousValue !== state.value) {\n      onChange?.(items.find((item) => item.value === state.value))\n    }\n  }, [state.previousValue, state.value, items, onChange])\n\n  const handleArrows = (key: Key) => {\n    if (key.upArrow) {\n      state.selectPreviousOption()\n    } else if (key.downArrow) {\n      state.selectNextOption()\n    }\n  }\n\n  const handleShortcuts = useCallback(\n    (input: string) => {\n      if (state.visibleOptions.map((item) => item.key).includes(input)) {\n        const itemWithKey = state.visibleOptions.find((item) => item.key === input)\n        const item = items.find((item) => item.value === itemWithKey?.value)\n\n        if (itemWithKey && !itemWithKey.disabled) {\n          // keep this order of operations so that there is no flickering\n          if (submitWithShortcuts && onSubmit && item) {\n            onSubmit(item)\n          }\n\n          state.selectOption({option: itemWithKey})\n        }\n      }\n    },\n    [items, onSubmit, state, submitWithShortcuts],\n  )\n\n  // disable exhaustive-deps because we want to memoize the debounce function itself\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const debounceHandleShortcuts = useCallback(\n    debounce((newInputStack) => {\n      handleShortcuts(newInputStack)\n      inputStack.current = null\n    }, 300),\n    [handleShortcuts],\n  )\n\n  useInput(\n    (input, key) => {\n      handleCtrlC(input, key)\n\n      if (typeof state.value !== 'undefined' && key.return) {\n        const item = items.find((item) => item.value === state.value)\n\n        if (item && onSubmit) {\n          onSubmit(item)\n        }\n      }\n\n      // check that no special modifier (shift, control, etc.) is being pressed\n      if (enableShortcuts && input.length > 0 && Object.values(key).every((value) => value === false)) {\n        const newInputStack = inputStack.current === null ? input : inputStack.current + input\n\n        inputStack.current = newInputStack\n        debounceHandleShortcuts(newInputStack)\n      } else {\n        debounceHandleShortcuts.cancel()\n        inputStack.current = null\n        handleArrows(key)\n      }\n    },\n    {isActive: focus},\n  )\n\n  if (loading) {\n    return (\n      <Box marginLeft={3}>\n        <Text dimColor>Loading...</Text>\n      </Box>\n    )\n  } else if (errorMessage && errorMessage.length > 0) {\n    return (\n      <Box marginLeft={3}>\n        <Text color=\"red\">{errorMessage}</Text>\n      </Box>\n    )\n  } else if (items.length === 0) {\n    return (\n      <Box marginLeft={3}>\n        <Text dimColor>{emptyMessage}</Text>\n      </Box>\n    )\n  } else {\n    return (\n      <Box flexDirection=\"column\" ref={ref}>\n        {state.visibleOptions.map((item, index) => (\n          <Item\n            key={item.key}\n            item={item}\n            previousItem={state.visibleOptions[index - 1]}\n            highlightedTerm={highlightedTerm}\n            isSelected={item.value === state.value}\n            items={state.visibleOptions}\n            enableShortcuts={enableShortcuts}\n            hasAnyGroup={hasAnyGroup}\n          />\n        ))}\n\n        <Box marginTop={1} marginLeft={3} flexDirection=\"column\">\n          {hasMorePages ? (\n            <Text>\n              <Text bold>1-{items.length} of many</Text>\n              {morePagesMessage ? `  ${morePagesMessage}` : null}\n            </Text>\n          ) : null}\n          {hasLimit ? <Text dimColor>{`Showing ${limit} of ${items.length} items.`}</Text> : null}\n          <Text dimColor>\n            {infoMessage\n              ? infoMessage\n              : `Press ${figures.arrowUp}${figures.arrowDown} arrows to select, enter to confirm`}\n          </Text>\n        </Box>\n      </Box>\n    )\n  }\n}\n\nexport const SelectInput = forwardRef(SelectInputInner)\n"]}

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

@@ -4,6 +4,7 @@ import { describe, expect, test, vi } from 'vitest';
 import React from 'react';
 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();
@@ -23,15 +24,17 @@ describe('SelectInput', async () => {
         ];
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
+        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
+        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_UP);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "   (1) First
-         (2) Second
-      >  (3) Third
+      >  (2) Second
+         (3) Third
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[2], usedShortcut: false });
+        expect(onChange).toHaveBeenLastCalledWith(items[1]);
     });
     test('move down with down arrow key', async () => {
         const onChange = vi.fn();
@@ -59,7 +62,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[1], usedShortcut: false });
+        expect(onChange).toHaveBeenCalledWith(items[1]);
     });
     test('handles single digit numeric shortcuts', async () => {
         const onChange = vi.fn();
@@ -87,7 +90,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[1], usedShortcut: true });
+        expect(onChange).toHaveBeenCalledWith(items[1]);
     });
     test('handles keys with multiple digits', async () => {
         const onChange = vi.fn();
@@ -116,7 +119,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[2], usedShortcut: true });
+        expect(onChange).toHaveBeenCalledWith(items[2]);
     });
     test('handles pressing non existing keys', async () => {
         const onChange = vi.fn();
@@ -137,7 +140,7 @@ describe('SelectInput', async () => {
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
         // nothing changes when pressing a key that doesn't exist
-        await sendInputAndWait(renderInstance, 100, '4');
+        await sendInputAndWait(renderInstance, 500, '4');
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       ">  (1) First
          (2) Second
@@ -145,8 +148,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledOnce();
-        expect(onChange).toHaveBeenCalledWith({ item: items[0], usedShortcut: false });
+        expect(onChange).not.toHaveBeenCalled();
     });
     test('handles custom keys', async () => {
         const onChange = vi.fn();
@@ -175,37 +177,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[2], usedShortcut: true });
-    });
-    test('rotate after reaching the end of the list', async () => {
-        const onChange = vi.fn();
-        const items = [
-            {
-                label: 'First',
-                value: 'first',
-            },
-            {
-                label: 'Second',
-                value: 'second',
-            },
-            {
-                label: 'Third',
-                value: 'third',
-            },
-        ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
-        await waitForInputsToBeReady();
-        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
-        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
-        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      ">  (1) First
-         (2) Second
-         (3) Third
-
-         Press ↑↓ arrows to select, enter to confirm"
-    `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[0], usedShortcut: false });
+        expect(onChange).toHaveBeenCalledWith(items[2]);
     });
     test('support groups', async () => {
         const onChange = vi.fn();
@@ -262,7 +234,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[4], usedShortcut: true });
+        expect(onChange).toHaveBeenCalledWith(items[4]);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
@@ -284,7 +256,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledWith({ item: items[6], usedShortcut: false });
+        expect(onChange).toHaveBeenLastCalledWith(items[6]);
     });
     test('allows disabling shortcuts', async () => {
         const onChange = vi.fn();
@@ -313,8 +285,7 @@ describe('SelectInput', async () => {
 
          Press ↑↓ arrows to select, enter to confirm"
     `);
-        expect(onChange).toHaveBeenCalledOnce();
-        expect(onChange).toHaveBeenCalledWith({ item: items[0], usedShortcut: false });
+        expect(onChange).not.toHaveBeenCalled();
     });
     test('accepts a default value', async () => {
         const items = [
@@ -331,7 +302,7 @@ describe('SelectInput', async () => {
                 value: 'third',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, defaultValue: { label: 'Second', value: 'second' } }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, defaultValue: "second" }));
         await waitForInputsToBeReady();
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "   (1) First
@@ -397,23 +368,6 @@ describe('SelectInput', async () => {
          Press ↑↓ arrows to select, enter to confirm"
     `);
         await waitForInputsToBeReady();
-        await sendInputAndWaitForChange(renderInstance, ARROW_UP);
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   Other
-      >  (10) tenth
-
-         Automations
-         (a) fifth
-         (2) sixth
-
-         Merchant Admin
-         (3) eighth
-         (4) ninth
-
-         Showing 5 of 10 items.
-         Press ↑↓ arrows to select, enter to confirm"
-    `);
-        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
@@ -435,5 +389,194 @@ describe('SelectInput', async () => {
          Press ↑↓ arrows to select, enter to confirm"
     `);
     });
+    test('pressing enter calls onSubmit on the default option', async () => {
+        const onSubmit = vi.fn();
+        const items = [
+            {
+                label: 'First',
+                value: 'first',
+            },
+            {
+                label: 'Second',
+                value: 'second',
+            },
+            {
+                label: 'Third',
+                value: 'third',
+            },
+        ];
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
+        await waitForInputsToBeReady();
+        await sendInputAndWait(renderInstance, 100, ENTER);
+        expect(onSubmit).toHaveBeenCalledWith(items[0]);
+    });
+    test('pressing enter calls onSubmit on the selected option', async () => {
+        const onSubmit = vi.fn();
+        const items = [
+            {
+                label: 'First',
+                value: 'first',
+            },
+            {
+                label: 'Second',
+                value: 'second',
+            },
+            {
+                label: 'Third',
+                value: 'third',
+            },
+        ];
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
+        await waitForInputsToBeReady();
+        await sendInputAndWait(renderInstance, 100, ARROW_DOWN);
+        await sendInputAndWait(renderInstance, 100, ENTER);
+        expect(onSubmit).toHaveBeenCalledWith(items[1]);
+    });
+    test('using a shortcut calls onSubmit if submitWithShortcuts is true', async () => {
+        const onSubmit = vi.fn();
+        const items = [
+            {
+                label: 'First',
+                value: 'first',
+                key: 'f',
+            },
+            {
+                label: 'Second',
+                value: 'second',
+                key: 's',
+            },
+            {
+                label: 'Third',
+                value: 'third',
+                key: 't',
+            },
+        ];
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit, submitWithShortcuts: true }));
+        await waitForInputsToBeReady();
+        await sendInputAndWait(renderInstance, 500, 's');
+        expect(onSubmit).toHaveBeenCalledWith(items[1]);
+    });
+    test('using a shortcut does not call onSubmit if submitWithShortcuts is false', async () => {
+        const onSubmit = vi.fn();
+        const items = [
+            {
+                label: 'First',
+                value: 'first',
+                key: 'f',
+            },
+            {
+                label: 'Second',
+                value: 'second',
+                key: 's',
+            },
+            {
+                label: 'Third',
+                value: 'third',
+                key: 't',
+            },
+        ];
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
+        await waitForInputsToBeReady();
+        await sendInputAndWait(renderInstance, 500, 's');
+        expect(onSubmit).not.toHaveBeenCalled();
+    });
+    test('supports disabled options', async () => {
+        const onSubmit = vi.fn();
+        const items = [
+            {
+                label: 'First',
+                value: 'first',
+                key: 'f',
+            },
+            {
+                label: 'Second',
+                value: 'second',
+                key: 's',
+                disabled: true,
+            },
+            {
+                label: 'Third',
+                value: 'third',
+                key: 't',
+            },
+        ];
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
+        await waitForInputsToBeReady();
+        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "   (f) First
+         (s) Second
+      >  (t) Third
+
+         Press ↑↓ arrows to select, enter to confirm"
+    `);
+        await sendInputAndWait(renderInstance, 100, ENTER);
+        expect(onSubmit).toHaveBeenCalledWith(items[2]);
+    });
+    test('default value will be skipped if the option is disabled', async () => {
+        const onSubmit = vi.fn();
+        const items = [
+            {
+                label: 'First',
+                value: 'first',
+                key: 'f',
+            },
+            {
+                label: 'Second',
+                value: 'second',
+                key: 's',
+                disabled: true,
+            },
+            {
+                label: 'Third',
+                value: 'third',
+                key: 't',
+            },
+        ];
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit, defaultValue: "second" }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      ">  (f) First
+         (s) Second
+         (t) Third
+
+         Press ↑↓ arrows to select, enter to confirm"
+    `);
+        await waitForInputsToBeReady();
+        await sendInputAndWait(renderInstance, 100, ENTER);
+        expect(onSubmit).toHaveBeenCalledWith(items[0]);
+    });
+    test('selects the next non-disabled option if the first option is disabled', async () => {
+        const onSubmit = vi.fn();
+        const items = [
+            {
+                label: 'First',
+                value: 'first',
+                key: 'f',
+                disabled: true,
+            },
+            {
+                label: 'Second',
+                value: 'second',
+                key: 's',
+                disabled: true,
+            },
+            {
+                label: 'Third',
+                value: 'third',
+                key: 't',
+            },
+        ];
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
+        await waitForInputsToBeReady();
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "   (f) First
+         (s) Second
+      >  (t) Third
+
+         Press ↑↓ arrows to select, enter to confirm"
+    `);
+        await sendInputAndWait(renderInstance, 100, ENTER);
+        expect(onSubmit).toHaveBeenCalledWith(items[2]);
+    });
 });
 //# sourceMappingURL=SelectInput.test.js.map