@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
3 lines (2 loc) • 1.04 kB
JavaScript
"use client";
import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useState as e}from"react";import i from"@mui/material/IconButton";import o from"@mui/material/Menu";import a from"@mui/material/MenuItem";import n from"@mui/icons-material/MoreVert";import m from"lodash/uniqueId";const l="NexusHexMenu",u=({items:u})=>{const[s]=e((()=>m(`${l}-`))),[c,p]=e(null),d=Boolean(c),h=()=>{p(null)};return t("div",{children:[r(i,{"aria-label":"more",id:s,"data-testid":"menu-icon","aria-controls":"menu","aria-expanded":d?"true":void 0,"aria-haspopup":"true",onClick:t=>{const r=t.currentTarget;p(r)},children:r(n,{})}),r(o,{MenuListProps:{"aria-labelledby":s},className:`${l}-menu`,"data-testid":`${l}-menu`,anchorEl:c,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},open:d,onClose:h,slotProps:{paper:{style:{width:"auto"}}},children:u.map((t=>r(a,{className:`${l}-menuItem`,"data-testid":`${l}-menuItem`,onClick:()=>{t.onClick(),h()},children:t.title},t.title)))})]})};export{u as HexMenu};