Select

Apresentação

O componente Select é responsável por criar um menu suspenso que permite aos usuários selecionar uma opção de uma lista de alternativas. Ele pode ser usado em dois modos: nativo (usando o elemento select do HTML) ou personalizado (usando um dropdown customizado).

Quando usar

Para seleção de opções em formulários
Para escolha de categorias
Para seleção de países
Para escolha de idiomas
Para seleção de moedas
Para escolha de datas
Para seleção de filtros
Para escolha de configurações
Para seleção de status
Para escolha de opções de pagamento

Forma básica de uso

import { Select } from 'eitri-luminus';

// Select básico
<Select placeholder="Selecione uma opção">
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com valor inicial
<Select 
  placeholder="Selecione uma opção"
  defaultValue="2"
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com evento onChange
<Select 
  placeholder="Selecione uma opção"
  onChange={(e) => console.log(e.target.value)}
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com classes personalizadas
<Select 
  placeholder="Selecione uma opção"
  className="select-primary"
  menuClassName="menu-primary"
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select desabilitado
<Select 
  placeholder="Selecione uma opção"
  disabled
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com controles nativos
<Select 
  placeholder="Selecione uma opção"
  useNativeControls
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com valor controlado
const [value, setValue] = useState('');
<Select 
  placeholder="Selecione uma opção"
  value={value}
  onChange={(e) => setValue(e.target.value)}
>
  <Select.Item value="1">Opção 1</Select.Item>
  <Select.Item value="2">Opção 2</Select.Item>
  <Select.Item value="3">Opção 3</Select.Item>
</Select>

// Select com métodos via ref
import { useRef } from 'react';

const MyComponent = () => {
  const selectRef = useRef<Select>(null);

  const handleGetValue = () => {
    const value = selectRef.current?.getValue();
    console.log('Valor selecionado:', value);
  };

  const handleSetValue = () => {
    selectRef.current?.setValue('2');
  };

  const handleGetIndex = () => {
    const index = selectRef.current?.getSelectedIndex();
    console.log('Índice selecionado:', index);
  };

  const handleSetIndex = () => {
    selectRef.current?.setSelectedIndex(1);
  };

  const handleOpen = () => {
    selectRef.current?.open();
  };

  const handleClose = () => {
    selectRef.current?.close();
  };

  return (
    <div>
      <Select 
        ref={selectRef}
        placeholder="Selecione uma opção"
        onOpen={() => console.log('Select aberto')}
        onClose={() => console.log('Select fechado')}
      >
        <Select.Item value="1">Opção 1</Select.Item>
        <Select.Item value="2">Opção 2</Select.Item>
        <Select.Item value="3">Opção 3</Select.Item>
      </Select>
      <button onClick={handleGetValue}>Obter Valor</button>
      <button onClick={handleSetValue}>Definir Valor</button>
      <button onClick={handleGetIndex}>Obter Índice</button>
      <button onClick={handleSetIndex}>Definir Índice</button>
      <button onClick={handleOpen}>Abrir</button>
      <button onClick={handleClose}>Fechar</button>
    </div>
  );
};

Métodos via Ref

O componente Select expõe os seguintes métodos públicos que podem ser acessados através de uma ref:

Método	Tipo de Retorno	Descrição
`getValue()`	`string`	Retorna o valor atual selecionado
`setValue(value: string)`	`void`	Define o valor selecionado
`getSelectedIndex()`	`number`	Retorna o índice da opção selecionada
`setSelectedIndex(index: number)`	`void`	Define o índice da opção selecionada
`open()`	`void`	Abre o dropdown (apenas modo customizado)
`close()`	`void`	Fecha o dropdown (apenas modo customizado)

Exemplo de uso dos métodos

import { useRef } from 'react';
import { Select } from 'eitri-luminus';

const MyForm = () => {
  const countrySelectRef = useRef<Select>(null);

  const handleSelectBrazil = () => {
    countrySelectRef.current?.setValue('br');
  };

  const handleSelectFirstOption = () => {
    countrySelectRef.current?.setSelectedIndex(0);
  };

  return (
    <div>
      <Select 
        ref={countrySelectRef}
        placeholder="Selecione um país"
        onOpen={() => console.log('Menu aberto')}
        onClose={() => console.log('Menu fechado')}
      >
        <Select.Item value="br">Brasil</Select.Item>
        <Select.Item value="us">Estados Unidos</Select.Item>
        <Select.Item value="uk">Reino Unido</Select.Item>
      </Select>
      <button onClick={handleSelectBrazil}>Selecionar Brasil</button>
      <button onClick={handleSelectFirstOption}>Primeira Opção</button>
    </div>
  );
};

Propriedades

Propriedade	Tipo	Descrição
`placeholder`	`string`	Texto exibido quando nenhuma opção está selecionada
`useNativeControls`	`boolean`	Usa o controle nativo do navegador
`menuClassName`	`string`	Classes CSS adicionais para o menu
`value`	`string`	Valor atual (controlado)
`defaultValue`	`string`	Valor inicial
`disabled`	`boolean`	Desabilita o select
`onChange`	`function`	Função chamada quando o valor muda
`onOpen`	`function`	Função chamada quando o select é aberto (apenas modo customizado)
`onClose`	`function`	Função chamada quando o select é fechado (apenas modo customizado)
`className`	`string`	Classes CSS adicionais
`id`	`string`	Identificador único do componente

Select.Item Props

Propriedade	Tipo	Descrição
`value`	`string`	Valor da opção
`onPress`	`function`	Função chamada quando a opção é clicada
`className`	`string`	Classes CSS adicionais
`id`	`string`	Identificador único do componente

Heranças

O componente Select e Select.Item herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

Propriedades de estilo (margin, padding, etc)
Propriedades de layout (flex, grid, etc)
Propriedades de posicionamento
Propriedades de acessibilidade
Propriedades de identificação (id, data-e)

Observações

O componente usa a classe 'select' para estilização base
É possível personalizar a aparência usando classes do Tailwind
O componente é responsivo por padrão
Mantém a semântica HTML apropriada
Suporta estados controlados e não controlados
Pode ser desabilitado
Suporta eventos de mudança
Pode ser estilizado com diferentes cores
Mantém a acessibilidade por padrão
Pode ser usado em formulários
Suporta diferentes tamanhos
Pode ser combinado com labels
Suporta controles nativos e personalizados
Pode ser usado em layouts flexíveis
Suporta métodos públicos via ref para controle programático (getValue, setValue, getSelectedIndex, setSelectedIndex, open, close)

Apresentação​

Quando usar​

Forma básica de uso​

Métodos via Ref​

Exemplo de uso dos métodos​

Propriedades​

Select.Item Props​

Heranças​

Observações​