import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, text, select } from '@storybook/addon-knobs'
import DropList from './DropList'
import { DividerUI, ListItemUI, ListItemTextUI } from './DropList.css'
import {
  IconBtn,
  MeatButton,
  NavLink,
  SelectTag,
  SimpleButton,
  SplittedButton,
} from './DropList.togglers'
import {
  itemsWithDivider,
  groupAndDividerItems,
  plainItems,
  regularItems,
  simpleGroupedItems,
  disabledItems,
} from '../../utilities/specs/dropdown.specs'

<Meta
  title="Components/Dropdowns/DropList"
  component={DropList}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/eYf2reA21VBUMJRrA5z5zY/3.-Overlays?node-id=27%3A4404',
    },
  }}
/>

# DropList

A component to build simple WAI-ARIA compliant combobox or select dropdowns that conform to Help Scout's design guidelines and sensible defaults.

Under the hood DropList is powered by two third party open source libraries: [Downshift](https://www.downshift-js.com/) and [Tippy](https://atomiks.github.io/tippyjs/v6/all-props/).

#### Downshift

This library has 2 flavours, _hooks_ and _components_. DropList utilices the provided hooks `useSelect` and `useCombobox`, which handle most of the logic a dropdown requires like events, a11y and state.

Downshift fundamentally treats "select" and "combobox" components as 2 different paradigms with their own separate considerations (especially when it comes in how each handle a11y stuff and events). In a nutshell a _select_ is not just a _combobox_ with the search input hidden. DropList abstracts this for you providing a unified component while under the hood following the Downshift paradigm.

#### Tippy

We use this library to power our `Tooltip` component and it's being used here to handle the positioning of the DropList, as well as its open/closed state.

#### Portaling

Sometimes the list needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues. Use [Tippy's `appendTo`](https://atomiks.github.io/tippyjs/v6/all-props/#appendto) option:

```jsx
<DropList
  items={regularItems}
  toggler={<SimpleButton text="Click" />}
  tippyOptions={{
    appendTo: () => document.body,
  }}
/>
```

Sometimes when portaling you might need to apply some custom css to the menu but find that adding styles using Styled Components doesn't work (this happens because the styled component can't target the menu as it's no longer in its scope). In these rare ocasions you can use the `menuCSS` prop to add your styles, it accepts the returned value from the [`css` helper from Styled Components](https://styled-components.com/docs/api#css)

```jsx
// import { css } from 'styled-components'

<DropList
  items={regularItems}
  toggler={<SimpleButton text="Click" />}
  tippyOptions={{
    appendTo: () => document.body,
  }}
  menuCSS={css`
    width: 134px;

    &:hover {
      color: salmon;
    }
  `}
/>
```

> Note: `menuCSS` should only be used in conjuction with `tippyOptions.appendTo`, if not you will see errors in the console. Use regular styled components in any other instance.

#### onSelect

The `onSelect` callback passes two parameters (second is useful when multiple selection is enabled):

```js
/**
 *
 * @param {string | object | array} selection The current selection, if multiple selection enabled then it is an array
 * @param {string | object} clickedItem The item that was clicked, useful in multiple selection cases
 */
function onSelect(selection, clickedItem) {}
```

<br />

#### onListItemSelectEvent

In downshift item selection other than click is not handled directly on the list item nodes, in Select the events are handled on the Menu and in Combobox they are handled from the input. Because of this there is no access to any list item "event" on selection.

Most of the time you don't care _how_ the item was selected, but if you need to, you can use this callback where you'll find the `event` and get the `event.type`.

For this we have added `onListItemSelectEvent` which fires on any selection event (click, keydown). This callback gives you access to the actual List Item DOM node that was selected, and the original event.

The original click event will give you the actual list item, so `listItemNode === e.target`

Notice that on keyboard events `e.target` will be either the Menu (Select variant) or the Input (Combobox variant)

```js
/**
 *
 * @param {object} event Original event
 * @param {DOMNode} listItemNode The item that was selected
 */
function onListItemSelectEvent({ event, listItemNode }) {}
```

<br />

## Example

<Canvas>
  <Story name="default">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        variant="combobox"
        items={regularItems}
        onOpenedStateChange={isOpen => {
          console.log('isOpen', isOpen)
        }}
        onSelect={selection => {
          console.log('selection', selection)
        }}
        toggler={
          <SplittedButton
            text="Click"
            onActionClick={() => {
              console.log('Action!')
            }}
            onClick={e => {
              console.log('Clicked from story')
            }}
          />
        }
      />
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={DropList} />

## Stories

### Variants

There are two variations of this component: "Select" and "Combobox". The only difference between them is that "Combobox" includes a text input to search and filter the list of items.

You can use the `autoSetComboboxAt` prop to automatically choose between the 2 variants depending on the number of items on the list.

```jsx
<DropList
  items={regularItems}
  toggler={<SimpleButton text="Click" />}
  autoSetComboboxAt={10}
/>

// regularItems.length < 10 ? "will render a Select" : "will render a Combobox"
```

<Canvas>
  <Story name="Variant: Select">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        isMenuOpen={boolean('Is Menu Open', false)}
        focusTogglerOnMenuClose={boolean('focusTogglerOnMenuClose', true)}
        menuAriaLabel="Demo DropList"
        onOpenedStateChange={isOpen => {
          console.log('onOpenedStateChange', isOpen)
        }}
        onListItemSelectEvent={({ event, listItemNode }) => {
          console.log('event', event)
          console.log('listItemNode', listItemNode)
        }}
        selection={select(
          'Selection',
          {
            clear: null,
            first: regularItems[0],
            second: regularItems[1],
            third: regularItems[2],
          },
          regularItems[1]
        )}
        items={regularItems}
        toggler={<SimpleButton text="This is a select" />}
      />
    </div>
  </Story>
</Canvas>

<Canvas>
  <Story name="Variant: Combobox">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        variant="combobox"
        inputPlaceholder={text('inputPlaceholder', 'Search')}
        focusTogglerOnMenuClose={boolean('focusTogglerOnMenuClose', true)}
        onDropListLeave={() => {
          console.log('DropList left')
        }}
        onInputChange={(value, e) => {
          console.log('🚀 ~ value', value)
          console.log('🚀 ~ e', e)
        }}
        items={select(
          'Items',
          {
            regular: regularItems,
            withDivider: itemsWithDivider,
            grouped: simpleGroupedItems,
          },
          regularItems
        )}
        onSelect={(selection, clickedItem) => {
          console.log('🚀 ~ selection', selection)
          console.log('🚀 ~ clickedItem', clickedItem)
        }}
        toggler={<SimpleButton text="This is a combobox" />}
      />
    </div>
  </Story>
</Canvas>

<Canvas>
  <Story name="Focusing and leaving">
    <div
      tabIndex="0"
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        menuAriaLabel="Demo DropList"
        onDropListLeave={() => {
          console.log('Select left')
        }}
        items={regularItems}
        toggler={<SimpleButton text="Select" />}
      />
      <DropList
        variant="combobox"
        onDropListLeave={() => {
          console.log('Combobox left')
        }}
        items={select(
          'Items',
          {
            regular: regularItems,
            withDivider: itemsWithDivider,
            grouped: simpleGroupedItems,
          },
          regularItems
        )}
        toggler={
          <SimpleButton text="Combobox" style={{ marginLeft: '20px' }} />
        }
        tippyOptions={{
          placement: 'top-start',
          offset: [0, 5],
          appendTo: () => document.body,
        }}
      />
    </div>
  </Story>
</Canvas>

### List items

DropList accepts an array of items, these items can be:

- Strings: `['a', 'b', 'c']`
- Objects
  - A `label` or `value` field is required, if both present `label` takes precedence in all calculations (also for rendering if you need to render something else, use `renderCustomListItem`)

```js
const itemShape = PropTypes.shape({
  label: requiredItemPropsCheck,
  value: requiredItemPropsCheck,
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
})
```

#### Laser Targeting

If you need to target a specific List Item for styling (or else), you can add the property `className` to each item in the array, the value will be added to the existing css class names on the `DropListItem`:

```js
const items = [
  { label: 'a', className: 'paintItBlue' },
  { label: 'ab' },
  { label: 'abc' },
  { type: 'divider' },
  { label: 'b', className: 'paintItBlue' },
]
```

#### Inert items

If you need to add an item that does nothing but be there, effectively a "non-item" which semantically is different to a disabled item, just add a `type = inert`:

```js
{
  label: 'Some info here perhaps...?',
  type: 'inert',
}
```

This might be useful when using `customEmptyListItems`:

```jsx
customEmptyListItems={[
  {
    label: 'No tags found',
    type: 'inert',
  },
  {
    type: 'divider',
  },
  {
    label: 'Create tag',
    customizeLabel(inputValue) {
      return `Create ${inputValue} tag`
    },
    type: 'action',
  },
]}
```

#### Action items

If you want to add an item that:

1. should **not** be selected
2. behaves as any other regular item (fires `onSelect`, keyboard nav works, closes DropList on choosing it, etc)
3. Basically you need it to fire some random action unrelated to the DropList

Add a `type = action`:

```js
{
  label: 'Create tag',
  type: 'action',
  template: 'Add __inputValue__ tag'
}
```

> If you want to update the label of it with the input value of a combobox, add a `template:string` key, where `__inputValue__` will be replaced with the typed value.

> This is a similar effect to using `clearOnSelect`, except only for action items as opposed to all items in the list

#### Hide items if the input of the combobox is empty

Sometimes you might need to only add an item (usually an action) if there's some value in the input, for that you can add `hideOnEmptyInputValue : true` to your item and it will do just that:

```jsx
<DropList
  variant="combobox"
  items={regularItems
    .concat({
      type: 'divider',
      hideOnEmptyInputValue: true,
    })
    .concat({
      label: 'Add tag',
      template: 'Add __inputValue__ tag',
      type: 'action',
      action: 'ADD_TAG',
      hideOnEmptyInputValue: true,
    })}
```

#### Dividers

Add a `type = divider` property to an object to create a divider

```js
const items = [
  { label: 'a' },
  { label: 'ab' },
  { label: 'abc' },
  { type: 'divider' },
  { label: 'b' },
]
```

<Canvas>
  <Story name="Items: divider">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={itemsWithDivider}
        toggler={<SimpleButton text="Click" />}
      />
    </div>
  </Story>
</Canvas>

#### Groups

Add a `type = group` property (don't forget to add `label` or `value` to the group) and nest items to an object to create a group:

```js
const groupedItems = [
  {
    items: [{}, {}, {}],
    label: 'Group 1',
    type: 'group',
  },
  {
    items: [{}, {}, {}],
    label: 'Group 2',
    type: 'group',
  },
]
```

<Canvas>
  <Story name="Items: groups">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        variant="combobox"
        items={simpleGroupedItems}
        toggler={<SimpleButton text="Click" />}
      />
    </div>
  </Story>
</Canvas>

- Mix'n Match dividers and groups:

<Canvas>
  <Story name="Items: groups and dividers">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        variant="combobox"
        items={groupAndDividerItems}
        toggler={<SimpleButton text="Click" />}
      />
    </div>
  </Story>
</Canvas>

#### Empty list

<Canvas>
  <Story name="Items: empty list">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={[]}
        toggler={<SimpleButton text="Click" />}
        variant="combobox"
      />
    </div>
  </Story>
  <Story name="Items: custom empty list">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        customEmptyList={
          <div
            style={{
              fontSize: '13px',
              color: 'thistle',
              letterSpacing: '2px',
              textAlign: 'right',
              padding: '10px 10px 15px 0',
            }}
          >
            Empty list
          </div>
        }
        items={[]}
        toggler={<SimpleButton text="Click" />}
      />
    </div>
  </Story>
</Canvas>

- Sometimes you might need to add some items when the list is empty, instead of rendering just a custom empty list, use `customEmptyListItems` with an array of items.

<Canvas>
  <Story name="Items: custom empty list items (Select)">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={[]}
        customEmptyListItems={[
          {
            label: 'No tags found',
            type: 'inert',
          },
          {
            type: 'divider',
          },
          {
            label: 'Create tag',
            type: 'action',
          },
        ]}
        toggler={<SimpleButton text="This is a select" />}
      />
    </div>
  </Story>
</Canvas>

- On a combobox, you can customize the label of your items with the value of the input by adding a `customizeLabel` function on the item:

```js
{
  label: 'Create tag',
  customizeLabel(inputValue) {
    return `Create ${inputValue} tag`
  },
  type: 'action',
}
```

<Canvas>
  <Story name="Items: custom empty list items (Combobox)">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        variant="combobox"
        items={[]}
        customEmptyListItems={[
          {
            label: 'No tags found',
            type: 'inert',
          },
          {
            type: 'divider',
          },
          {
            label: 'Create tag',
            customizeLabel(inputValue) {
              return `Create ${inputValue} tag`
            },
            type: 'action',
          },
        ]}
        onSelect={(selection, clickedItem) => {
          console.log('🚀 ~ selection', selection)
          console.log('🚀 ~ clickedItem', clickedItem)
        }}
        toggler={<SimpleButton text="This is a combobox" />}
      />
    </div>
  </Story>
</Canvas>

#### Custom List Items

Sometimes you might need to render the list items in a different manner, for that you can use the render prop `renderCustomListItem`.

```jsx
// Signature
function renderCustomListItem({
  item,
  isSelected,
  isHighlighted,
  isDisabled,
  withMultipleSelection,
})

// example
<DropList
  items={[{}, {}, {}, {}]}
  toggler={<SimpleButton text="Click" />}
  renderCustomListItem={({
    item,
    isSelected,
    isHighlighted,
    isDisabled,
    withMultipleSelection,
  }) => (
    <div className={classnames(isSelected && 'is-selected')}>
      <strong>{item.label}</strong>
    </div>
  )}
/>

```

<Canvas>
  <Story name="Items: custom list items">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={<SimpleButton text="Click" />}
        renderCustomListItem={({ item, isSelected }) => (
          <div
            isMenuOpen={boolean('is menu open', true)}
            style={{
              padding: '5px 10px',
              fontSize: '14px',
              color: '#404996',
              cursor: 'pointer',
            }}
          >
            {isSelected ? (
              <strong style={{ color: 'white', backgroundColor: '#404996' }}>
                {item.label}
              </strong>
            ) : (
              <span>{item.label}</span>
            )}
          </div>
        )}
      />
    </div>
  </Story>
</Canvas>

#### Disabled List Items

Sometimes you might need to render the list items that would be disabled, for that you can pass `isDisabled` flag with an item.

<Canvas>
  <Story name="Items: disabled list items">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={disabledItems}
        toggler={<SimpleButton text="Click" />}
        onSelect={selection => {
          console.log('selection', selection)
        }}
      />
    </div>
  </Story>
</Canvas>

<Canvas>
  <Story name="Items: disabled list items (combobox)">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={disabledItems}
        variant="combobox"
        toggler={<SimpleButton text="Click" />}
        onSelect={selection => {
          console.log('selection', selection)
        }}
      />
    </div>
  </Story>
</Canvas>

<Canvas>
  <Story name="Items: disabled list items (Multiple Selection)">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={disabledItems}
        selection={[disabledItems[0]]}
        closeOnSelection={false}
        onSelect={selection => {
          console.log('selection', selection)
        }}
        toggler={<SimpleButton text="Submit" />}
        withMultipleSelection
      />
    </div>
  </Story>
</Canvas>

### Clear on Select

Sometimes is useful to clear the selected item on select.

<Canvas>
  <Story name="Clear on select">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        clearOnSelect
        onSelect={selection => {
          console.log('on select called with:', selection)
        }}
        items={regularItems}
        toggler={<SimpleButton text="Button Toggler" />}
      />
    </div>
  </Story>
</Canvas>

### Multiple selection

Depending on your use case, you might want to set `closeOnSelection = false` when multiple selection is enabled.

<Canvas>
  <Story name="Multiple Selection">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        variant="combobox"
        items={regularItems}
        closeOnSelection={false}
        onSelect={(selection, clickedItem) => {
          console.log('🚀 ~ selection', selection)
          console.log('🚀 ~ clickedItem', clickedItem)
        }}
        selection={select(
          'Selection',
          {
            first: [regularItems[0], regularItems[1]],
            second: [regularItems[1]],
            third: [regularItems[1], regularItems[2]],
          },
          [regularItems[0], regularItems[1]]
        )}
        toggler={<SimpleButton text="Submit" />}
        withMultipleSelection
      />
    </div>
  </Story>
</Canvas>

<Canvas>
  <Story name="With action Item">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 200px 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        variant="combobox"
        items={regularItems
          .slice(0, 3)
          .concat({
            type: 'divider',
            hideOnEmptyInputValue: true,
          })
          .concat({
            label: 'Add tag',
            template: 'Add __inputValue__ tag',
            type: 'action',
            action: 'ADD_TAG',
            hideOnEmptyInputValue: true,
          })}
        onSelect={(selection, clickedItem) => {
          if (
            clickedItem.type === 'action' &&
            clickedItem.action === 'ADD_TAG'
          ) {
            console.log('add tag clicked, do something!')
            console.log('🚀 ~ WithActionItem ~ clickedItem', clickedItem)
          }
        }}
        toggler={<SimpleButton text="Click" />}
      />
    </div>
  </Story>
</Canvas>

See [Table > Column Chooser](href="/?path=/docs/components-structural-table--with-column-chooser") for an implementation.

### Togglers

DropList provides a set of ready-to-use "triggers" or "togglers" components that should cover most if not all of our current needs: `SimpleButton`, `IconBtn`, `MeatButton` (meatball or kebab), `SelectTag` and `SplittedButton`. Import them into your project from `src/components/DropList/DropList.togglers.jsx` and feed them to the `toggler` prop.

#### SplittedButton

This toggler replaces the previous `SplittedButton` component. It's not very different from the other togglers except that it's composed of 2 HSDS Buttons, the "action" and the "toggler". The props to interact / customize them are:
DropList provides a set of ready-to-use "triggers" or "togglers" components that should cover most if not all of our current needs: `SimpleButton`, `IconBtn`, `MeatButton`, `SelectTag` and `SplittedButton`. Import them into your project from `src/components/DropList/DropList.togglers.jsx` and feed them to the `toggler` prop.

```
{
  /** The text on the "action" button */
  text = '',
  /** The HSDS Button kind, affects both buttons */
  kind = 'primary',
  /** The HSDS Button size, affects both buttons */
  size = 'lg',
  /** Callback on the "action" button click */
  onActionClick = noop,
  /** Callback on the "toggler" button click */
  onClick = noop,
  /** Whether the DropList is active (open) or not, affects the "toggler" button */
  isActive = false,
  /** Extra props to pass to the "action" button */
  actionButtonProps = {},
  /** Extra props to pass to the "toggler" button */
  togglerButtonProps = {},
}
```

#### Custom Toggler

The `toggler` prop accepts any React component, so you can provide your own custom trigger. Just one thing is necessary for everything to work as expected and a couple of other considerations:

- (Required) Refs: Wrap your toggler component in `React.forwardRef`, this in turn is fed to Tippy so that it can do its thing. The `ref` should be applied to the button that when clicked is the one that opens/closes the DropList. For a component that illustrates this check the SplittedButton toggler (since this "toggler" is composed of 2 buttons).
- (Required) You need to collect `...rest` from props and spread them on the root of your toggler, for a more complex example ss SplittedButton's code.
- `onClick`: DropList will merge your `onClick` prop with an internal one that opens/closes the DropList (this way you can attach extra actions to the click event). Again, check SplittedButton as an example for when you have 2 buttons each with its own click handler, the one with the prop named `onClick` is the one that will actually open/close the list.
- Active state: Besides adding the `onClick` handler, we also attach the modal open state as the `isActive` prop so you can use it on your toggler, see Button or SplittedButton for an example of this.
- If your "toggler" contains a button or any other clickable element and you would like to avoid closing the DropList on clicking it, add the data attribute `data-ignore-toggling="true"` to that element.
- Aria label: Don't forget to add `aria-label` to the toggler button, with something like "toggle menu".

<Canvas>
  <Story name="Toggler: SimpleButton">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={
          <SimpleButton
            text="Click"
            onClick={() => {
              console.log('Clicked from story')
            }}
          />
        }
      />
    </div>
  </Story>
  <Story name="Toggler: IconBtn">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={
          <IconBtn
            withTooltip
            a11yLabel="Accessibility Wins The Day"
            onClick={() => {
              console.log('Clicked from story')
            }}
            seamless={boolean('seamless', false)}
          />
        }
      />
    </div>
  </Story>
  <Story name="Toggler: MeatButton">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={
          <MeatButton
            a11yLabel="Nice Kebab"
            onClick={() => {
              console.log('Clicked from story')
            }}
            withTooltip
          />
        }
      />
    </div>
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={
          <MeatButton
            a11yLabel="Nice Meatballs"
            meatIcon="meatball"
            onClick={() => {
              console.log('Clicked from story')
            }}
            withTooltip
          />
        }
      />
    </div>
  </Story>
  <Story name="Toggler: NavLink">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <div
        style={{
          width: '100%',
          background: '#005ca4',
          display: 'flex',
        }}
      >
        <DropList
          items={regularItems}
          toggler={
            <NavLink
              text="Mailboxes"
              onClick={() => {
                console.log('Clicked from story')
              }}
            />
          }
        />
        <DropList
          items={itemsWithDivider}
          toggler={
            <NavLink
              text="Docs"
              onClick={() => {
                console.log('Clicked from story')
              }}
            />
          }
        />
      </div>
    </div>
  </Story>
  <Story name="Toggler: SelectTag">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={<SelectTag disabled={boolean('disabled', false)} />}
      />
    </div>
  </Story>
  <Story name="Toggler: SelectTag with error">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={
          <SelectTag
            onClick={() => {
              console.log('Clicked from story')
            }}
            error={'Some error'}
          />
        }
      />
    </div>
  </Story>
  <Story name="Toggler: SplittedButton">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <DropList
        items={regularItems}
        toggler={
          <SplittedButton
            text="Click"
            onActionClick={() => {
              console.log('Action!')
            }}
            onClick={() => {
              console.log('Clicked from story')
            }}
          />
        }
      />
    </div>
  </Story>
</Canvas>
