@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.16 kB
Source Map (JSON)
{"version":3,"file":"MenubarDropdown.cjs","names":["useMenubarContext","useMenubarMenuContext","useDirection","createEventHandler","Menu"],"sources":["../../../../src/components/Menubar/MenubarDropdown/MenubarDropdown.tsx"],"sourcesContent":["import { createEventHandler, useDirection } from '../../../core';\nimport { Menu, MenuDropdownProps } from '../../Menu';\nimport { useMenubarContext, useMenubarMenuContext } from '../Menubar.context';\n\nexport interface MenubarDropdownProps extends MenuDropdownProps {}\n\nexport function MenubarDropdown(props: MenubarDropdownProps) {\n const { onKeyDown, onMouseEnter, onMouseLeave, ...others } = props;\n const ctx = useMenubarContext();\n const menuCtx = useMenubarMenuContext();\n const { dir } = useDirection();\n\n const handleMouseEnter = createEventHandler<any>(onMouseEnter, () => ctx.cancelClose());\n\n const handleMouseLeave = createEventHandler<any>(onMouseLeave, () => {\n if (ctx.trigger === 'hover') {\n ctx.scheduleClose();\n }\n });\n\n const switchToAdjacent = (direction: 1 | -1) => {\n const nextIndex = ctx.getAdjacentIndex(menuCtx.index, direction);\n if (nextIndex !== menuCtx.index) {\n ctx.setActiveIndex(nextIndex);\n ctx.openMenu(nextIndex, 'click');\n ctx.focusMenuItem(nextIndex, 'first');\n }\n };\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n const target = event.target as HTMLElement;\n\n // Tabbing out of an open menu dismisses it. Focus is moved to the trigger first\n // so the browser continues the tab sequence from the menubar position.\n if (event.key === 'Tab') {\n ctx.focusTarget(menuCtx.index);\n ctx.closeMenu();\n return;\n }\n\n // Only handle navigation when focus is on a top-level item of this dropdown,\n // submenu items keep ArrowLeft/ArrowRight for their own open/close behavior\n if (target.closest('[data-menu-dropdown]') !== event.currentTarget) {\n return;\n }\n\n const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n const backKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n\n if (event.key === forwardKey) {\n if (target.closest('[data-menu-item]')?.hasAttribute('data-sub-menu-item')) {\n return;\n }\n event.preventDefault();\n switchToAdjacent(1);\n } else if (event.key === backKey) {\n event.preventDefault();\n switchToAdjacent(-1);\n } else if (event.key === 'Escape') {\n const index = menuCtx.index;\n ctx.setActiveIndex(index);\n window.setTimeout(() => ctx.focusTarget(index), 0);\n }\n });\n\n return (\n <Menu.Dropdown\n {...others}\n data-menubar-dropdown={ctx.id}\n data-mantine-stop-propagation\n onKeyDown={handleKeyDown}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n />\n );\n}\n\nMenubarDropdown.displayName = '@mantine/core/MenubarDropdown';\n"],"mappings":";;;;;;;AAMA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,WAAW,cAAc,cAAc,GAAG,WAAW;CAC7D,MAAM,MAAMA,wBAAAA,kBAAkB;CAC9B,MAAM,UAAUC,wBAAAA,sBAAsB;CACtC,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,MAAM,mBAAmBC,6BAAAA,mBAAwB,oBAAoB,IAAI,YAAY,CAAC;CAEtF,MAAM,mBAAmBA,6BAAAA,mBAAwB,oBAAoB;EACnE,IAAI,IAAI,YAAY,SAClB,IAAI,cAAc;CAEtB,CAAC;CAED,MAAM,oBAAoB,cAAsB;EAC9C,MAAM,YAAY,IAAI,iBAAiB,QAAQ,OAAO,SAAS;EAC/D,IAAI,cAAc,QAAQ,OAAO;GAC/B,IAAI,eAAe,SAAS;GAC5B,IAAI,SAAS,WAAW,OAAO;GAC/B,IAAI,cAAc,WAAW,OAAO;EACtC;CACF;CAEA,MAAM,gBAAgBA,6BAAAA,mBAAwB,YAAY,UAAU;EAClE,MAAM,SAAS,MAAM;EAIrB,IAAI,MAAM,QAAQ,OAAO;GACvB,IAAI,YAAY,QAAQ,KAAK;GAC7B,IAAI,UAAU;GACd;EACF;EAIA,IAAI,OAAO,QAAQ,sBAAsB,MAAM,MAAM,eACnD;EAGF,MAAM,aAAa,QAAQ,QAAQ,cAAc;EACjD,MAAM,UAAU,QAAQ,QAAQ,eAAe;EAE/C,IAAI,MAAM,QAAQ,YAAY;GAC5B,IAAI,OAAO,QAAQ,kBAAkB,CAAC,EAAE,aAAa,oBAAoB,GACvE;GAEF,MAAM,eAAe;GACrB,iBAAiB,CAAC;EACpB,OAAO,IAAI,MAAM,QAAQ,SAAS;GAChC,MAAM,eAAe;GACrB,iBAAiB,EAAE;EACrB,OAAO,IAAI,MAAM,QAAQ,UAAU;GACjC,MAAM,QAAQ,QAAQ;GACtB,IAAI,eAAe,KAAK;GACxB,OAAO,iBAAiB,IAAI,YAAY,KAAK,GAAG,CAAC;EACnD;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,KAAK,UAAN;EACE,GAAI;EACJ,yBAAuB,IAAI;EAC3B,iCAAA;EACA,WAAW;EACX,cAAc;EACd,cAAc;CACf,CAAA;AAEL;AAEA,gBAAgB,cAAc"}