import * as React from "react"; import { FlatList, Pressable, TextInput, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native"; import { useAura } from "../theme/provider"; import { BottomSheet } from "./bottom-sheet"; import { plainText } from "./form-utils"; import { INPUT_SIZES } from "./input"; import { useControllableState, useOpenState } from "./overlay"; import { Text } from "./text"; export type SelectValue = string | number; export type SelectOption<V extends SelectValue = string> = { value: V; label: string; /** Texto curto abaixo do rótulo (também entra na busca). */ description?: string; disabled?: boolean; icon?: React.ReactNode; }; export type SelectProps<V extends SelectValue = string> = { options: readonly SelectOption<V>[]; /** Valor selecionado (controlado). `null` = nada selecionado. */ value?: V | null; /** Valor inicial (não-controlado). */ defaultValue?: V | null; onValueChange?: (value: V, option: SelectOption<V>) => void; /** Texto quando nada está selecionado (padrão "Selecione…"). */ placeholder?: string; /** Rótulo acima do campo (texto ou nó; texto também vira o nome acessível). */ label?: React.ReactNode; /** Texto de apoio abaixo do campo (some quando há erro) — igual ao do Input. */ description?: React.ReactNode; /** Alias antigo de `description`. */ helperText?: string; /** Erro: string mostra a mensagem; `true` só pinta a borda. */ error?: string | boolean; disabled?: boolean; /** Sheet aberto (controlado). */ open?: boolean; /** Sheet aberto inicialmente (não-controlado). */ defaultOpen?: boolean; /** Avisa ao abrir/fechar (gatilho, escolha, toque fora). */ onOpenChange?: (open: boolean) => void; /** Campo de busca no topo da lista. */ searchable?: boolean; /** Placeholder da busca (padrão "Buscar…"). */ searchPlaceholder?: string; /** Texto quando a busca não acha nada (padrão "Nenhuma opção encontrada"). */ emptyText?: string; /** Título do sheet (padrão: `label`). Use quando o `label` for um nó. */ sheetTitle?: string; /** Rótulo acessível do toque-fora do sheet (padrão "Fechar"). */ closeLabel?: string; "aria-label"?: string; testID?: string; style?: StyleProp<ViewStyle>; triggerStyle?: StyleProp<ViewStyle>; textStyle?: StyleProp<TextStyle>; }; const normalize = (s: string) => (typeof s.normalize === "function" ? s.normalize("NFD").replace(/[̀-ͯ]/g, "") : s).toLowerCase(); /** * Seleção com visual de input: abre um BottomSheet com as opções, * ✓ no item escolhido e busca opcional (ignora acentos). */ export function Select<V extends SelectValue = string>({ options, value: valueProp, defaultValue = null, onValueChange, placeholder = "Selecione…", label, description, helperText, error, disabled = false, open: openProp, defaultOpen = false, onOpenChange, searchable = false, searchPlaceholder = "Buscar…", emptyText = "Nenhuma opção encontrada", sheetTitle, closeLabel, "aria-label": ariaLabel, testID, style, triggerStyle, textStyle }: SelectProps<V>) { const t = useAura(); const [value, setValue] = useControllableState<V | null>(valueProp, defaultValue); const [open, setOpen] = useOpenState({ open: openProp, defaultOpen, onOpenChange }); const [query, setQuery] = React.useState(""); const selected = options.find((o) => o.value === value) ?? null; const errorText = typeof error === "string" && error ? error : undefined; const invalid = !!error; const filtered = React.useMemo(() => { const q = normalize(query.trim()); if (!q) return options; return options.filter( (o) => normalize(o.label).includes(q) || (o.description ? normalize(o.description).includes(q) : false) ); }, [options, query]); const choose = (option: SelectOption<V>) => { if (option.disabled) return; setValue(option.value); onValueChange?.(option.value, option); setOpen(false); }; const labelText = plainText(label); const name = ariaLabel ?? labelText ?? sheetTitle ?? placeholder; const a11yLabel = selected ? `${name}: ${selected.label}` : name; // `description` (como no Input) ou o antigo `helperText` const help = description ?? helperText; const field = INPUT_SIZES.md; return ( <View style={[{ gap: t.space(1.5) }, style]}> {label == null || label === false || label === "" ? null : labelText !== undefined ? ( <Text variant="label">{labelText}</Text> ) : ( label )} <Pressable testID={testID} role="button" aria-label={a11yLabel} aria-expanded={open} aria-disabled={disabled} accessibilityHint={errorText} disabled={disabled} onPress={() => setOpen(true)} style={({ pressed }) => [ { // mesmas medidas do Input md (altura 44, borda 1px) minHeight: field.h, flexDirection: "row", alignItems: "center", gap: field.gap, paddingHorizontal: field.px, borderRadius: t.radius.md, borderWidth: 1, borderColor: invalid ? t.colors.destructive : open ? t.colors.ring : t.colors.border, backgroundColor: pressed ? t.colors.muted : t.colors.surface, opacity: disabled ? 0.5 : 1 }, triggerStyle ]} > {selected?.icon} <Text lines={1} tone={selected ? "default" : "muted"} style={[{ flex: 1 }, textStyle]}> {selected ? selected.label : placeholder} </Text> <Text aria-hidden tone="muted" style={{ fontSize: 14 }}> ▾ </Text> </Pressable> {errorText ? ( <Text variant="caption" tone="destructive"> {errorText} </Text> ) : help == null || help === false || help === "" ? null : typeof help === "string" || typeof help === "number" ? ( <Text variant="caption" tone="muted"> {help} </Text> ) : ( help )} <BottomSheet open={open} onOpenChange={setOpen} title={sheetTitle ?? labelText ?? label} aria-label={sheetTitle ?? labelText ?? name} closeLabel={closeLabel} snapHeight={searchable ? 0.7 : "auto"} scrollable={false} onClosed={() => setQuery("")} > {searchable ? ( <View style={{ paddingHorizontal: t.space(4), paddingBottom: t.space(2) }}> <TextInput value={query} onChangeText={setQuery} placeholder={searchPlaceholder} placeholderTextColor={t.colors.mutedForeground} aria-label={searchPlaceholder} autoCorrect={false} autoCapitalize="none" clearButtonMode="while-editing" style={{ minHeight: 44, paddingHorizontal: t.space(3), borderRadius: t.radius.md, backgroundColor: t.colors.muted, color: t.colors.surfaceForeground, fontSize: 16 }} /> </View> ) : null} <FlatList data={filtered} extraData={value} keyExtractor={(o) => String(o.value)} keyboardShouldPersistTaps="handled" initialNumToRender={20} role="radiogroup" aria-label={name} style={{ flexGrow: 0, flexShrink: 1 }} ListEmptyComponent={ <Text tone="muted" align="center" style={{ padding: t.space(6) }}> {emptyText} </Text> } renderItem={({ item }) => { const isSelected = item.value === value; return ( <Pressable role="radio" aria-checked={isSelected} aria-disabled={!!item.disabled} disabled={item.disabled} onPress={() => choose(item)} style={({ pressed }) => [ { minHeight: 52, flexDirection: "row", alignItems: "center", gap: t.space(3), paddingHorizontal: t.space(5), paddingVertical: t.space(2.5), opacity: item.disabled ? 0.45 : 1 }, isSelected ? { backgroundColor: t.alpha(t.colors.primary, 0.08) } : null, pressed ? { backgroundColor: t.colors.muted } : null ]} > {item.icon} <View style={{ flex: 1, gap: 2 }}> <Text weight={isSelected ? "semibold" : "regular"} color={isSelected ? "primary" : undefined} > {item.label} </Text> {item.description ? ( <Text variant="caption" tone="muted"> {item.description} </Text> ) : null} </View> {isSelected ? ( <Text aria-hidden color="primary" weight="bold" style={{ fontSize: 18 }}> ✓ </Text> ) : null} </Pressable> ); }} /> </BottomSheet> </View> ); }

Instalação

Uso

API

Código-fonte

components/select.tsx