```jsx
import { separator } from './index'

const options = [
  { value: "all_subscribers", label: "All subscribers" },
  { value: "subscribed_to", label: "Subscribed to" },
  { value: "within_segment", label: "Within Segment" },
  { value: "cold_subscribers", label: "Cold subscribers" },
  separator,
  { value: "country", label: "Within a country or region" },
  { value: "distance", label: "Distance from a city" },
  separator,
  { value: "subscription date", label: "Subscription date" },
  { value: "first_name", label: "First name" },
  { value: "email_address", label: "Email Address" },
  { value: "custom_field", label: "Custom field" },
];

const [value1, setValue1] = React.useState("");
const [value2, setValue2] = React.useState(options[options.length - 1].value);

const handleChange = event => {
  setValue1(event.target.value)
};
const handleChange2 = event => {
  console.log(event.target)
  setValue2(event.target.value)
};

<div>
  <SelectMenu options={options} onChange={handleChange} placeholder="Choose a filter" />
  <hr />
  <SelectMenu options={options} className="text-gray-900" onChange={handleChange2} value={value2} placeholder="Choose a filter" />
</div>
```

Using the composable `Select` API:
```jsx
import { Select, Option } from './index';

<Select>
  <Option>Option 1</Option>
  <Option>Option 2</Option>
  <Option>Option 3</Option>
  <Option>Option 4</Option>
  <Option>Option 5</Option>
</Select>

```

With selected option
```jsx
import { Select, Option } from './index';

const handleSelectChange = (index) => {
  console.log(index)
}

const handleChange = (event) => {
  console.log(event.target.value)
};

<div className="inline-flex flex-col gap-1">
<Select placeholder="Select an ingredient" onChange={handleSelectChange}>
  <Option>Avocado</Option>
  <Option>Crab</Option>
  <Option>Soy Sauce</Option>
  <Option selected>Cucumber</Option>
  <Option>Nori</Option>
  <Option>Ginger</Option>
  <Option>Rice</Option>
</Select>

<SelectMenu
  options={[
    { value: "avocado", label: "Avocado" },
    { value: "crab", label: "Crab" },
    { value: "soy_sauce", label: "Soy Sauce" },
    { value: "cucumber", label: "Cucumber" },
    { value: "nori", label: "Nori" },
    { value: "ginger", label: "Ginger" },
    { value: "rice", label: "Rice" },
  ]}
  value="cucumber"
  onChange={handleChange}
/>
</div>
```

With a disabled option
```jsx
import { Select, Option } from './index';

<Select placeholder="Select an ingredient">
  <Option>Avocado</Option>
  <Option>Crab</Option>
  <Option disabled>Soy Sauce</Option>
  <Option>Cucumber</Option>
  <Option>Nori</Option>
  <Option>Ginger</Option>
  <Option>Rice</Option>
</Select>
```

With a label
```jsx
import { Select, Option } from './index';

<Select label="Ingredient options">
  <Option>Avocado</Option>
  <Option>Crab</Option>
  <Option>Soy Sauce</Option>
  <Option>Cucumber</Option>
  <Option>Nori</Option>
  <Option>Ginger</Option>
  <Option>Rice</Option>
</Select>
```

With aria-label
```jsx
import { Select, Option } from './index';

<Select aria-label="Ingredient options">
  <Option>Avocado</Option>
  <Option>Crab</Option>
  <Option>Soy Sauce</Option>
  <Option>Cucumber</Option>
  <Option>Nori</Option>
  <Option>Ginger</Option>
  <Option>Rice</Option>
</Select>
```

With external label
```jsx
import { Select, Option } from './index';
import Label from '../label';

<>
<Label id="my-external-label">Ingredient options</Label>
<Select aria-labelledby="my-external-label">
  <Option>Avocado</Option>
  <Option>Crab</Option>
  <Option>Soy Sauce</Option>
  <Option>Cucumber</Option>
  <Option>Nori</Option>
  <Option>Ginger</Option>
  <Option>Rice</Option>
</Select>
</>
```

A wide select
```jsx
<SelectMenu
  options={[
    { value: "all_subscribers", label: "All subscribers" },
    { value: "subscribed_to", label: "Subscribed to" },
    { value: "within_segment", label: "Within Segment" },
    { value: "cold_subscribers", label: "Cold subscribers" },
  ]}
  className="w-full"
/>
```

Clearing the selected value of a select menu
```jsx
import { Select, Option } from './index';

const [key, setKey] = React.useState(0);

<>
  <Select key={key}>
    <Option>Avocado</Option>
    <Option>Crab</Option>
    <Option>Soy Sauce</Option>
    <Option>Cucumber</Option>
    <Option>Nori</Option>
    <Option>Ginger</Option>
    <Option>Rice</Option>
  </Select>
  <button onClick={() => setKey(key + 1)}>Clear selected</button>
</>
```

### onChange event and how it differs between  `Select` and `SelectMenu`
The `Select` API provides the index of the changed option within the `OnChange` callback.
```jsx
import { Select, Option } from './index'

const handleChange = (index) => {
  console.log(index)
}

<Select onChange={handleChange}>
  <Option>Option 1</Option>
  <Option>Option 2</Option>
  <Option>Option 3</Option>
  <Option>Option 4</Option>
  <Option>Option 5</Option>
</Select>
```

The `SelectMenu` API provides an event object (emulating browser event API) of the changed option within the `OnChange` callback.
It's shape is:
```json
{ target: { value: string, label: string, name: string } }
```
The `name` simply reflects the `name` prop passed to the `SelectMenu` component.

Here's an example usage:
```jsx
const handleChange = (event) => {
  console.log(event.target.value)
}

<SelectMenu
  options={[
    { value: "all_subscribers", label: "All subscribers" },
    { value: "subscribed_to", label: "Subscribed to" },
    { value: "within_segment", label: "Within Segment" },
    { value: "cold_subscribers", label: "Cold subscribers" },
  ]}
  onChange={handleChange}
/>
```

### Autocomplete
```jsx
<SelectMenu
  type="autocomplete"
  options={[
    { value: "all_subscribers", label: "All subscribers" },
    { value: "subscribed_to", label: "Subscribed to" },
    { value: "within_segment", label: "Within Segment" },
    { value: "cold_subscribers", label: "Cold subscribers" },
  ]}
/>
```
#### With a predefined value
Unlike the legacy `AutoCompleteMenu`, this keeps the convention of taking a value string in the value prop over an object
```jsx
const handleChange = (event) => {
  console.log(event.target.value)
};

<SelectMenu
  type="autocomplete"
  value="within_segment"
  onChange={handleChange}
  options={[
    { value: "all_subscribers", label: "All subscribers" },
    { value: "subscribed_to", label: "Subscribed to" },
    { value: "within_segment", label: "Within Segment" },
    { value: "cold_subscribers", label: "Cold subscribers" },
  ]}
/>
```

#### With option to create new items

```jsx
const [options, setOptions] = React.useState([
  { value: "all_subscribers", label: "All subscribers" },
  { value: "subscribed_to", label: "Subscribed to" },
  { value: "within_segment", label: "Within Segment" },
  { value: "cold_subscribers", label: "Cold subscribers" },
]);

<SelectMenu
  create
  onChange={(event) => {
    console.log({ event })
  }}
  options={options}
/>
```

#### Async autocomplete
By passing the `async` prop, the `SelectMenu` component will use the `autocomplete` type and fetch options asynchronously.
Here's an example to search for repositories on GitHub:

```jsx noeditor
import Note from '../../_doc/Note';
<Note type="info">
  GitHub's API rate-limits queries to it so the async example below may stop working after a few tries.
</Note>
```

```jsx
const asyncOptions = async (search, { signal }) => {
  if (!search) return [];
  const response = await fetch(
    `https://api.github.com/search/repositories?q=${search}`,
    { signal }
  );

  const json = await response.json();

  if(!json.items) return [];
  return json.items.map(item => ({ value: item.id, label: item.name }));
};

const handleChange = (event) => {
  console.log(event)
};

<>
<SelectMenu
  async
  name="github_repositories"
  placeholder="Search for a repository on GitHub"
  options={asyncOptions}
  onChange={handleChange}
/>

<p className="mt-8 mb-4">With a prefilled value:</p>

<SelectMenu
  async
  name="github_repositories"
  placeholder="Search for a repository on GitHub"
  options={asyncOptions}
  onChange={handleChange}
  value={{
    value: "internalValue",
    label: "User-friendly label"
  }}
/>

</>
```

### Customizing the dropdown options with a custom component
```jsx
const options = [
  {
    value: "avocado",
    label: (
      <div>
      🥑 Avocado
      </div>
    ),
    component: (
      <div className="flex flex-col gap-2">
        <div className="font-semibold">🥑 Avocado</div>
        <div className="text-gray-700 text-sm">
          <p>Avocado is a fruit that is native to South Central Mexico,</p>
          <p>It's classified as a member of the flowering plant family Lauraceae.</p>
        </div>
      </div>
    )
  },
  {
    value: "crab",
    label: (
      <div>
      🦀 Crab
      </div>
    ),
    component: (
      <div className="flex flex-col gap-2">
        <div className="font-semibold">🦀 Crab</div>
        <div className="text-gray-700 text-sm">
          <p>Crabs are decapod crustaceans of the infraorder Brachyura,</p>
          <p>which typically have a very short projecting "tail".</p>
        </div>
      </div>
    )
  },
  {
    value: "soy_sauce",
    label: (
      <div>
      🍣 Soy Sauce
      </div>
    ),
    component: (
      <div className="flex flex-col gap-2">
        <div className="font-semibold">🍣 Soy Sauce</div>
        <div className="text-gray-700 text-sm">
          <p>Soy sauce is a liquid condiment of Chinese origin, made from a fermented paste</p>
          <p>of soybeans, roasted grain, brine, and Aspergillus oryzae or Aspergillus sojae molds.</p>
        </div>
      </div>
    )
  },
  {
    value: "cucumber",
    label: (
      <div>
      🥒 Cucumber
      </div>
    ),
    component: (
      <div className="flex flex-col gap-2">
        <div className="font-semibold">🥒 Cucumber</div>
        <div className="text-gray-700 text-sm">
          <p>Cucumber is a widely-cultivated creeping vine plant in the Cucurbitaceae</p>
          <p>gourd family that bears cucumiform fruits, which are used as vegetables.</p>
        </div>
      </div>
    )
  },
  {
    value: "nori",
    label: (
      <div>
      🍙 Nori
      </div>
    ),
    component: (
      <div className="flex flex-col gap-2">
        <div className="font-semibold">🍙 Nori</div>
        <div className="text-gray-700 text-sm">
          <p>Nori is the Japanese name for edible seaweed species of the</p>
          <p>red algae genus Pyropia, including P. yezoensis and P. tenera.</p>
        </div>
      </div>
    )
  },
  {
    value: "ginger",
    label: (
      <div>
      🧄 Ginger
      </div>
    ),
    component: (
      <div className="flex flex-col gap-2">
        <div className="font-semibold">🧄 Ginger</div>
        <div className="text-gray-700 text-sm">
          <p>Ginger is a flowering plant whose rhizome, ginger root or ginger,</p>
          <p>is widely used as a spice and a folk medicine.</p>
        </div>
      </div>
    )
  },
  {
    value: "rice",
    label: (
      <div>
      🍚 Rice
      </div>
    ),
    component: (
      <div className="flex flex-col gap-2">
        <div className="font-semibold">🍚 Rice</div>
        <div className="text-gray-700 text-sm">
          <p>Rice is the seed of the grass species Oryza sativa or less commonly Oryza glaberrima.</p>
        </div>
      </div>
    )
  },
];

const handleChange = (event) => {
  console.log(event.target.value)
};

<div className="inline-flex flex-col gap-1">
  <SelectMenu
    placeholder="Select an ingredient"
    options={options}
    onChange={handleChange}
  />

  <SelectMenu
    type="autocomplete"
    placeholder="Select or search for an ingredient"
    options={options}
    onChange={handleChange}
  />
</div>
```

### Disabled state
```jsx
const options = [
  { value: "avocado", label: "Avocado" },
  { value: "crab", label: "Crab" },
  { value: "soy_sauce", label: "Soy Sauce" },
  { value: "cucumber", label: "Cucumber" },
  { value: "nori", label: "Nori" },
  { value: "ginger", label: "Ginger" },
  { value: "rice", label: "Rice" },
];

const handleChange = (event) => {
  console.log(event.target.value)
};

<div className="inline-flex flex-col gap-1">
  <SelectMenu
    placeholder="Select an ingredient"
    options={options}
    onChange={handleChange}
    disabled
  />

  <SelectMenu
    type="autocomplete"
    placeholder="Select or search for an ingredient"
    options={options}
    onChange={handleChange}
    disabled
  />
</div>
```
