import { Badge } from 'terra-form-select/package.json?dev-site-package';

import AllowClearExample from './example/legacy/AllowClear?dev-site-example';
import ControlledExample from './example/legacy/Controlled?dev-site-example';
import ComboboxExample from './example/legacy/Combobox?dev-site-example';
import DefaultExample from './example/legacy/Default?dev-site-example';
import DisabledExample from './example/legacy/Disabled?dev-site-example';
import IsTouchAccessibleExample from './example/legacy/IsTouchAccessible?dev-site-example';
import InvalidExample from './example/legacy/Invalid?dev-site-example';
import IncompleteExample from './example/legacy/Incomplete?dev-site-example';
import MaxHeightExample from './example/legacy/MaxHeight?dev-site-example';
import MultipleExample from './example/legacy/Multiple?dev-site-example';
import OptGroupExample from './example/legacy/OptGroup?dev-site-example';
import SearchExample from './example/legacy/Search?dev-site-example';
import TagExample from './example/legacy/Tag?dev-site-example';

import SelectPropsTable from 'terra-form-select/lib/Select?dev-site-props-table';
import OptionPropsTable from 'terra-form-select/lib/shared/_Option?dev-site-props-table';
import OptGroupPropsTable from 'terra-form-select/lib/shared/_OptGroup?dev-site-props-table';

<Badge />

# Terra Form Select

The Select component provides a dropdown of selectable options.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-form-select`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->

## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.8.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Implementation Notes:

The Form-Select component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.

As a result of accessibility issues, the default implementation of select should not be used. It will be fully removed in a future major version bump. To achieve the same functionality the [Native Select][2] should be consumed.

[1]: /components/cerner-terra-core-docs/base/about
[2]: /components/cerner-terra-core-docs/form-select/native-select

## Usage

```jsx
import Select from 'terra-form-select';
```

Other variants can be imported as:

```jsx
import {
  Combobox,
  ComboboxField,
  MultiSelect,
  MultiSelectField,
  NativeSelect,
  NativeSelectField,
  SearchSelect,
  SearchSelectField,
  SelectField,
  SingleSelect,
  SingleSelectField,
  TagSelect,
  TagSelectField,
} from 'terra-form-select';
```
Please refer to the respective examples for more information.

## Component Features

- [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
- [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
- [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
- [Internationalization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
- [Localization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
- [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<DefaultExample title="Default - Marked For Deprecation" description="The default variant should no longer be used. It remains for passivity until the next major version bump. Please refer to the Native Select component." />
<SearchExample description="A search variant provides a searchable single select." />
<ComboboxExample description="A combobox variant allows a user to enter a single free text entry or select a single option from the the dropdown." />
<MultipleExample description="A multiple variant allows searching and selecting multiple options." />
<TagExample description="A tag variant allows a user to enter multiple custom free text entries or select multiple options from the the dropdown." />
<DisabledExample title="Disabled (applies to all)" />
<IsTouchAccessibleExample title="Is Touch Accessible (applies to only 'combobox', 'multiple', 'tag', and 'search')" description="Ensure accessibility on touch devices. Will render the dropdown menu in normal DOM flow with position absolute. By default, the menu renders in a portal, which is inaccessible on touch devices." />
<InvalidExample title="Invalid (applies to all)" description="Applies theme-specific styling for invalid. Will also display error text when used with a Field." />
<IncompleteExample title="Incomplete (applies to all)" description="Applies theme-specific styling for incomplete. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />
<OptGroupExample title="Ability to add Option Groups (applies to all)" description="An OptGroup provides a way to group options together within the listbox. Can be applied to all select variants (default, search, combobox, multiple, tag)." />
<MaxHeightExample titel="Ability to set a Maximum Height (applies to all)" description="An example of implementing a custom max height of the dropdown." />
<AllowClearExample title="Ability to Clear Selection (applies to only 'default', 'combobox', and 'search')" description="An example with an option to clear the selected item. (Not applicable to 'multiple' or 'tag' variants)" />
<ControlledExample title="Create a Controlled Select (applies to all)" description="An example of implementing a controlled Select." />

## Select Props
<SelectPropsTable />

## Option Props
<OptionPropsTable />

## OptGroup Props
<OptGroupPropsTable />