import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Select from '../Select';

<Meta
  title="Components/Inputs/Select"
  component={Select}
  decorators={[(storyFn) => <div className="input-story">{storyFn()}</div>]}
/>

# Select API

The API documentation of the Select React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Select } from '@useblu/ocean-react';
```

## Usage

<Canvas>
  <Story
    name="Select"
    args={{
      label: 'Label',
      placeholder: 'Placeholder...',
      helperText: 'Some text here!',
      error: false,
      disabled: false,
      options: Array.from(Array(10), (x, index) => ({
        value: `opt-${index + 1}`,
        label: `Option ${index + 1}`,
      })),
    }}
    parameters={{
      controls: { exclude: /^blocked*/ },
    }}
    argTypes={{
      value: { control: null },
    }}
  >
    {(args) => <Select {...args} />}
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

Any other props supplied will be provided to the select component.

## CSS

| Global class                     | Description                                                          |
| -------------------------------- | -------------------------------------------------------------------- |
| .ods-select\_\_root              | Styles applied to the root element.                                  |
| .ods-select\_\_control           | Styles applied to the control element.                               |
| .ods-select\_\_control--expanded | Styles applied to the control element if the popup is open.          |
| .ods-select\_\_control--filled   | Styles applied to the control element when it has a selected option. |
| .ods-select\_\_control--error    | Styles applied to the control element if error={true}.               |
| .ods-select\_\_value             | Styles applied to the value element.                                 |
| .ods-select\_\_value--empty      | Styles applied to the value element when placeholder appears.        |
| .ods-select\_\_arrow             | Styles applied to the arrow element.                                 |
| .ods-select\_\_arrow--down       | Styles applied to the arrow element if the popup is close.           |
| .ods-select\_\_arrow--up         | Styles applied to the arrow element if the popup is open.            |
| .ods-select\_\_arrow--disabled   | Styles applied to the arrow element if disabled={true}.              |
| .ods-select\_\_listbox-wrapper   | Styles applied to the popup element.                                 |
| .ods-select\_\_listbox           | Styles applied to the listbox element.                               |
| .ods-select\_\_option            | Styles applied to the option element.                                |
| .ods-select\_\_option--selected  | Styles applied to the selected option in the listbox.                |
| .ods-select\_\_option--disabled  | Styles applied to the disabled option in the listbox.                |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Select/Select.tsx) for more detail.

## Inheritance

The props of the [FormControl](?path=/docs/components-formcontrol--page) component are also available.
