import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as MultiSelectStories from './MultiSelect.stories'

<Meta of={MultiSelectStories} />

# MultiSelect

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/MultiSelect"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select"

/>

<KAIOInstallation exportNames="MultiSelect" />

## Overview

A field for selecting multiple options.

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

## API

### Items

An array of `MultiSelectOption`s which will be rendered into the dropdown.

```ts
export type MultiSelectOption = {
  label: string
  // Used for "value" attribute in option - must be unique
  value: string | number
}
```

<Canvas of={MultiSelectStories.Items} />

### Selected values

Selected values are in the shape of `Set<MultiSelectOption["value"]>`.
Each value should be a unique `string | number`.

These values are controlled by the consumer through the props `selectedValues` and
the `onSelectedValuesChange` callback (which will provide the new Set of selected values).

<Canvas of={MultiSelectStories.SelectedValues} />

### Open state

The open state is controlled by the consumer through the `isOpen` and `onOpenChange` props.

<Canvas of={MultiSelectStories.OpenState} />

### Description

You can add a description which will be linked to the trigger button with aria-describedby.

<Canvas of={MultiSelectStories.Description} />

### Validation

Validation states are defined in the `validationMessage` object, containing a `status` and `message`.

<Canvas of={MultiSelectStories.ValidationMessage} />

A validation message will render below the MultiSelect and will be read to assistive technologies before the `description` content.

<Canvas of={MultiSelectStories.ValidationMessageWithDescription} />