import { Meta, Controls, Canvas } from '@storybook/addon-docs/blocks'
import { Warning } from '../../docs/helpers'
import * as CellDropdownMenuStories from './cell-dropdown-menu.stories'

<Meta of={CellDropdownMenuStories} />

# GridCellDropdownMenu

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

This component wraps [DropdownMenu](?path=/docs/pv-uikit-dropdownmenu--docs) and adjusts it a little for use in the Grid. Most of the documentation for `DropdownMenu` will apply to this control with some exceptions. Most notably, you cannot provide a custom `trigger` function like you can with a `DropdownMenu`.

<Warning>
**You likely do not need this component!**

If you are trying to allow your users to edit a multiple choice value, use [our `GridEditorCombobox` component](/docs/pv-grid-components-editors-grideditorcombobox--docs) and an edit-in-place pattern instead.

If you are trying to add a triple-dot menu with actions for the whole row, use [our Actions Menu configuration](/docs/pv-grid-components-grid-actions-menu--docs) instead which includes right-click menu support for the row.

</Warning>

<Canvas of={CellDropdownMenuStories.Default} />

### Props unique to `GridCellDropdownMenu`

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

### Props inherited from `DropdownMenu` and `Menu`

Since this component uses DropdownMenu, please [see the documentation for that component](?path=/docs/pv-uikit-dropdownmenu--docs) for more information on configuration.

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

## Usage with Column definition

This component should be used as part of a custom `Renderer` method on the Column configuration. If not providing a label to the trigger, it is also recommended you mark the column as not sortable and not resizable.

```tsx
import { GridCellDropdownMenu, Column } from '@planview/pv-grid'
import { DotFilled } from '@planview/pv-icons'
import { ListItem } from '@planview/pv-uikit'
import { color } from '@planview/pv-utilities'

const DropdownColumn: Column = {
    id: 'dropdown',
    label: 'Review',
    cell: {
        Renderer({ tabIndex, rowId }) {
            return (
                <GridCellDropdownMenu
                    tabIndex={tabIndex}
                    label="Review Actions"
                    alignRight
                    trigger={{
                        label: 'Review Actions',
                        withCaret: true,
                    }}
                >
                    <ListItem
                        icon={<DotFilled color={color.iconError} />}
                        label="Reject review"
                        onActivate={() => {
                            /* Handle click, passing rowId */
                        }}
                    />
                    <ListItem
                        icon={<DotFilled color={color.iconSuccess} />}
                        label="Approve review"
                        onActivate={() => {
                            /* Handle click, passing rowId */
                        }}
                    />
                </GridCellDropdownMenu>
            )
        },
    },
}
```