Navegar componentes

BaseTypeahead

MiscExemplo

Motor de combobox sem estilo que fornece input, busca, navegação por teclado e dropdown. Sem div wrapper, sem estilo de borda, sem renderização de tokens. Usado por Typeahead e Tokenizer para composições customizadas.

Importação

import {BaseTypeahead} from '@pharos-ds/core/BaseTypeahead';

Exemplos

Área interativa

size

hasEntriesOnFocus

isDisabled

Código

import {BaseTypeahead, createStaticSource} from '@pharos-ds/core/Typeahead';

<BaseTypeahead
  size="md"
  hasEntriesOnFocus={false}
  isDisabled={false}
 />

Boas práticas

Faça: Use Typeahead ou Tokenizer para campos padrão; eles envolvem BaseTypeahead com a div wrapper, estilo de borda e renderização de tokens que ele intencionalmente omite.
Faça: Forneça sua própria div wrapper com borda e layout ao compor diretamente, já que BaseTypeahead não renderiza chrome visual próprio.
Faça: Passe anchorRef apontando para seu wrapper, para que o dropdown se posicione em relação ao chrome customizado do input, não apenas ao elemento input nu.
Evite: Espere uma div wrapper, borda ou renderização de tokens. BaseTypeahead é apenas um motor; todo o chrome visual é responsabilidade de quem chama.
Evite: Use BaseTypeahead quando Typeahead ou Tokenizer bastariam; o trabalho extra de wrapper e estilo só se justifica para composições verdadeiramente customizadas.

Props

Prop	Tipo	Padrão	Descrição
`searchSource` *	`SearchSource<T>`	—	Fonte de dados que fornece métodos de busca e bootstrap.
`value` *	`T \| null`	—	Item atualmente selecionado.
`onChange` *	`(item: T \| null) => void`	—	Chamado quando a seleção muda.
`renderItem`	`(item: T) => ReactNode`	—	Função de renderização customizada para itens do dropdown.
`placeholder`	`string`	`'Search...'`	Texto placeholder do input.
`hasEntriesOnFocus`	`boolean`	`false`	Mostra resultados de bootstrap ao focar, antes de digitar.
`maxMenuItems`	`number`	`10`	Número máximo de itens do dropdown a exibir.
`emptySearchResultsText`	`string`	`'No results found'`	Texto exibido quando a busca não retorna resultados.
`isDisabled`	`boolean`	`false`	Se o input está desabilitado.
`hasAutoFocus`	`boolean`	`false`	Foca automaticamente o input ao montar.
`debounceMs`	`number`	`150`	Atraso de debounce em ms antes de disparar a busca. Defina 0 para fontes síncronas.
`anchorRef`	`RefObject<HTMLElement \| null>`	—	Ref para o elemento âncora do posicionamento do dropdown. Se não fornecida, o próprio input é usado.
`inputXStyle`	`StyleXStyles`	—	Estilos StyleX adicionais para o elemento input.
`onKeyDown`	`(e: React.KeyboardEvent<HTMLInputElement>) => void`	—	Handler adicional de keydown chamado antes da navegação interna por teclado. Chame e.preventDefault() para pular o tratamento interno.
`onChangeQuery`	`(query: string) => void`	—	Callback disparado quando o texto da query de busca muda.
`onOpenChange`	`(isOpen: boolean) => void`	—	Callback quando o dropdown abre ou fecha.
`inputId`	`string`	—	ID do elemento input (para associação com label).
`ariaDescribedBy`	`string`	—	IDs adicionais de aria-describedby.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/BaseTypeahead