import { Canvas, Controls, Meta, Unstyled } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import { InlineNotification } from '~components/Notification'
import * as SelectStories from './Select.stories'

<Meta of={SelectStories} />

# Select

<Unstyled>
  <InlineNotification persistent variant="cautionary">
    {
      <>
        Where possible use the <code>SingleSelect</code> component instead of `Select` when complex
        search is not required.
      </>
    }
  </InlineNotification>
</Unstyled>

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Select"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9:37837&mode=dev"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select"
/>

<KAIOInstallation exportNames="Select" />

## Overview

A select lets you choose options from an option menu. A single-select lets you choose one option while a multi-select lets you choose multiple options.

**Note:** Select has a next version which partially replaces the functionality in this component. Please use the next component where possible for accessibility improvements.

<Canvas of={SelectStories.Playground} />
<Controls of={SelectStories.Playground} />

## API

### Multi Select

<Canvas of={SelectStories.MultiSelect} />

### Grouped options

<Canvas of={SelectStories.Grouped} />

### Disabling options

Adding the `isDisabled: true` key to your option object will disabled the item and prevent it from being selected.

<Canvas of={SelectStories.Disabled} />

### Async

<Canvas of={SelectStories.Async} />