Dropdown container

Last updated: 2.0.0 (18/01/2024)

This is a foundational component and is not designed to be used by itself. Only use this if you intend to make your own inputs.

The Dropdown container is used to create dropdowns, and handles most of the styling and dropdown logic for the Select input.

Under the hood, this component is a wrapper around the Input container, with additional components provided by Floating UI to create the dropdown itself.

Usage

import { DropdownContainer } from "@valence-ui/core";

function MyComponent() { 

    return ( 
        <DropdownContainer 
            options={["hello", "world"]}        
            // For brevity, most suggested props
            // are not included.
        >
            // Your sub-component here.
            // It should have little to no styling,
            // as this is passed to the InputContainer.
        </DropdownContainer>
    )
}

If no children are supplied, a Text component rendering the selected option or a placeholder will be shown instead.

Props

Extends InputContainerProps and DropdownContainerEventProps.

Property	Type	Description
options (required)	Option[]	A list of options to display.
placeholder	string	The placeholder text to display when no option is selected.
selected	number | null	The currently selected option.
setSelected	(option: number | null) => void	A callback to set the selected option.
highlighted	number | null	The currently highlighted option.
setHighlighted	(option: number | null) => void	A callback to set the highlighted option.
icon	ReactNode	An icon to display in the input container.
secondaryIcon	ReactNode	A secondary icon to display in the input container.
dropdownStyle	CSSProperties	Optional styles to pass to the dropdown.

DropdownContainerEventProps

Property	Type	Description
onSelect	(option: Option) => void	A callback fired when an item is selected.