Components for selection, navigation, and menu systems including pickers, menus, breadcrumbs, and tab navigation with keyboard support and accessibility.
Dropdown selection component for choosing from a list of options.
/**
* Dropdown selection component for choosing from options
* @param props - Picker configuration and selection properties
* @returns JSX element as dropdown picker
*/
function Picker<T>(props: SpectrumPickerProps<T>): JSX.Element;
interface SpectrumPickerProps<T> extends DOMProps, StyleProps {
/** Picker label */
label?: React.ReactNode;
/** Items to choose from */
items?: Iterable<T>;
/** Picker children (Item components) */
children: (item: T) => React.ReactElement | React.ReactElement[];
/** Currently selected key */
selectedKey?: Key;
/** Default selected key */
defaultSelectedKey?: Key;
/** Placeholder text when no selection */
placeholder?: string;
/** Description text */
description?: React.ReactNode;
/** Error message */
errorMessage?: React.ReactNode;
/** Whether picker is disabled */
isDisabled?: boolean;
/** Whether picker is required */
isRequired?: boolean;
/** Auto-focus the picker */
autoFocus?: boolean;
/** Selection change handler */
onSelectionChange?: (key: Key) => void;
/** Open state change handler */
onOpenChange?: (isOpen: boolean) => void;
/** Focus change handler */
onFocusChange?: (isFocused: boolean) => void;
}Autocomplete input component combining text input with dropdown selection.
/**
* Autocomplete input combining text input with dropdown selection
* @param props - ComboBox configuration and filtering properties
* @returns JSX element as autocomplete input
*/
function ComboBox<T>(props: SpectrumComboBoxProps<T>): JSX.Element;
interface SpectrumComboBoxProps<T> extends DOMProps, StyleProps {
/** ComboBox label */
label?: React.ReactNode;
/** Items to filter and select from */
items?: Iterable<T>;
/** ComboBox children (Item components) */
children: (item: T) => React.ReactElement | React.ReactElement[];
/** Current input value */
inputValue?: string;
/** Default input value */
defaultInputValue?: string;
/** Currently selected key */
selectedKey?: Key;
/** Default selected key */
defaultSelectedKey?: Key;
/** Placeholder text */
placeholder?: string;
/** Description text */
description?: React.ReactNode;
/** Error message */
errorMessage?: React.ReactNode;
/** Loading state */
loadingState?: LoadingState;
/** Whether to allow custom values */
allowsCustomValue?: boolean;
/** Whether ComboBox is disabled */
isDisabled?: boolean;
/** Whether ComboBox is required */
isRequired?: boolean;
/** Auto-focus the input */
autoFocus?: boolean;
/** Input value change handler */
onInputChange?: (value: string) => void;
/** Selection change handler */
onSelectionChange?: (key: Key) => void;
/** Open state change handler */
onOpenChange?: (isOpen: boolean) => void;
/** Focus change handler */
onFocusChange?: (isFocused: boolean) => void;
}Context menu components for displaying actions and navigation options.
/**
* Context menu for displaying actions and options
* @param props - Menu configuration and action properties
* @returns JSX element as context menu
*/
function Menu<T>(props: SpectrumMenuProps<T>): JSX.Element;
/**
* Trigger component that opens menus on user interaction
* @param props - Menu trigger configuration and positioning
* @returns JSX element as menu trigger
*/
function MenuTrigger(props: SpectrumMenuTriggerProps): JSX.Element;
interface SpectrumMenuProps<T> extends DOMProps, StyleProps {
/** Menu items */
items?: Iterable<T>;
/** Menu children (Item components) */
children: (item: T) => React.ReactElement | React.ReactElement[];
/** Disabled keys */
disabledKeys?: Iterable<Key>;
/** Auto-focus behavior */
autoFocus?: boolean | "first" | "last";
/** Whether menu should close on selection */
shouldFocusWrap?: boolean;
/** Action handler for menu items */
onAction?: (key: Key) => void;
/** Close handler */
onClose?: () => void;
/** Selection change handler for selectable menus */
onSelectionChange?: (keys: Selection) => void;
}
interface SpectrumMenuTriggerProps extends DOMProps {
/** Trigger button and menu */
children: [React.ReactElement, React.ReactElement];
/** Trigger type */
trigger?: "press" | "longPress";
/** Whether menu is open */
isOpen?: boolean;
/** Default open state */
defaultOpen?: boolean;
/** Open state change handler */
onOpenChange?: (isOpen: boolean) => void;
}Specialized menu component for contextual actions with consistent styling.
/**
* Specialized menu for contextual actions
* @param props - ActionMenu configuration and content properties
* @returns JSX element as action menu
*/
function ActionMenu<T>(props: SpectrumActionMenuProps<T>): JSX.Element;
interface SpectrumActionMenuProps<T> extends DOMProps, StyleProps {
/** Menu items */
items?: Iterable<T>;
/** Menu children (Item components) */
children: (item: T) => React.ReactElement | React.ReactElement[];
/** Disabled keys */
disabledKeys?: Iterable<Key>;
/** Action menu trigger alignment */
align?: "start" | "end";
/** Action menu direction */
direction?: "bottom" | "top" | "left" | "right" | "start" | "end";
/** Whether menu should close on action */
shouldFlip?: boolean;
/** Whether menu is disabled */
isDisabled?: boolean;
/** Action handler */
onAction?: (key: Key) => void;
}Component for creating nested menu structures with submenus.
/**
* Trigger for creating nested menu structures
* @param props - Submenu configuration and content properties
* @returns JSX element as submenu trigger
*/
function SubmenuTrigger(props: SpectrumSubmenuTriggerProps): JSX.Element;
interface SpectrumSubmenuTriggerProps extends DOMProps {
/** Trigger item and submenu */
children: [React.ReactElement, React.ReactElement];
}Navigation component showing hierarchical page structure and current location.
/**
* Navigation breadcrumbs showing hierarchical page structure
* @param props - Breadcrumbs configuration and navigation properties
* @returns JSX element as breadcrumb navigation
*/
function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>): JSX.Element;
interface SpectrumBreadcrumbsProps<T> extends DOMProps, StyleProps {
/** Breadcrumb items */
items?: Iterable<T>;
/** Breadcrumb children (Item components) */
children: (item: T) => React.ReactElement | React.ReactElement[];
/** Whether breadcrumbs are disabled */
isDisabled?: boolean;
/** Whether to show root item */
showRoot?: boolean;
/** Maximum visible items before collapsing */
maxVisibleItems?: number;
/** Action handler for breadcrumb clicks */
onAction?: (key: Key) => void;
}Navigation link component with router integration and accessibility features.
/**
* Navigation link with router integration
* @param props - Link content and navigation properties
* @returns JSX element as navigation link
*/
function Link(props: SpectrumLinkProps): JSX.Element;
interface SpectrumLinkProps extends DOMProps, StyleProps {
/** Link content */
children: React.ReactNode;
/** Link variant styling */
variant?: "primary" | "secondary" | "over-background";
/** Whether link is disabled */
isDisabled?: boolean;
/** Whether link is quiet styled */
isQuiet?: boolean;
/** Link href */
href?: string;
/** Link target */
target?: string;
/** Link rel attribute */
rel?: string;
/** Press event handler */
onPress?: (e: PressEvent) => void;
/** Press start handler */
onPressStart?: (e: PressEvent) => void;
/** Press end handler */
onPressEnd?: (e: PressEvent) => void;
/** Press change handler */
onPressChange?: (isPressed: boolean) => void;
/** Focus change handler */
onFocusChange?: (isFocused: boolean) => void;
}Tab navigation components for organizing content into switchable panels.
/**
* Tab container for organizing content into switchable panels
* @param props - Tabs configuration and selection properties
* @returns JSX element as tab container
*/
function Tabs(props: SpectrumTabsProps): JSX.Element;
/**
* List of tab headers for selection
* @param props - TabList configuration properties
* @returns JSX element as tab header list
*/
function TabList<T>(props: SpectrumTabListProps<T>): JSX.Element;
/**
* Container for tab panel content
* @param props - TabPanels content properties
* @returns JSX element as tab panels container
*/
function TabPanels(props: SpectrumTabPanelsProps): JSX.Element;
interface SpectrumTabsProps extends DOMProps, StyleProps {
/** Tab container children */
children: React.ReactNode;
/** Tab orientation */
orientation?: "horizontal" | "vertical";
/** Tab size */
size?: "S" | "M" | "L";
/** Tab density */
density?: "compact" | "regular";
/** Whether tabs are disabled */
isDisabled?: boolean;
/** Whether tabs are emphasized */
isEmphasized?: boolean;
/** Selected tab key */
selectedKey?: Key;
/** Default selected key */
defaultSelectedKey?: Key;
/** Disabled tab keys */
disabledKeys?: Iterable<Key>;
/** Selection change handler */
onSelectionChange?: (key: Key) => void;
}
interface SpectrumTabListProps<T> extends DOMProps, StyleProps {
/** Tab items */
items?: Iterable<T>;
/** Tab list children (Item components) */
children: (item: T) => React.ReactElement | React.ReactElement[];
}
interface SpectrumTabPanelsProps extends DOMProps, StyleProps {
/** Tab panel children */
children: React.ReactNode;
}function StatusPicker() {
const [status, setStatus] = useState('active');
const statusOptions = [
{ id: 'active', name: 'Active' },
{ id: 'inactive', name: 'Inactive' },
{ id: 'pending', name: 'Pending' }
];
return (
<Picker
label="Status"
items={statusOptions}
selectedKey={status}
onSelectionChange={setStatus}
>
{(item) => <Item key={item.id}>{item.name}</Item>}
</Picker>
);
}function UserSearch() {
const [inputValue, setInputValue] = useState('');
const [selectedUser, setSelectedUser] = useState(null);
const filteredUsers = users.filter(user =>
user.name.toLowerCase().includes(inputValue.toLowerCase())
);
return (
<ComboBox
label="Search Users"
items={filteredUsers}
inputValue={inputValue}
onInputChange={setInputValue}
selectedKey={selectedUser}
onSelectionChange={setSelectedUser}
placeholder="Type to search..."
>
{(user) => (
<Item key={user.id} textValue={user.name}>
<Avatar src={user.avatar} size="avatar-size-50" />
<Text slot="label">{user.name}</Text>
<Text slot="description">{user.email}</Text>
</Item>
)}
</ComboBox>
);
}function ContextualActions({ onEdit, onDelete, onShare }) {
return (
<MenuTrigger>
<ActionButton isQuiet>
<Icon src={MoreIcon} />
</ActionButton>
<Menu onAction={(key) => {
switch(key) {
case 'edit': onEdit(); break;
case 'delete': onDelete(); break;
case 'share': onShare(); break;
}
}}>
<Item key="edit">
<Icon src={EditIcon} />
<Text>Edit</Text>
</Item>
<Item key="share">
<Icon src={ShareIcon} />
<Text>Share</Text>
</Item>
<Item key="delete">
<Icon src={DeleteIcon} />
<Text>Delete</Text>
</Item>
</Menu>
</MenuTrigger>
);
}function AppBreadcrumbs({ path, onNavigate }) {
const breadcrumbItems = path.map((segment, index) => ({
id: segment.id,
name: segment.name,
path: path.slice(0, index + 1)
}));
return (
<Breadcrumbs
items={breadcrumbItems}
onAction={(key) => {
const item = breadcrumbItems.find(item => item.id === key);
onNavigate(item.path);
}}
>
{(item) => <Item key={item.id}>{item.name}</Item>}
</Breadcrumbs>
);
}function DocumentEditor() {
const [selectedTab, setSelectedTab] = useState('editor');
return (
<Tabs
selectedKey={selectedTab}
onSelectionChange={setSelectedTab}
orientation="horizontal"
>
<TabList>
<Item key="editor">Editor</Item>
<Item key="preview">Preview</Item>
<Item key="settings">Settings</Item>
</TabList>
<TabPanels>
<Item key="editor">
<TextArea
label="Content"
rows={20}
placeholder="Start writing..."
/>
</Item>
<Item key="preview">
<View padding="size-300">
<Text>Preview content here...</Text>
</View>
</Item>
<Item key="settings">
<Form>
<TextField label="Document Title" />
<Checkbox>Auto-save</Checkbox>
</Form>
</Item>
</TabPanels>
</Tabs>
);
}/** Collection item key type */
type Key = string | number;
/** Selection state */
type Selection = "all" | Set<Key>;
/** Loading states for async operations */
type LoadingState = "loading" | "filtering" | "idle" | "error";/** Tab orientation options */
type TabOrientation = "horizontal" | "vertical";
/** Tab size variants */
type TabSize = "S" | "M" | "L";
/** Tab density options */
type TabDensity = "compact" | "regular";
/** Link variant styling */
type LinkVariant = "primary" | "secondary" | "over-background";
/** Menu trigger behaviors */
type MenuTrigger = "press" | "longPress";