53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { Box } from "ink";
|
|
import type { ReactNode } from "react";
|
|
import { colors } from "./colors";
|
|
import { Text } from "./Text";
|
|
|
|
interface AutocompleteBoxProps {
|
|
/** Optional header text shown at top of autocomplete */
|
|
header?: ReactNode;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Shared container for autocomplete dropdowns.
|
|
* Provides consistent styling for both file and command autocomplete.
|
|
*/
|
|
export function AutocompleteBox({ header, children }: AutocompleteBoxProps) {
|
|
return (
|
|
<Box flexDirection="column">
|
|
{header && <Text dimColor>{header}</Text>}
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface AutocompleteItemProps {
|
|
/** Whether this item is currently selected */
|
|
selected: boolean;
|
|
/** Unique key for React */
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Shared item component for autocomplete lists.
|
|
* Handles selection styling (color-based, no arrow indicator).
|
|
* 2-char gutter aligns with input box prompt.
|
|
*/
|
|
export function AutocompleteItem({
|
|
selected,
|
|
children,
|
|
}: AutocompleteItemProps) {
|
|
return (
|
|
<Text
|
|
color={selected ? colors.command.selected : undefined}
|
|
bold={selected}
|
|
// Keep each item one visual line tall so navigating doesn't reflow the footer.
|
|
wrap="truncate-end"
|
|
>
|
|
{" "}
|
|
{children}
|
|
</Text>
|
|
);
|
|
}
|