feat(NavigationMenu): disable hover or click props for triggers (unov…

…ue#778)

* feat(menu-trigger): add props and basic logic

* feat(menu-trigger): add props open on click and open on hover

* feat(menu-trigger): add logic to disable triggers

* test(menu-trigger): add tests on new props

* docs(navigation_menu): add docs

* chore: remove unused code

* feat(menu-trigger): change props names

* docs(navigation_menu): update docs after changing prop names

* chore: make disable click trigger only response to mouse event

* chore: add stories, update test

---------

Co-authored-by: zernonia <[email protected]>

docs/content/meta/NavigationMenuRoot.md

@@ -52,6 +52,20 @@
     'type': 'number',
     'required': false,
     'default': '300'
+  },
+  {
+    'name': 'disableClickTrigger',
+    'description': '<p> If true, the menu can\'t be opened by clicking on the trigger </p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': false
+  },
+  {
+    'name': 'disableHoverTrigger',
+    'description': '<p> If true, the menu can\'t be opened by hovering on the trigger </p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': false
   }
 ]" />
 

packages/radix-vue/src/NavigationMenu/NavigationMenu.test.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import NavigationMenu from './story/_NavigationMenu.vue'
 import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
@@ -7,6 +7,18 @@ import userEvent from '@testing-library/user-event'
 import { nextTick } from 'vue'
 import { fireEvent } from '@testing-library/vue'
 import { sleep } from '@/test'
+import NavigationMenuItem from './NavigationMenuItem.vue'
+import { afterEach } from 'node:test'
+import { useDebounceFn } from '@vueuse/core'
+
+vi.mock('@vueuse/core', async () => {
+  const actual = await vi.importActual('@vueuse/core')
+  return {
+    ...actual,
+    useDebounceFn: vi.fn(),
+
+  }
+})
 
 describe('given default NavigationMenu', () => {
   let wrapper: VueWrapper<InstanceType<typeof NavigationMenu>>
@@ -15,6 +27,17 @@ describe('given default NavigationMenu', () => {
   beforeEach(() => {
     document.body.innerHTML = ''
     wrapper = mount(NavigationMenu, { attachTo: document.body })
+
+    // @ts-expect-error simple mock
+    vi.mocked(useDebounceFn).mockImplementation((cb: (val: string) => void, delay: string) => {
+      return function (arg: string) {
+        cb(arg)
+      }
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
   })
 
   it('should pass axe accessibility tests', async () => {
@@ -78,4 +101,63 @@ describe('given default NavigationMenu', () => {
     //   })
     // })
   })
+
+  describe('menu triggers', () => {
+    const findMenuItem = () => wrapper.findComponent(NavigationMenuItem)
+
+    const findTriggerButton = () => findMenuItem().find('button')
+
+    const findLinkContent = () => wrapper.find('[data-dismissable-layer]')
+
+    it('should open menu on click by default', async () => {
+      const button = findTriggerButton()
+
+      button.trigger('click')
+
+      await wrapper.vm.$nextTick()
+
+      const content = findLinkContent()
+
+      expect(content.exists()).toBeTruthy()
+    })
+
+    it('should open menu on hover by default', async () => {
+      const button = findTriggerButton()
+
+      button.trigger('pointermove', { pointerType: 'mouse' })
+
+      await wrapper.vm.$nextTick()
+
+      const content = findLinkContent()
+
+      expect(content.exists()).toBeTruthy()
+    })
+
+    it('should not trigger content on click', async () => {
+      await wrapper.setProps({ disableClickTrigger: true })
+
+      const button = findTriggerButton()
+
+      button.trigger('click', { pointerType: 'mouse' })
+
+      await wrapper.vm.$nextTick()
+
+      const content = findLinkContent()
+
+      expect(content.exists()).toBeFalsy()
+    })
+
+    it('should not trigger content on hover', async () => {
+      await wrapper.setProps({ disableHoverTrigger: true })
+      const button = findTriggerButton()
+
+      button.trigger('pointermove', { pointerType: 'mouse' })
+
+      await wrapper.vm.$nextTick()
+
+      const content = findLinkContent()
+
+      expect(content.exists()).toBeFalsy()
+    })
+  })
 })

packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue

@@ -28,6 +28,17 @@ export interface NavigationMenuRootProps extends PrimitiveProps {
    * @defaultValue 300
    */
   skipDelayDuration?: number
+
+  /**
+   * If true, menu can't be open by click on trigger
+   * @defaultValue false
+   */
+  disableClickTrigger?: boolean
+  /**
+   * If true, menu can't be open by hover on trigger
+   * @defaultValue false
+   */
+  disableHoverTrigger?: boolean
 }
 export type NavigationMenuRootEmits = {
   /** Event handler called when the value changes. */
@@ -41,6 +52,8 @@ export interface NavigationMenuContext {
   baseId: string
   dir: Ref<Direction>
   orientation: Orientation
+  disableClickTrigger: Ref<boolean>
+  disableHoverTrigger: Ref<boolean>
   rootNavigationMenu: Ref<HTMLElement | undefined>
   indicatorTrack: Ref<HTMLElement | undefined>
   onIndicatorTrackChange(indicatorTrack: HTMLElement | undefined): void
@@ -74,6 +87,8 @@ const props = withDefaults(defineProps<NavigationMenuRootProps>(), {
   delayDuration: 200,
   skipDelayDuration: 300,
   orientation: 'horizontal',
+  disableClickTrigger: false,
+  disableHoverTrigger: false,
   as: 'nav',
 })
 const emits = defineEmits<NavigationMenuRootEmits>()
@@ -92,7 +107,7 @@ const viewport = ref<HTMLElement>()
 const { createCollection } = useCollection('nav')
 createCollection(indicatorTrack)
 
-const { delayDuration, skipDelayDuration, dir: propDir } = toRefs(props)
+const { delayDuration, skipDelayDuration, dir: propDir, disableClickTrigger, disableHoverTrigger } = toRefs(props)
 const dir = useDirection(propDir)
 
 const isDelaySkipped = refAutoReset(false, skipDelayDuration)
@@ -113,6 +128,8 @@ provideNavigationMenuContext({
   modelValue,
   previousValue,
   baseId: useId(undefined, 'radix-navigation-menu'),
+  disableClickTrigger,
+  disableHoverTrigger,
   dir,
   orientation: props.orientation,
   rootNavigationMenu,

packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue

@@ -47,11 +47,17 @@ onMounted(() => {
 })
 
 function handlePointerEnter() {
+  if (menuContext.disableHoverTrigger.value)
+    return
+
   wasClickCloseRef.value = false
   itemContext.wasEscapeCloseRef.value = false
 }
 
 function handlePointerMove(ev: PointerEvent) {
+  if (menuContext.disableHoverTrigger.value)
+    return
+
   if (ev.pointerType === 'mouse') {
     if (
       props.disabled
@@ -60,12 +66,16 @@ function handlePointerMove(ev: PointerEvent) {
       || hasPointerMoveOpenedRef.value
     )
       return
+
     menuContext.onTriggerEnter(itemContext.value)
     hasPointerMoveOpenedRef.value = true
   }
 }
 
 function handlePointerLeave(ev: PointerEvent) {
+  if (menuContext.disableHoverTrigger.value)
+    return
+
   if (ev.pointerType === 'mouse') {
     if (props.disabled)
       return
@@ -74,7 +84,10 @@ function handlePointerLeave(ev: PointerEvent) {
   }
 }
 
-function handleClick() {
+function handleClick(event: PointerEvent) {
+  if (event.pointerType === 'mouse' && menuContext.disableClickTrigger.value)
+    return
+
   // if open via pointermove, we prevent click event
   if (hasPointerMoveOpenedRef.value)
     return

packages/radix-vue/src/NavigationMenu/story/NavigationMenuChromatic.story.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import NavigationMenu from './_NavigationMenu.vue'
+</script>
+
+<template>
+  <Story title="Navigation Menu/Chromatic" :layout="{ type: 'grid', width: '50%', iframe: false }">
+    <Variant title="Default">
+      <NavigationMenu />
+    </Variant>
+
+    <Variant title="Disabled click trigger">
+      <NavigationMenu disable-click-trigger />
+    </Variant>
+
+    <Variant title="Disabled hover trigger">
+      <NavigationMenu disable-hover-trigger />
+    </Variant>
+  </Story>
+</template>

packages/radix-vue/src/NavigationMenu/story/_NavigationMenu.vue

@@ -12,13 +12,24 @@ import {
 } from '../'
 import NavigationMenuListItem from './_NavigationMenuListItem.vue'
 
+export interface TestProps {
+  disableClickTrigger?: boolean
+  disableHoverTrigger?: boolean
+}
+
+const props = withDefaults(defineProps<TestProps>(), {
+  disableClickTrigger: false,
+  disableHoverTrigger: false,
+})
+
 const currentTrigger = ref('')
 </script>
 
 <template>
   <div class="w-full h-[600px]">
     <NavigationMenuRoot
       v-model="currentTrigger"
+      v-bind="props"
       class="relative z-[1] flex w-full justify-center"
     >
       <NavigationMenuList