@hina-ui/vue 1.7.11 → 1.7.13

package/src/primitives/dismissable-layer/DismissableLayer.ts

@@ -0,0 +1,212 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  normalizeStyle,
+  ref,
+  renderSlot,
+  toValue,
+  watch,
+  watchEffect,
+  withCtx,
+  type MaybeRefOrGetter,
+  type PropType,
+  type Ref,
+} from 'vue'
+import { isClient, onKeyStroke } from '@vueuse/core'
+import {
+  addLayer,
+  blockOutsidePointerEvents,
+  bodyPointerEventsDisabled,
+  inBranch,
+  isHighestLayer,
+  layersVersion,
+  pointerEventsEnabled,
+  releaseLayer,
+  subscribeLayers,
+  watchFocusOutside,
+  watchPointerDownOutside,
+  type FocusOutsideEvent,
+  type PointerDownOutsideEvent,
+} from '../../../../shared/src/primitives/dismissable-layer'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+
+export type { FocusOutsideEvent, PointerDownOutsideEvent }
+
+const version = ref(layersVersion())
+if (isClient) subscribeLayers(() => (version.value = layersVersion()))
+
+export function useLayersVersion() {
+  return version
+}
+
+export function usePointerDownOutside(
+  onPointerDownOutside: (event: PointerDownOutsideEvent) => void,
+  element: Ref<HTMLElement | undefined>,
+  enabled: MaybeRefOrGetter<boolean> = true,
+) {
+  let watcher: ReturnType<typeof watchPointerDownOutside> | undefined
+  watchEffect(onCleanup => {
+    if (!isClient || !toValue(enabled)) return
+    const current = watchPointerDownOutside({
+      element: () => element.value,
+      onOutside: onPointerDownOutside,
+    })
+    watcher = current
+    onCleanup(() => {
+      current.stop()
+      if (watcher === current) watcher = undefined
+    })
+  })
+  return {
+    onPointerDownCapture: () => {
+      if (!toValue(enabled)) return
+      watcher?.onPointerDownCapture()
+    },
+  }
+}
+
+export function useFocusOutside(
+  onFocusOutside: (event: FocusOutsideEvent) => void,
+  element: Ref<HTMLElement | undefined>,
+  enabled: MaybeRefOrGetter<boolean> = true,
+) {
+  let watcher: ReturnType<typeof watchFocusOutside> | undefined
+  watchEffect(onCleanup => {
+    if (!isClient || !toValue(enabled)) return
+    const current = watchFocusOutside({
+      element: () => element.value,
+      onOutside: onFocusOutside,
+      settle: async () => {
+        await nextTick()
+        await nextTick()
+      },
+    })
+    watcher = current
+    onCleanup(() => {
+      current.stop()
+      if (watcher === current) watcher = undefined
+    })
+  })
+  return {
+    onFocusCapture: () => {
+      if (!toValue(enabled)) return
+      watcher?.onFocusCapture()
+    },
+    onBlurCapture: () => {
+      if (!toValue(enabled)) return
+      watcher?.onBlurCapture()
+    },
+  }
+}
+
+export interface DismissableLayerProps {
+  disableOutsidePointerEvents?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type DismissableLayerEmits = {
+  escapeKeyDown: [event: KeyboardEvent]
+  pointerDownOutside: [event: PointerDownOutsideEvent]
+  focusOutside: [event: FocusOutsideEvent]
+  interactOutside: [event: PointerDownOutsideEvent | FocusOutsideEvent]
+  dismiss: []
+}
+
+export const DismissableLayer = defineComponent({
+  name: 'DismissableLayer',
+  props: {
+    disableOutsidePointerEvents: { type: Boolean, required: false, default: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+    present: { type: Boolean, required: false, default: true },
+  },
+  emits: ['escapeKeyDown', 'pointerDownOutside', 'focusOutside', 'interactOutside', 'dismiss'],
+  setup(props, { emit, slots }) {
+    const { forwardRef, currentElement: layerElement } = useForwardExpose()
+
+    const isBodyPointerEventsDisabled = computed(() => {
+      void version.value
+      return bodyPointerEventsDisabled()
+    })
+    const isPointerEventsEnabled = computed(() => {
+      void version.value
+      return pointerEventsEnabled(layerElement.value)
+    })
+
+    const pointerDownOutside = usePointerDownOutside(
+      async event => {
+        if (!props.present || !isPointerEventsEnabled.value || inBranch(event.target)) return
+        emit('pointerDownOutside', event)
+        emit('interactOutside', event)
+        await nextTick()
+        if (!event.defaultPrevented) emit('dismiss')
+      },
+      layerElement,
+      () => props.present,
+    )
+
+    const focusOutside = useFocusOutside(event => {
+      if (!props.present || inBranch(event.target)) return
+      emit('focusOutside', event)
+      emit('interactOutside', event)
+      if (!event.defaultPrevented) emit('dismiss')
+    }, layerElement)
+
+    onKeyStroke('Escape', event => {
+      if (!props.present) return
+      if (!isHighestLayer(layerElement.value)) return
+      emit('escapeKeyDown', event)
+      if (!event.defaultPrevented) emit('dismiss')
+    })
+
+    watch(
+      [layerElement, () => props.disableOutsidePointerEvents, () => props.present],
+      ([element, disableOutsidePointerEvents, present], _, onCleanup) => {
+        if (!element || !present || !disableOutsidePointerEvents) return
+        onCleanup(blockOutsidePointerEvents(element))
+      },
+      { immediate: true },
+    )
+
+    watch(
+      [layerElement, () => props.present],
+      ([element, present], _, onCleanup) => {
+        if (!element || !present) return
+        onCleanup(addLayer(element))
+      },
+      { immediate: true },
+    )
+
+    watchEffect(onCleanup => {
+      onCleanup(() => {
+        if (layerElement.value) releaseLayer(layerElement.value)
+      })
+    })
+
+    return () =>
+      h(
+        Primitive,
+        {
+          ref: forwardRef,
+          'as-child': props.asChild,
+          as: props.as,
+          'data-dismissable-layer': '',
+          style: normalizeStyle({
+            pointerEvents: isBodyPointerEventsDisabled.value
+              ? isPointerEventsEnabled.value
+                ? 'auto'
+                : 'none'
+              : undefined,
+          }),
+          onFocusCapture: focusOutside.onFocusCapture,
+          onBlurCapture: focusOutside.onBlurCapture,
+          onPointerdownCapture: pointerDownOutside.onPointerDownCapture,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/dismissable-layer/DismissableLayerBranch.ts

@@ -0,0 +1,36 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  onMounted,
+  onUnmounted,
+  renderSlot,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { addBranch } from '../../../../shared/src/primitives/dismissable-layer'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+
+export const DismissableLayerBranch = defineComponent({
+  name: 'DismissableLayerBranch',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const { forwardRef, currentElement } = useForwardExpose()
+    let release: (() => void) | undefined
+    onMounted(() => {
+      if (currentElement.value) release = addBranch(currentElement.value)
+    })
+    onUnmounted(() => {
+      release?.()
+      release = undefined
+    })
+    return () =>
+      h(Primitive, mergeProps({ ref: forwardRef }, props), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})

package/src/primitives/dismissable-layer/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/dismissable-layer/index.ts

@@ -0,0 +1,11 @@
+export {
+  DismissableLayer,
+  useFocusOutside,
+  useLayersVersion,
+  usePointerDownOutside,
+  type DismissableLayerEmits,
+  type DismissableLayerProps,
+  type FocusOutsideEvent,
+  type PointerDownOutsideEvent,
+} from './DismissableLayer'
+export { DismissableLayerBranch } from './DismissableLayerBranch'

package/src/primitives/dropdown-menu/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/dropdown-menu/index.ts

@@ -0,0 +1,344 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  nextTick,
+  onMounted,
+  ref,
+  renderSlot,
+  toRefs,
+  withCtx,
+  withKeys,
+  type Component,
+  type PropType,
+  type Ref,
+} from 'vue'
+import {
+  MenuAnchor,
+  MenuArrow,
+  MenuCheckboxItem,
+  MenuContent,
+  menuContentEmits,
+  menuContentProps,
+  MenuGroup,
+  MenuItem,
+  MenuItemIndicator,
+  MenuLabel,
+  MenuPortal,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRoot,
+  MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  menuSubContentProps,
+  MenuSubTrigger,
+} from '../menu'
+import { wrapMenuPart } from '../menu/wrap'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { createContext } from '../utils/createContext'
+import { propsWithoutDefaults } from '../utils/propsWithoutDefaults'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardPropsEmits } from '../utils/useForwardPropsEmits'
+import { useId } from '../utils/useId'
+import { useVModel } from '../utils/useVModel'
+
+export interface DropdownMenuRootContext {
+  open: Readonly<Ref<boolean>>
+  onOpenChange: (open: boolean) => void
+  onOpenToggle: () => void
+  triggerId: string
+  triggerElement: Ref<HTMLElement | undefined>
+  contentId: string
+  modal: Ref<boolean>
+  dir: Ref<Direction>
+}
+
+export const [injectDropdownMenuRootContext, provideDropdownMenuRootContext] =
+  createContext<DropdownMenuRootContext>('DropdownMenuRoot')
+
+const primitive = (as?: string) =>
+  ({
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      ...(as ? { default: as } : {}),
+    },
+  }) as const
+
+const contentStyle = {
+  '--reka-dropdown-menu-content-transform-origin': 'var(--reka-popper-transform-origin)',
+  '--reka-dropdown-menu-content-available-width': 'var(--reka-popper-available-width)',
+  '--reka-dropdown-menu-content-available-height': 'var(--reka-popper-available-height)',
+  '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',
+  '--reka-dropdown-menu-trigger-height': 'var(--reka-popper-anchor-height)',
+}
+
+export const DropdownMenuRoot = defineComponent({
+  name: 'DropdownMenuRoot',
+  props: {
+    defaultOpen: { type: Boolean, required: false },
+    open: { type: Boolean, required: false, default: undefined },
+    dir: { type: String as PropType<Direction>, required: false },
+    modal: { type: Boolean, required: false, default: true },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    useForwardExpose()
+    const open = useVModel(props, 'open', emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === undefined,
+    }) as Ref<boolean>
+    const triggerElement = ref<HTMLElement>()
+    const { modal, dir: propDir } = toRefs(props)
+    const dir = useDirection(propDir)
+    provideDropdownMenuRootContext({
+      open,
+      onOpenChange: value => {
+        open.value = value
+      },
+      onOpenToggle: () => {
+        open.value = !open.value
+      },
+      triggerId: '',
+      triggerElement,
+      contentId: '',
+      modal,
+      dir,
+    })
+    return () =>
+      h(
+        MenuRoot as Component,
+        {
+          open: open.value,
+          'onUpdate:open': (value: boolean) => (open.value = value),
+          dir: dir.value,
+          modal: modal.value,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default', { open: open.value })]) },
+      )
+  },
+})
+
+export const DropdownMenuTrigger = defineComponent({
+  name: 'DropdownMenuTrigger',
+  props: { disabled: { type: Boolean, required: false }, ...primitive('button') },
+  setup(props, { slots }) {
+    const rootContext = injectDropdownMenuRootContext()
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose()
+    onMounted(() => {
+      rootContext.triggerElement = triggerElement as Ref<HTMLElement | undefined>
+    })
+    rootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')
+
+    const onClick = async (event: MouseEvent) => {
+      if (!props.disabled && event.button === 0 && event.ctrlKey === false) {
+        rootContext?.onOpenToggle()
+        await nextTick()
+        if (rootContext.open.value) event.preventDefault()
+      }
+    }
+    const onKeydown = withKeys(
+      ((event: KeyboardEvent) => {
+        if (props.disabled) return
+        if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle()
+        if (event.key === 'ArrowDown') rootContext.onOpenChange(true)
+        if (['Enter', ' ', 'ArrowDown'].includes(event.key)) event.preventDefault()
+      }) as (event: Event) => void,
+      ['enter', 'space', 'arrow-down'],
+    )
+
+    return () =>
+      h(
+        MenuAnchor as Component,
+        { 'as-child': '' },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                id: rootContext.triggerId,
+                ref: forwardRef,
+                type: props.as === 'button' ? 'button' : undefined,
+                'as-child': props.asChild,
+                as: props.as,
+                'aria-haspopup': 'menu',
+                'aria-expanded': rootContext.open.value,
+                'aria-controls': rootContext.open.value ? rootContext.contentId : undefined,
+                'data-disabled': props.disabled ? '' : undefined,
+                disabled: props.disabled,
+                'data-state': rootContext.open.value ? 'open' : 'closed',
+                onClick,
+                onKeydown,
+              },
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const DropdownMenuContent = defineComponent({
+  name: 'DropdownMenuContent',
+  props: propsWithoutDefaults(menuContentProps),
+  emits: menuContentEmits,
+  setup(props, { emit, slots }) {
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    useForwardExpose()
+    const rootContext = injectDropdownMenuRootContext()
+    const hasInteractedOutside = ref(false)
+
+    function handleCloseAutoFocus(event: Event) {
+      if (event.defaultPrevented) return
+      if (!hasInteractedOutside.value)
+        setTimeout(() => {
+          rootContext.triggerElement.value?.focus()
+        }, 0)
+      hasInteractedOutside.value = false
+      event.preventDefault()
+    }
+
+    rootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')
+
+    const onInteractOutside = (event: CustomEvent<{ originalEvent: PointerEvent }>) => {
+      if (event.defaultPrevented) return
+      const originalEvent = event.detail.originalEvent
+      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true
+      const isRightClick = originalEvent.button === 2 || ctrlLeftClick
+      if (!rootContext.modal.value || isRightClick) hasInteractedOutside.value = true
+      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement))
+        event.preventDefault()
+    }
+
+    return () =>
+      h(
+        MenuContent as Component,
+        mergeProps(forwarded.value, {
+          id: rootContext.contentId,
+          'aria-labelledby': rootContext?.triggerId,
+          style: contentStyle,
+          onCloseAutoFocus: handleCloseAutoFocus,
+          onInteractOutside,
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const DropdownMenuSub = defineComponent({
+  name: 'DropdownMenuSub',
+  props: {
+    defaultOpen: { type: Boolean, required: false },
+    open: { type: Boolean, required: false, default: undefined },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const open = useVModel(props, 'open', emit, {
+      passive: props.open === undefined,
+      defaultValue: props.defaultOpen ?? false,
+    }) as Ref<boolean>
+    useForwardExpose()
+    return () =>
+      h(
+        MenuSub as Component,
+        { open: open.value, 'onUpdate:open': (value: boolean) => (open.value = value) },
+        { default: withCtx(() => [renderSlot(slots, 'default', { open: open.value })]) },
+      )
+  },
+})
+
+export const DropdownMenuSubContent = defineComponent({
+  name: 'DropdownMenuSubContent',
+  props: propsWithoutDefaults(menuSubContentProps),
+  emits: menuContentEmits,
+  setup(props, { emit, slots }) {
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    useForwardExpose()
+    return () =>
+      h(MenuSubContent as Component, mergeProps(forwarded.value, { style: contentStyle }), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+const itemProps = {
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  ...primitive(),
+}
+
+export const DropdownMenuItem = wrapMenuPart('DropdownMenuItem', MenuItem as Component, itemProps, {
+  emits: ['select'],
+  mode: 'emits',
+})
+export const DropdownMenuCheckboxItem = wrapMenuPart(
+  'DropdownMenuCheckboxItem',
+  MenuCheckboxItem as Component,
+  { modelValue: { type: [Boolean, String], required: false }, ...itemProps },
+  { emits: ['select', 'update:modelValue'], mode: 'emits' },
+)
+export const DropdownMenuRadioGroup = wrapMenuPart(
+  'DropdownMenuRadioGroup',
+  MenuRadioGroup as Component,
+  { modelValue: { type: null, required: false }, ...primitive() },
+  { emits: ['update:modelValue'], mode: 'emits' },
+)
+export const DropdownMenuRadioItem = wrapMenuPart(
+  'DropdownMenuRadioItem',
+  MenuRadioItem as Component,
+  { value: { type: null, required: true }, ...itemProps },
+  { emits: ['select'], mode: 'forwarded' },
+)
+export const DropdownMenuItemIndicator = wrapMenuPart(
+  'DropdownMenuItemIndicator',
+  MenuItemIndicator as Component,
+  { forceMount: { type: Boolean, required: false }, ...primitive() },
+)
+export const DropdownMenuGroup = wrapMenuPart(
+  'DropdownMenuGroup',
+  MenuGroup as Component,
+  primitive(),
+)
+export const DropdownMenuLabel = wrapMenuPart(
+  'DropdownMenuLabel',
+  MenuLabel as Component,
+  primitive(),
+)
+export const DropdownMenuSeparator = wrapMenuPart(
+  'DropdownMenuSeparator',
+  MenuSeparator as Component,
+  primitive(),
+)
+export const DropdownMenuPortal = wrapMenuPart(
+  'DropdownMenuPortal',
+  MenuPortal as Component,
+  {
+    to: { type: null, required: false },
+    disabled: { type: Boolean, required: false },
+    defer: { type: Boolean, required: false },
+    forceMount: { type: Boolean, required: false },
+  },
+  { expose: false },
+)
+export const DropdownMenuArrow = wrapMenuPart('DropdownMenuArrow', MenuArrow as Component, {
+  width: { type: Number, required: false, default: 10 },
+  height: { type: Number, required: false, default: 5 },
+  rounded: { type: Boolean, required: false },
+  ...primitive('svg'),
+})
+export const DropdownMenuSubTrigger = wrapMenuPart(
+  'DropdownMenuSubTrigger',
+  MenuSubTrigger as Component,
+  itemProps,
+)
+
+export type DropdownMenuContentEmits = {
+  escapeKeyDown: [event: KeyboardEvent]
+  pointerDownOutside: [event: CustomEvent<{ originalEvent: PointerEvent }>]
+  focusOutside: [event: CustomEvent<{ originalEvent: FocusEvent }>]
+  interactOutside: [event: CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>]
+  closeAutoFocus: [event: Event]
+}