var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},d=(t,e,i,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!M.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(c=m(e,o))||c.enumerable});return t};var b=(t,e,i)=>(i=t!=null?h(g(t)):{},d(e||!t||!t.__esModule?r(i,"default",{value:t,enumerable:!0}):i,t)),x=t=>d(r({},"__esModule",{value:!0}),t);var a=f((k,s)=>{s.exports=_jsx_runtime});var F={};D(F,{default:()=>u,frontmatter:()=>I});var n=b(a()),I={id:"menu-dialog",title:"Menu Dialog",description:"A list of menu options inside a modal dialog."};function l(t){let e={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...t.components},{ComponentLinks:i}=e;return i||A("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 u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}function A(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(F);})(); ;return Component;