import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as ComboboxTreeStories from './single.stories.tsx'

<Meta of={ComboboxTreeStories} />

# GridEditorComboboxTree

```tsx
import { GridEditorComboboxTree } from '@planview/pv-grid'
```

The combobox tree cell editor uses the [ComboboxTree](?path=/docs/pv-uikit-comboboxtree--docs) component internally. It lets users add or edit a value from a set of predefined options, by either typing a value directly or by selecting one from the list.

**Note:** When using the `GridEditorComboboxTree` it is [good practice](https://design.planview.com/components/grid/grid-editors#combobox-tree-editor) to use the `GridCellDefault` with `withCaret` set to true in the `Renderer` function.

<Canvas of={ComboboxTreeStories.Default} />

### Props provided by the Grid (via `Editor`)

Additional props are provided by the grid that are not used by this editor.

<Controls include={['onConfirm', 'onCancel', 'tabIndex']} />

### Props to customize behavior

<Controls exclude={['onConfirm', 'onCancel', 'tabIndex']} />

## Usage with Column definition

This component should be used as part of a custom `Editor` method on the Column configuration.

```tsx
import { GridEditorCombobox, Column } from '@planview/pv-grid'

const LANES: ComboboxTreeOption[] = [
    { label: 'Inbox', value: '1' },
    {
        label: 'Backlog',
        value: '2',
        children: [
            { label: 'Activities', value: '2-1' },
            { label: 'Design', value: '2-2' },
            { label: 'Development', value: '2-3' },
        ],
    },
    {
        label: 'Up next',
        value: '3',
        children: [
            { label: 'Activities', value: '3-1' },
            { label: 'Design', value: '3-2' },
            { label: 'Development', value: '3-3' },
        ],
    },
]

const EditableColumn: Column = {
    id: 'lane',
    label: 'Combobox Editor Tree',
    sortable: false,
    width: 300,
    cell: {
        editable: true,
        label(props) {
            return props.value?.label || 'Select lane'
        },
        Renderer(props) {
            return <GridCellDefault {...props} withCaret />
        },
        Editor(props) {
            return (
                <GridEditorCombobox
                    {...props}
                    options={LANES}
                    clearable={false}
                />
            )
        },
    },
}
```