{"version":3,"file":"MenuSubContent.js","sources":["../../src/Menu/MenuSubContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentImplEmits,\n  MenuContentImplProps,\n} from './MenuContentImpl.vue'\n\nexport type MenuSubContentEmits = MenuContentImplEmits\n\n// reference: https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx#L1152\nexport interface MenuSubContentProps extends Omit<MenuContentImplProps, 'disableOutsidePointerEvents' | 'disableOutsideScroll' | 'trapFocus' | 'side' | 'align'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport MenuContentImpl from './MenuContentImpl.vue'\nimport { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'\nimport { injectMenuSubContext } from './MenuSub.vue'\nimport { SUB_CLOSE_KEYS } from './utils'\n\nconst props = withDefaults(defineProps<MenuSubContentProps>(), {\n  prioritizePosition: true,\n})\nconst emits = defineEmits<MenuSubContentEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst menuContext = injectMenuContext()\nconst rootContext = injectMenuRootContext()\nconst menuSubContext = injectMenuSubContext()\n\nconst { forwardRef, currentElement: subContentElement } = useForwardExpose()\n\nmenuSubContext.contentId ||= useId(undefined, 'reka-menu-sub-content')\n</script>\n\n<template>\n  <Presence :present=\"forceMount || menuContext.open.value\">\n    <MenuContentImpl\n      v-bind=\"forwarded\"\n      :id=\"menuSubContext.contentId\"\n      :ref=\"forwardRef\"\n      :aria-labelledby=\"menuSubContext.triggerId\"\n      align=\"start\"\n      :side=\"rootContext.dir.value === 'rtl' ? 'left' : 'right'\"\n      :disable-outside-pointer-events=\"false\"\n      :disable-outside-scroll=\"false\"\n      :trap-focus=\"false\"\n      @open-auto-focus.prevent=\"(event) => {\n        // when opening a submenu, focus content for keyboard users only\n        if (rootContext.isUsingKeyboardRef.value) subContentElement?.focus();\n      }\"\n      @close-auto-focus.prevent\n      @focus-outside=\"\n        (event) => {\n          if (event.defaultPrevented) return;\n          // We prevent closing when the trigger is focused to avoid triggering a re-open animation\n          // on pointer interaction.\n          if (event.target !== menuSubContext.trigger.value)\n            menuContext.onOpenChange(false);\n        }\n      \"\n      @escape-key-down=\"\n        (event) => {\n          rootContext.onClose();\n          // ensure pressing escape in submenu doesn't escape full screen mode\n          event.preventDefault();\n        }\n      \"\n      @keydown=\"(event: KeyboardEvent) => {\n        // Submenu key events bubble through portals. We only care about keys in this menu.\n        const isKeyDownInside = (event.currentTarget as HTMLElement)?.contains(event.target as HTMLElement);\n        const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir.value].includes(event.key);\n        if (isKeyDownInside && isCloseKey) {\n          menuContext.onOpenChange(false);\n          // We focus manually because we prevented it in `onCloseAutoFocus`\n          menuSubContext.trigger.value?.focus();\n          // prevent window from scrolling\n          event.preventDefault();\n        }\n      }\"\n    >\n      <slot />\n    </MenuContentImpl>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAc,iBAAkB,EAAA;AACtC,IAAA,MAAM,cAAc,qBAAsB,EAAA;AAC1C,IAAA,MAAM,iBAAiB,oBAAqB,EAAA;AAE5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,iBAAA,KAAsB,gBAAiB,EAAA;AAE3E,IAAe,cAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,uBAAuB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}