import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Basic from "examples/dnd-list/basic.tsx";
import Stateless from "examples/dnd-list/stateless.tsx";
import Removable from "examples/dnd-list/removable.tsx";
import VaryingHeights from "examples/dnd-list/varyingHeights.tsx";
import CustomDragHandle from "examples/dnd-list/customDragHandle.tsx";
import OverrideLabel from "examples/dnd-list/overrideLabel.tsx";

import { StatefulList } from "baseui/dnd-list";
import * as ListExports from "baseui/dnd-list";
import Yard from "../../components/yard/index";
import dndListYardConfig from "../../components/yard/config/dnd-list";

export default Layout;

# Drag and Drop List

<Yard placeholderHeight={208} {...dndListYardConfig} />

Allows users to create vertically sortable lists supporting drag and drop, touch or keyboard input.

## When to use

- When a user wants to change a collection order.

## Accessibility

- `tab` and `shift+tab` to focus items
- `space` to `lift` or drop the item
- `j` or `arrow down` to move the lifted item down
- `k` or `arrow up` to move the lifted item up
- `escape` to cancel the lift and return the item to its initial position

This component also supports iOS and Android browsers and screen readers.

## Examples

<Example title="Drag and Drop basic usage" path="dnd-list/stateless.tsx">
  <Stateless />
</Example>

<Example title="Drag and Drop stateful usage" path="dnd-list/basic.tsx">
  <Basic />
</Example>

<Example
  title="Drag and Drop with removable items"
  path="dnd-list/removable.tsx"
>
  <Removable />
</Example>

<Example
  title="Drag and Drop with varying heights"
  path="dnd-list/varyingHeights.tsx"
>
  <VaryingHeights />
</Example>

<Example
  title="Drag and Drop with custom drag handle"
  path="dnd-list/customDragHandle.tsx"
>
  <CustomDragHandle />
</Example>

<Example
  title="Drag and Drop with label override"
  path="dnd-list/overrideLabel.tsx"
>
  <OverrideLabel />
</Example>

<Exports
  component={ListExports}
  title="Dnd List exports"
  path="baseui/dnd-list"
/>