@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 | |

Usage

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>;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG