npm package: @paprika/overflow-menu
Description: OverflowMenu component displays a trigger button, which when clicked displays a list of items in a dropdown menu format. These items can be raw content, Links or actions such as Delete, which will prompt a confirmation panel to be displayed.
Author: @paprika
Latest version: 5.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/overflow-menu

## Description

OverflowMenu component displays a trigger button, which when clicked displays a list of items in a dropdown menu format. These items can be raw content, Links or actions such as Delete, which will prompt a confirmation panel to be displayed.

## Installation

```
yarn add @paprika/overflow-menu
```

or with npm:

```
npm install @paprika/overflow-menu
```

## Props

### OverflowMenu

| Prop      | Type                                                                                                        | required | default                    | Description                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------------- | -------- | -------------------------- | ----------------------------------------------------------------------------------------- |
| align     | [ Popover.types.align.TOP, Popover.types.align.RIGHT, Popover.types.align.BOTTOM, Popover.types.align.LEFT] | false    | Popover.types.align.BOTTOM | Where the popover content is positioned relative to the trigger or getPositioningElement. |
| children  | node                                                                                                        | true     | -                          | Children should consist of <OverflowMenu.Item />                                          |
| edge      | [ Popover.types.align.LEFT, Popover.types.align.RIGHT, null]                                                | false    | null                       | If provided, will align Popover to specified edge of Trigger                              |
| isOpen    | bool                                                                                                        | false    | null                       | Control if the overflow menu popover open.                                                |
| maxHeight | [number,string]                                                                                             | false    | 300                        | The maximum height of the OverflowMenu content                                            |
| onClose   | func                                                                                                        | false    | null                       | If provided, will fire when the Popover is closed                                         |
| zIndex    | number                                                                                                      | false    | zValue(1)                  | The z-index for the popover / confirmation                                                |

### OverflowMenu.Item

| Prop               | Type | required | default  | Description                                                   |
| ------------------ | ---- | -------- | -------- | ------------------------------------------------------------- |
| children           | node | true     | -        | HTML for each item                                            |
| isDestructive      | bool | false    | false    | If the item is destructive.                                   |
| onClick            | func | false    | () => {} | Callback to be executed when button is clicked                |
| onKeyDown          | func | false    | () => {} | Callback to be executed when key is pressed                   |
| onClose            | func | false    | () => {} | Callback to be executed when overflow menu needs to be closed |
| onShowConfirmation | func | false    | () => {} | Callback to be executed when delete item is clicked           |
| renderConfirmation | func | false    | null     | Render prop to render the replacement node                    |

### OverflowMenu.LinkItem

| Prop       | Type   | required | default  | Description                                 |
| ---------- | ------ | -------- | -------- | ------------------------------------------- |
| children   | node   | true     | -        | HTML for each LinkItem                      |
| link       | string | true     | -        | The url for the href                        |
| onKeyDown  | func   | false    | () => {} | Callback to be executed when key is pressed |
| isExternal | bool   | false    | false    | Should the link open content in a new tab   |

### OverflowMenu.Trigger

| Prop       | Type                                                                                | required | default                     | Description                         |
| ---------- | ----------------------------------------------------------------------------------- | -------- | --------------------------- | ----------------------------------- |
| children   | node                                                                                | false    | null                        |                                     |
| buttonType | [ Trigger.types.button.ICON, Trigger.types.button.RAW, Trigger.types.button.SIMPLE] | false    | Trigger.types.button.SIMPLE | Determine the styling of the button |
| isOpen     | bool                                                                                | false    | false                       |                                     |
| menuRefId  | string                                                                              | false    | ""                          |                                     |
| onClick    | func                                                                                | false    | () => {}                    |                                     |
| onOpenMenu | func                                                                                | false    | () => {}                    |                                     |
| triggerRef | custom                                                                              | false    | null                        |                                     |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

```js
import OverflowMenu from "@paprika/overflow-menu";
import Confirmation from "@paprika/confirmation";

<OverflowMenu>
  <OverflowMenu.Trigger>Trigger</OverflowMenu.Trigger>
  <OverflowMenu.Content className="my-popover-classname" />
  <OverflowMenu.Item onClick={() => {}}>Edit</OverflowMenu.Item>
  <OverflowMenu.LinkItem isExternal link="http://www.wegalvanize.com">
    External link
  </OverflowMenu.LinkItem>
  <OverflowMenu.Item isDisabled onClick={() => {}}>
    Disabled Item
  </OverflowMenu.Item>
  <OverflowMenu.Divider />
  <OverflowMenu.Item
    isDestructive
    renderConfirmation={onCloseMenu => {
      return (
        <Confirmation
          body="Lorem ipsum dolor amet vexillologist tacos selvage narwhal butcher twee ethical hot chicken."
          confirmLabel="Delete filter"
          defaultIsOpen
          heading="Delete filter?"
          onConfirm={handleConfirm}
          onClose={handleCloseConfirm(onCloseMenu)}
        />
      );
    }}
  >
    Delete filter
  </OverflowMenu.Item>
</OverflowMenu>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/buttons-overflowmenu--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/OverflowMenu/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/overflow-menu%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/OverflowMenu/CHANGELOG.md)