var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var M=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!g.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(c=h(e,o))||c.enumerable});return t};var b=(t,e,i)=>(i=t!=null?u(p(t)):{},s(e||!t||!t.__esModule?r(i,"default",{value:t,enumerable:!0}):i,t)),D=t=>s(r({},"__esModule",{value:!0}),t);var a=M((C,d)=>{d.exports=_jsx_runtime});var y={};f(y,{default:()=>A,frontmatter:()=>x});var n=b(a()),x={id:"menu-dialog",title:"Menu Dialog",description:"A list of menu options inside a modal dialog."};function l(t){let e=Object.assign({p:"p",code:"code",h2:"h2",pre:"pre",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},t.components),{ComponentLinks:i}=e;return i||F("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"MenuDialog"}),` can be used as a basis for global search or things like a command menu. It behaves exactly like a `,(0,n.jsx)(e.code,{children:"Menu"}),", meaning it supports keyboard controls and letter navigation."]}),` `,(0,n.jsx)(i,{github:{package:"saas-ui-modals"},npm:{package:"@saas-ui/modals"}}),` `,(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`import { MenuDialog, MenuDialogList } from '@saas-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:`import { Button, useDisclosure, MenuItem } from '@chakra-ui/react' import { MenuDialog, MenuDialogList } from '@saas-ui/react' import { FiUsers, FiTag, FiArchive } from 'react-icons/fi' export default function Page() { const disclosure = useDisclosure() return ( <> } command="A"> Assign } command="L"> Add label } command="C"> Close ) } `})}),` `,(0,n.jsx)(e.h3,{id:"grouped-items",children:"Grouped items"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:`import { Button, useDisclosure, MenuGroup, MenuItem } from '@chakra-ui/react' import { MenuDialog, MenuDialogList } from '@saas-ui/react' import { FiUsers, FiTag, FiArchive, FiSettings } from 'react-icons/fi' export default function Page() { const disclosure = useDisclosure() return ( <> } command="A"> Assign } command="L"> Add label } command="C"> Close }>Change theme ) } `})}),` `,(0,n.jsx)(e.h2,{id:"accessibility",children:"Accessibility"}),` `,(0,n.jsx)(e.h3,{id:"keyboard-interaction",children:"Keyboard Interaction"}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Key"}),(0,n.jsx)(e.th,{children:"Action"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:"Enter"})," or ",(0,n.jsx)(e.code,{children:"Space"})]}),(0,n.jsx)(e.td,{children:"When the menu is open, closes the dialog."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"ArrowDown"})}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus down to the next item."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"ArrowUp"})}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus up to the next item."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"Escape"})}),(0,n.jsx)(e.td,{children:"When the menu is open, closes the menu."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"Tab"})}),(0,n.jsx)(e.td,{children:"no effect"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"Home"})}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus to the first item."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"End"})}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus to the last item."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:"A-Z"})," or ",(0,n.jsx)(e.code,{children:"a-z"})]}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus to the next menu item with a label that starts with the typed character if such an menu item exists."})]})]})]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var A=I;function F(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(y);})(); ;return Component;