Dropdown

• Single Selection: Designed for choosing one item from a list.
• Compact: Hides options until explicitly requested, saving space.
• Theming: Uses SpatialTheme for pill background/foreground, menu background, and item styling.
• Interaction: Clicking the main dropdown pill opens a menu (DropdownMenu) displaying the options. Selecting an item dismisses the menu and updates the displayed selection.

• Usage: Most common dropdown scenario for selecting from text-based options.
• Key Parameters:
  • modifier: Modifier
  • filled: Boolean = true: If true, uses a filled background (secondaryButton) for the pill when no item is selected. If false, uses a transparent background (borderless style). When an item is selected, the pill background becomes primaryButton.
  • leading: @Composable (() -> Unit)?: Optional icon displayed within the pill.
  • title: String?: Placeholder title shown when no item is selected, or can be the title if selectedItem doesn’t override it.
  • subtitle: String?: Placeholder subtitle shown when no item is selected, or can be the subtitle if selectedItem doesn’t override it.
  • items: List<SpatialDropdownItem>: The list of options to display in the menu.
  • selectedItem: SpatialDropdownItem?: The currently selected item state (managed externally). The title and subtitle from this item will be displayed on the pill.
  • onItemSelected: (SpatialDropdownItem) -> Unit: Callback invoked when an item is selected from the menu.
• SpatialDropdownItem Data Class:

    data class SpatialDropdownItem(
        val leading: (@Composable () -> Unit)? = null, // Icon shown in the *menu item*
        val icon: (@Composable () -> Unit)? = null, // (Seems unused in current impl, maybe legacy)
        val title: String? = null,
        val subtitle: String? = null,
        val enabled: Boolean = true,
    )
  

import com.meta.spatial.uiset.dropdown.SpatialDropdown
import com.meta.spatial.uiset.dropdown.foundation.SpatialDropdownItem
import androidx.compose.runtime.*
// ... other imports

val qualityOptions = remember { listOf(
    SpatialDropdownItem(title = "Auto", subtitle = "Recommended"),
    SpatialDropdownItem(title = "1080p"),
    SpatialDropdownItem(title = "720p"),
    SpatialDropdownItem(title = "480p"),
    SpatialDropdownItem(title = "Potato Vision", enabled = false)
)}
var selectedQuality by remember { mutableStateOf<SpatialDropdownItem?>(qualityOptions[0]) }

SpatialDropdown(
    title = "Select Quality", // Placeholder if selectedQuality is null
    items = qualityOptions,
    selectedItem = selectedQuality,
    onItemSelected = { selectedQuality = it },
    // Optional leading icon for the pill itself
    leading = { Icon(SpatialIcons.Regular.Settings, null) }
)

Spacer(Modifier.height(16.dp))

// Example without initial selection (shows placeholder title)
var selectedOption by remember { mutableStateOf<SpatialDropdownItem?>(null) }
SpatialDropdown(
    title = "Choose Option",
    subtitle = "Required",
    items = qualityOptions.drop(1), // Example subset
    selectedItem = selectedOption,
    onItemSelected = { selectedOption = it }
)

• Usage: Useful in toolbars or compact spaces where a text label is unnecessary or redundant. The icon represents the category of options.
• Key Parameters:
  • Same as SpatialDropdown, except title and subtitle parameters are not used for the pill itself.
  • icon: @Composable () -> Unit: The icon displayed on the circular pill (required).

import com.meta.spatial.uiset.dropdown.SpatialIconDropdown
// ... other imports (SpatialDropdownItem, remember, mutableStateOf, etc.)

val sortOptions = remember { listOf(
    SpatialDropdownItem(title = "Name (A-Z)"),
    SpatialDropdownItem(title = "Date Added"),
    SpatialDropdownItem(title = "Size")
)}
var currentSort by remember { mutableStateOf<SpatialDropdownItem?>(sortOptions[0]) }

SpatialIconDropdown(
    icon = { Icon(SpatialIcons.Regular.Sort, null) }, // Icon for the dropdown trigger
    items = sortOptions,
    selectedItem = currentSort,
    onItemSelected = { currentSort = it }
)