Add ExtensionDetails dialog and support install (#20845)

packages/cli/src/ui/components/shared/SearchableList.tsx

@@ -67,6 +67,8 @@ export interface SearchableListProps<T extends GenericListItem> {
   onSearch?: (query: string) => void;
   /** Whether to reset selection to the top when items change (e.g. after search) */
   resetSelectionOnItemsChange?: boolean;
+  /** Whether the list is focused and accepts keyboard input. Defaults to true. */
+  isFocused?: boolean;
 }
 
 /**
@@ -85,6 +87,7 @@ export function SearchableList<T extends GenericListItem>({
   useSearch,
   onSearch,
   resetSelectionOnItemsChange = false,
+  isFocused = true,
 }: SearchableListProps<T>): React.JSX.Element {
   const keyMatchers = useKeyMatchers();
   const { filteredItems, searchBuffer, maxLabelWidth } = useSearch({
@@ -111,7 +114,7 @@ export function SearchableList<T extends GenericListItem>({
   const { activeIndex, setActiveIndex } = useSelectionList({
     items: selectionItems,
     onSelect: handleSelectValue,
-    isFocused: true,
+    isFocused,
     showNumbers: false,
     wrapAround: true,
     priority: true,
@@ -157,7 +160,7 @@ export function SearchableList<T extends GenericListItem>({
       }
       return false;
     },
-    { isActive: true },
+    { isActive: isFocused },
   );
 
   const visibleItems = filteredItems.slice(
@@ -209,7 +212,7 @@ export function SearchableList<T extends GenericListItem>({
           <TextInput
             buffer={searchBuffer}
             placeholder={searchPlaceholder}
-            focus={true}
+            focus={isFocused}
           />
         </Box>
       )}