"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8652],{78915:function(e,n,t){t.r(n),t.d(n,{_frontmatter:function(){return m},default:function(){return g}});var i=t(53782),l=(t(27378),t(59089)),a=t(29236),o=t(47581),r=t(79803),c=t(74237),s=t(17991),u=t(37603);const m={},p=e=>function(n){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,l.kt)("div",n)},d=p("ComponentProps"),A=p("ComponentChecklist"),h={_frontmatter:m},f=a.Z;function g(e){let{components:n}=e,t=(0,i.Z)(e,["components"]);return(0,l.kt)(f,Object.assign({},h,t,{components:n,mdxType:"MDXLayout"}),(0,l.kt)(u.Z,{replacementUrl:"/components/action-menu/react/latest",mdxType:"DeprecationBanner"}),(0,l.kt)("br",null),(0,l.kt)(r.Z,{sx:{border:"1px solid",borderColor:"border.default",borderRadius:2,padding:6},mdxType:"Box"},(0,l.kt)(c.P,{mdxType:"ActionMenu"},(0,l.kt)(c.P.Button,null,"Menu"),(0,l.kt)(c.P.Overlay,null,(0,l.kt)(s.S,{mdxType:"ActionList"},(0,l.kt)(s.S.Item,null,"Copy link",(0,l.kt)(s.S.TrailingVisual,null,"⌘C")),(0,l.kt)(s.S.Item,null,"Quote reply",(0,l.kt)(s.S.TrailingVisual,null,"⌘Q")),(0,l.kt)(s.S.Item,null,"Edit comment",(0,l.kt)(s.S.TrailingVisual,null,"⌘E")),(0,l.kt)(s.S.Divider,null),(0,l.kt)(s.S.Item,{variant:"danger"},"Delete file",(0,l.kt)(s.S.TrailingVisual,null,"⌘D")))))),(0,l.kt)("br",null),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"import {ActionMenu} from '@primer/react'\n")),(0,l.kt)("br",null),(0,l.kt)("h2",null,"Examples"),(0,l.kt)("h3",null,"Minimal example"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"ActionMenu")," ships with ",(0,l.kt)("inlineCode",{parentName:"p"},"ActionMenu.Button")," which is an accessible trigger for the overlay. It's recommended to compose ",(0,l.kt)("inlineCode",{parentName:"p"},"ActionList")," with ",(0,l.kt)("inlineCode",{parentName:"p"},"ActionMenu.Overlay")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},"<ActionMenu>\n  <ActionMenu.Button>Menu</ActionMenu.Button>\n\n  <ActionMenu.Overlay>\n    <ActionList>\n      <ActionList.Item onSelect={event => console.log('New file')}>New file</ActionList.Item>\n      <ActionList.Item>Copy link</ActionList.Item>\n      <ActionList.Item>Edit file</ActionList.Item>\n      <ActionList.Divider />\n      <ActionList.Item variant=\"danger\">Delete file</ActionList.Item>\n    </ActionList>\n  </ActionMenu.Overlay>\n</ActionMenu>\n")),(0,l.kt)("h3",null,"With a custom anchor"),(0,l.kt)("p",null,"You can choose to have a different ",(0,l.kt)("em",{parentName:"p"},"anchor")," for the Menu depending on the application's context."),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<ActionMenu>\n  <ActionMenu.Anchor>\n    <IconButton icon={KebabHorizontalIcon} variant="invisible" aria-label="Open column options" />\n  </ActionMenu.Anchor>\n\n  <ActionMenu.Overlay>\n    <ActionList>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <PencilIcon />\n        </ActionList.LeadingVisual>\n        Rename\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArchiveIcon />\n        </ActionList.LeadingVisual>\n        Archive all cards\n      </ActionList.Item>\n      <ActionList.Item variant="danger">\n        <ActionList.LeadingVisual>\n          <TrashIcon />\n        </ActionList.LeadingVisual>\n        Delete\n      </ActionList.Item>\n    </ActionList>\n  </ActionMenu.Overlay>\n</ActionMenu>\n')),(0,l.kt)("h3",null,"With Groups"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<ActionMenu>\n  <ActionMenu.Button>Open column menu</ActionMenu.Button>\n\n  <ActionMenu.Overlay>\n    <ActionList showDividers>\n      <ActionList.Group title="Live query">\n        <ActionList.Item>\n          <ActionList.LeadingVisual>\n            <SearchIcon />\n          </ActionList.LeadingVisual>\n          repo:github/memex,github/github\n        </ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Divider />\n      <ActionList.Group title="Layout" variant="subtle">\n        <ActionList.Item>\n          <ActionList.LeadingVisual>\n            <NoteIcon />\n          </ActionList.LeadingVisual>\n          Table\n          <ActionList.Description variant="block">\n            Information-dense table optimized for operations across teams\n          </ActionList.Description>\n        </ActionList.Item>\n        <ActionList.Item role="listitem">\n          <ActionList.LeadingVisual>\n            <ProjectIcon />\n          </ActionList.LeadingVisual>\n          Board\n          <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>\n        </ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Divider />\n      <ActionList.Group>\n        <ActionList.Item>\n          <ActionList.LeadingVisual>\n            <FilterIcon />\n          </ActionList.LeadingVisual>\n          Save sort and filters to current view\n        </ActionList.Item>\n        <ActionList.Item>\n          <ActionList.LeadingVisual>\n            <FilterIcon />\n          </ActionList.LeadingVisual>\n          Save sort and filters to new view\n        </ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Divider />\n      <ActionList.Group>\n        <ActionList.Item>\n          <ActionList.LeadingVisual>\n            <GearIcon />\n          </ActionList.LeadingVisual>\n          View settings\n        </ActionList.Item>\n      </ActionList.Group>\n    </ActionList>\n  </ActionMenu.Overlay>\n</ActionMenu>\n')),(0,l.kt)("h3",null,"With selection"),(0,l.kt)("p",null,"Use ",(0,l.kt)("inlineCode",{parentName:"p"},"selectionVariant")," on ",(0,l.kt)("inlineCode",{parentName:"p"},"ActionList")," to create a menu with single or multiple selection."),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript",metastring:"live noinline",live:!0,noinline:!0},"const fieldTypes = [\n  {icon: TypographyIcon, name: 'Text'},\n  {icon: NumberIcon, name: 'Number'},\n  {icon: CalendarIcon, name: 'Date'},\n  {icon: SingleSelectIcon, name: 'Single select'},\n  {icon: IterationsIcon, name: 'Iteration'},\n]\n\nconst Example = () => {\n  const [selectedIndex, setSelectedIndex] = React.useState(1)\n  const selectedType = fieldTypes[selectedIndex]\n\n  return (\n    <ActionMenu>\n      <ActionMenu.Button aria-label=\"Select field type\" leadingIcon={selectedType.icon}>\n        {selectedType.name}\n      </ActionMenu.Button>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList selectionVariant=\"single\">\n          {fieldTypes.map((type, index) => (\n            <ActionList.Item key={index} selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)}>\n              <ActionList.LeadingVisual>\n                <type.icon />\n              </ActionList.LeadingVisual>\n              {type.name}\n            </ActionList.Item>\n          ))}\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  )\n}\n\nrender(<Example />)\n")),(0,l.kt)("h3",null,"With External Anchor"),(0,l.kt)("p",null,"To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as ",(0,l.kt)("inlineCode",{parentName:"p"},"anchorRef")," to ",(0,l.kt)("inlineCode",{parentName:"p"},"ActionMenu"),". Make sure you add ",(0,l.kt)("inlineCode",{parentName:"p"},"aria-expanded")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"aria-haspopup")," to the external anchor:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript",metastring:"live noinline",live:!0,noinline:!0},"const Example = () => {\n  const [open, setOpen] = React.useState(false)\n  const anchorRef = React.useRef(null)\n\n  return (\n    <>\n      <Button ref={anchorRef} aria-haspopup=\"true\" aria-expanded={open} onClick={() => setOpen(!open)}>\n        {open ? 'Close Menu' : 'Open Menu'}\n      </Button>\n\n      <ActionMenu open={open} onOpenChange={setOpen} anchorRef={anchorRef}>\n        <ActionMenu.Overlay>\n          <ActionList>\n            <ActionList.Item>Copy link</ActionList.Item>\n            <ActionList.Item>Quote reply</ActionList.Item>\n            <ActionList.Item>Edit comment</ActionList.Item>\n            <ActionList.Divider />\n            <ActionList.Item variant=\"danger\">Delete file</ActionList.Item>\n          </ActionList>\n        </ActionMenu.Overlay>\n      </ActionMenu>\n    </>\n  )\n}\n\nrender(<Example />)\n")),(0,l.kt)("h3",null,"With Overlay Props"),(0,l.kt)("p",null,"To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as ",(0,l.kt)("inlineCode",{parentName:"p"},"anchorRef")," to ",(0,l.kt)("inlineCode",{parentName:"p"},"ActionMenu"),":"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript",metastring:"live noinline",live:!0,noinline:!0},'const handleEscape = () => alert(\'you hit escape!\')\n\nrender(\n  <ActionMenu>\n    <ActionMenu.Button>Open Actions Menu</ActionMenu.Button>\n    <ActionMenu.Overlay width="medium" onEscape={handleEscape}>\n      <ActionList>\n        <ActionList.Item>\n          Open current Codespace\n          <ActionList.Description variant="block">\n            Your existing Codespace will be opened to its previous state, and you&apos;ll be asked to manually switch to\n            new-branch.\n          </ActionList.Description>\n          <ActionList.TrailingVisual>⌘O</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item>\n          Create new Codespace\n          <ActionList.Description variant="block">\n            Create a brand new Codespace with a fresh image and checkout this branch.\n          </ActionList.Description>\n          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n        </ActionList.Item>\n      </ActionList>\n    </ActionMenu.Overlay>\n  </ActionMenu>,\n)\n')),(0,l.kt)("h2",null,"Props"),(0,l.kt)(d,{data:o,mdxType:"ComponentProps"}),(0,l.kt)("h2",null,"Status"),(0,l.kt)(A,{items:{propsDocumented:!0,noUnnecessaryDeps:!0,adaptsToThemes:!0,adaptsToScreenSizes:!0,fullTestCoverage:!0,usedInProduction:!0,usageExamplesDocumented:!0,hasStorybookStories:!0,designReviewed:!0,a11yReviewed:!0,stableApi:!0,addressedApiFeedback:!1,hasDesignGuidelines:!0,hasFigmaComponent:!0},mdxType:"ComponentChecklist"}),(0,l.kt)("h2",null,"Further reading"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://primer.style/design/components/action-list"},"Interface guidelines: Action List + Menu")),(0,l.kt)("h2",null,"Related components"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/ActionList"},"ActionList")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/SelectPanel"},"SelectPanel")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/Button"},"Button"))))}g.isMDXComponent=!0},29236:function(e,n,t){t.d(n,{Z:function(){return N}});var i=t(22328),l=t(14534),a=t(79803),o=t(31857),r=t(4522),c=t(10036),s=t(27378),u=t(57017),m=t(80626),p=t(68649),d=t(15534),A=t(53657),h=t(37643);var f=function(e){let{href:n}=e;return s.createElement("li",null,s.createElement(A.Z,{href:n,target:"_blank"},s.createElement(a.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},s.createElement(h.g_Y,null),s.createElement(c.Z,null,"Source"))))};var g=function(e){let{href:n}=e;return s.createElement("li",null,s.createElement(A.Z,{href:n,target:"_blank"},s.createElement(a.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},s.createElement(h.wz_,null),s.createElement(c.Z,null,"Rails"))))};function L(){return s.createElement("svg",{viewBox:"0 0 16 16","aria-hidden":"true",width:16,height:16,fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.129 2.533a13 13 0 0 0-1.84 1.035c.566.467 1.13.98 1.683 1.532a23.93 23.93 0 0 1 1.533 1.683 13 13 0 0 0 1.034-1.84c.335-.742.504-1.372.53-1.856.026-.485-.091-.735-.22-.864-.128-.128-.379-.246-.863-.22-.485.027-1.114.196-1.857.53Zm-.616-1.368c-.785.354-1.624.842-2.477 1.444A15.152 15.152 0 0 0 5.56 1.166C4.72.787 3.901.546 3.167.506c-.733-.04-1.47.12-2.006.657-.536.536-.696 1.273-.656 2.006.04.733.281 1.55.66 2.39.353.786.84 1.624 1.443 2.478a15.15 15.15 0 0 0-1.442 2.475c-.378.84-.62 1.657-.66 2.39-.04.734.12 1.47.657 2.007.536.536 1.273.696 2.006.656.733-.04 1.55-.281 2.39-.66a15.15 15.15 0 0 0 2.476-1.441c.853.601 1.69 1.089 2.476 1.442.84.378 1.657.62 2.39.66.734.04 1.47-.121 2.007-.657.536-.536.696-1.273.656-2.006-.04-.734-.281-1.551-.66-2.391a15.149 15.149 0 0 0-1.441-2.475 15.15 15.15 0 0 0 1.443-2.478c.378-.84.62-1.657.66-2.39.04-.734-.121-1.47-.657-2.007-.536-.536-1.273-.696-2.006-.656-.733.04-1.55.281-2.391.66Zm-7.98 3.78c.259.574.607 1.195 1.035 1.838.467-.566.98-1.131 1.533-1.684a23.915 23.915 0 0 1 1.682-1.531 12.995 12.995 0 0 0-1.84-1.035c-.742-.334-1.372-.503-1.856-.53-.485-.026-.735.092-.864.22-.128.129-.246.38-.22.864.027.484.196 1.114.53 1.857ZM6.161 6.16a22.144 22.144 0 0 0-1.678 1.877A22.14 22.14 0 0 0 6.16 9.91a22.155 22.155 0 0 0 1.876 1.678 22.137 22.137 0 0 0 1.877-1.678c.62-.62 1.181-1.251 1.676-1.874A22.137 22.137 0 0 0 9.911 6.16a22.142 22.142 0 0 0-1.875-1.677A22.144 22.144 0 0 0 6.161 6.16Zm-3.626 4.967c.258-.574.605-1.194 1.033-1.837.467.566.98 1.13 1.531 1.682a23.922 23.922 0 0 0 1.684 1.532c-.643.428-1.263.775-1.838 1.034-.743.334-1.373.503-1.857.53-.484.026-.735-.091-.864-.22-.128-.128-.245-.38-.22-.864.027-.484.196-1.114.53-1.857Zm8.592 2.411a13 13 0 0 1-1.837-1.034c.566-.467 1.13-.98 1.683-1.532a23.903 23.903 0 0 0 1.531-1.682c.428.643.775 1.263 1.034 1.837.334.743.503 1.373.53 1.857.026.485-.091.736-.22.864-.128.129-.38.246-.864.22-.484-.027-1.114-.195-1.857-.53ZM8.034 8.782a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"}))}var k=function(e){let{href:n}=e;return s.createElement("li",null,s.createElement(A.Z,{href:n,target:"_blank"},s.createElement(a.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},s.createElement(L,null),s.createElement(c.Z,null,"React"))))},x=t(5544),v=t(8304);var y=function(e){let{href:n}=e;return s.createElement("li",null,s.createElement(A.Z,{href:n,target:"_blank"},s.createElement(a.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},s.createElement(h.vJ3,null),s.createElement(c.Z,null,"Lookbook"))))};var I=function(e){let{href:n}=e;return s.createElement("li",null,s.createElement(A.Z,{href:n,target:"_blank"},s.createElement(a.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},s.createElement(h.vJ3,null),s.createElement(c.Z,null,"Storybook"))))};function b(){return s.createElement("svg",{viewBox:"0 0 16 16","aria-hidden":"true",width:16,height:16,fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.417 0A3.167 3.167 0 0 0 3.37 5.583 3.16 3.16 0 0 0 2.25 8a3.16 3.16 0 0 0 1.12 2.417 3.167 3.167 0 1 0 5.213 2.417V10.687a3.165 3.165 0 0 0 3.87-4.964A3.167 3.167 0 0 0 10.582 0H5.417Zm4.727 6.333h.21a1.665 1.665 0 1 1-.21 0Zm.25-1.5h.19a1.667 1.667 0 1 0 0-3.333H5.416a1.667 1.667 0 1 0 0 3.333h4.687a3.226 3.226 0 0 1 .29 0ZM3.75 8c0-.92.746-1.667 1.667-1.667h1.666v3.334H5.417C4.497 9.667 3.75 8.92 3.75 8Zm1.667 3.167a1.667 1.667 0 1 0 1.666 1.667v-1.667H5.417Z"}))}var E=function(e){let{href:n}=e;return s.createElement("li",null,s.createElement(A.Z,{href:n,target:"_blank"},s.createElement(a.Z,{sx:{display:"flex",gap:2,alignItems:"center"}},s.createElement(b,null),s.createElement(c.Z,null,"Figma"))))},Z=t(88941);var M=function(e){let{"aria-labelledby":n,items:t}=e;return s.createElement(Z.$,{"aria-labelledby":n},t.map((e=>s.createElement(Z.$.Item,{key:e.title,href:e.url},e.title))))},w=t(45153),C=t(25414);var N=function(e){let{children:n,pageContext:t,path:i}=e,{title:A,description:h,figma:L,react:b,status:Z,a11yReviewed:N,source:O,rails:T,storybook:V,lookbook:R,additionalContributors:B,componentId:P}=t.frontmatter;B||(B=[]);const G=l.w[P];G&&(A||(A=G.displayName),h||(h=G.description));const _=((e,n)=>{const t=[],i=(e,n)=>{if(e.url===n)t.push({title:e.title,url:e.url});else if(e.children)for(const l of e.children)if(i(l,n),t.length>0){t.unshift({title:e.title,url:e.url});break}};for(const l of n)if(i(l,e),t.length>0)break;return t})(i,w).filter((e=>e.url));return s.createElement(a.Z,{sx:{flexDirection:"column",minHeight:"100vh",display:"flex"}},s.createElement(u.Z,{title:A,description:h}),s.createElement(m.Z,{path:i}),s.createElement(S,{sx:{flex:"1 1 auto",flexDirection:"row",display:"flex"}},s.createElement(a.Z,{sx:{display:["none",null,null,"block"]}},s.createElement(d.Z,null)),s.createElement(a.Z,{sx:{justifyContent:"center",flexDirection:"row-reverse",display:"flex",maxWidth:"1200px",mx:"auto",width:"100%",p:[4,5,6,7]}},t.tableOfContents.items?s.createElement(D,{sx:{width:220,flex:"0 0 auto",marginLeft:[null,7,8,9],display:["none",null,"block"],position:"sticky",top:m.M+48,maxHeight:"calc(100vh - "+m.M+"px - 48px)"}},s.createElement(o.Z,{as:"h3",sx:{fontSize:1,display:"inline-block",fontWeight:"bold",pl:3},id:"toc-heading"},"On this page"),s.createElement(M,{"aria-labelledby":"toc-heading",items:t.tableOfContents.items})):null,s.createElement(a.Z,{sx:{width:"100%",maxWidth:"960px"}},s.createElement(a.Z,{as:"main",id:"skip-nav",sx:{mb:4}},_.length>1?s.createElement(r.Z,{sx:{mb:4}},_.map((e=>s.createElement(r.Z.Item,{key:e.url,href:(0,C.withPrefix)(e.url),selected:i===e.url},e.title)))):null,s.createElement(o.Z,{as:"h1",sx:{fontSize:7}},A),h?s.createElement(a.Z,{sx:{fontSize:3,mb:3}},h):null,Z||O||V||R||L||T||b?s.createElement(a.Z,{sx:{display:"flex",flexWrap:"wrap",columnGap:3,mb:7,mt:2,rowGap:3,alignItems:"center",fontSize:1}},Z?s.createElement(a.Z,{as:"ul",sx:{display:"flex",gap:1,alignItems:"center",m:0,p:0,paddingInline:0,listStyle:"none"}},s.createElement("li",null,s.createElement(x.Z,{status:Z})),s.createElement("li",null,s.createElement(v.Z,{a11yReviewed:N}))):null,O||V||R||L||T||b?s.createElement(a.Z,{as:"ul",sx:{display:"flex",flexWrap:"wrap",gap:4,alignItems:"center",m:0,p:0,paddingInline:0,listStyle:"none"}},O?s.createElement(f,{href:O}):null,R?s.createElement(y,{href:R}):null,V?s.createElement(I,{href:V}):null,b?s.createElement(k,{href:b}):null,T?s.createElement(g,{href:T}):null,L?s.createElement(E,{href:L}):null):null):null),t.tableOfContents.items?s.createElement(a.Z,{sx:{display:["block",null,"none"],mb:5,borderColor:"border.muted",bg:"canvas.subtle",borderWidth:"1px",borderStyle:"solid",borderRadius:2}},s.createElement(a.Z,{sx:{px:3,py:2}},s.createElement(a.Z,{sx:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",display:"flex"}},s.createElement(c.Z,{sx:{fontWeight:"bold"}},"On this page"))),s.createElement(a.Z,{sx:{borderTop:"1px solid",borderColor:"border.muted"}},s.createElement(M,{items:t.tableOfContents.items}))):null,n,s.createElement(p.Z,{editUrl:t.editUrl,contributors:t.contributors.concat(B.map((e=>({login:e}))))})))))},S=(0,i.default)(a.Z)({zIndex:0}),D=(0,i.default)(a.Z).withConfig({displayName:"layout___StyledBox2",componentId:"sc-o2kgno-0"})({gridArea:"table-of-contents",overflow:"auto"})}}]);
//# sourceMappingURL=component---content-action-menu-mdx-c0ff5afc8d080077b56b.js.map