Socket
Socket
Sign inDemoInstall

@paprika/overflow-menu

Package Overview
Dependencies
112
Maintainers
4
Versions
115
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@paprika/overflow-menu

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.


Version published
Maintainers
4
Weekly downloads
2,853
decreased by-10.25%

Weekly downloads

Readme

Source

@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

PropTyperequireddefaultDescription
align[ Popover.types.align.TOP, Popover.types.align.RIGHT, Popover.types.align.BOTTOM, Popover.types.align.LEFT]falsePopover.types.align.BOTTOMWhere the popover content is positioned relative to the trigger or getPositioningElement.
childrennodetrue-Children should consist of <OverflowMenu.Item />
edge[ Popover.types.align.LEFT, Popover.types.align.RIGHT, null]falsenullIf provided, will align Popover to specified edge of Trigger
isOpenboolfalsenullControl if the overflow menu popover open.
maxHeight[number,string]false300The maximum height of the OverflowMenu content
onClosefuncfalsenullIf provided, will fire when the Popover is closed
zIndexnumberfalsezValue(1)The z-index for the popover / confirmation

OverflowMenu.Item

PropTyperequireddefaultDescription
childrennodetrue-HTML for each item
isDestructiveboolfalsefalseIf the item is destructive.
onClickfuncfalse() => {}Callback to be executed when button is clicked
onKeyDownfuncfalse() => {}Callback to be executed when key is pressed
onClosefuncfalse() => {}Callback to be executed when overflow menu needs to be closed
onShowConfirmationfuncfalse() => {}Callback to be executed when delete item is clicked
renderConfirmationfuncfalsenullRender prop to render the replacement node

OverflowMenu.LinkItem

PropTyperequireddefaultDescription
childrennodetrue-HTML for each LinkItem
linkstringtrue-The url for the href
onKeyDownfuncfalse() => {}Callback to be executed when key is pressed
isExternalboolfalsefalseShould the link open content in a new tab

OverflowMenu.Trigger

PropTyperequireddefaultDescription
childrennodefalsenull
buttonType[ Trigger.types.button.ICON, Trigger.types.button.RAW, Trigger.types.button.SIMPLE]falseTrigger.types.button.SIMPLEDetermine the styling of the button
isOpenboolfalsefalse
menuRefIdstringfalse""
onClickfuncfalse() => {}
onOpenMenufuncfalse() => {}
triggerRefcustomfalsenull

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>;
  • Storybook Showcase
  • GitHub source code
  • Create GitHub issue
  • CHANGELOG

FAQs

Last updated on 06 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc