@hina-ui/vue 1.7.12 → 1.7.14

package/src/primitives/menu/MenuRoot.ts

@@ -0,0 +1,295 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  ref,
+  renderSlot,
+  toRefs,
+  watchEffect,
+  withCtx,
+  withModifiers,
+  type Component,
+  type PropType,
+  type Ref,
+} from 'vue'
+import { SUB_CLOSE_KEYS } from '../../../../shared/src/primitives/menu'
+import { PopperRoot } from '../popper'
+import { Presence } from '../presence'
+import type { PrimitiveProps } from '../primitive'
+import { propsWithoutDefaults } from '../utils/propsWithoutDefaults'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardPropsEmits } from '../utils/useForwardPropsEmits'
+import { useHideOthers } from '../utils/useHideOthers'
+import { useId } from '../utils/useId'
+import { useIsUsingKeyboard } from '../utils/useIsUsingKeyboard'
+import { useVModel } from '../utils/useVModel'
+import {
+  injectMenuContentContext,
+  injectMenuContext,
+  injectMenuRootContext,
+  injectMenuSubContext,
+  provideMenuContext,
+  provideMenuRootContext,
+  provideMenuSubContext,
+} from './context'
+import { MenuContentImpl, menuContentEmits, menuContentImplProps } from './MenuContentImpl'
+
+export const MenuRoot = defineComponent({
+  name: 'MenuRoot',
+  props: {
+    open: { type: Boolean, required: false, default: false },
+    dir: { type: String as PropType<Direction>, required: false },
+    modal: { type: Boolean, required: false, default: true },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const { modal, dir: propDir } = toRefs(props)
+    const dir = useDirection(propDir)
+    const open = useVModel(props, 'open', emit) as Ref<boolean>
+    const content = ref<HTMLElement>()
+    const isUsingKeyboardRef = useIsUsingKeyboard()
+
+    provideMenuContext({
+      open,
+      onOpenChange: value => {
+        open.value = value
+      },
+      content,
+      onContentChange: element => {
+        content.value = element
+      },
+    })
+
+    provideMenuRootContext({
+      onClose: () => {
+        open.value = false
+      },
+      isUsingKeyboardRef,
+      dir,
+      modal,
+    })
+
+    return () => h(PopperRoot, null, { default: withCtx(() => [renderSlot(slots, 'default')]) })
+  },
+})
+
+export const MenuSub = defineComponent({
+  name: 'MenuSub',
+  props: { open: { type: Boolean, required: false, default: undefined } },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    const open = useVModel(props, 'open', emit, {
+      defaultValue: false,
+      passive: props.open === undefined,
+    }) as Ref<boolean>
+    const parentMenuContext = injectMenuContext()
+    const trigger = ref<HTMLElement>()
+    const content = ref<HTMLElement>()
+
+    watchEffect(onCleanup => {
+      if (parentMenuContext?.open.value === false) open.value = false
+      onCleanup(() => (open.value = false))
+    })
+
+    provideMenuContext({
+      open,
+      onOpenChange: value => {
+        open.value = value
+      },
+      content,
+      onContentChange: element => {
+        content.value = element
+      },
+    })
+
+    provideMenuSubContext({
+      triggerId: '',
+      contentId: '',
+      trigger,
+      onTriggerChange: element => {
+        trigger.value = element
+      },
+    })
+
+    return () => h(PopperRoot, null, { default: withCtx(() => [renderSlot(slots, 'default')]) })
+  },
+})
+
+const rootContentProps = propsWithoutDefaults(menuContentImplProps)
+const {
+  disableOutsidePointerEvents: _a,
+  disableOutsideScroll: _b,
+  trapFocus: _c,
+  ...typeProps
+} = rootContentProps
+
+const MenuRootContentModal = defineComponent({
+  name: 'MenuRootContentModal',
+  props: typeProps,
+  emits: menuContentEmits,
+  setup(props, { emit, slots }) {
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const menuContext = injectMenuContext()
+    const { forwardRef, currentElement } = useForwardExpose()
+    useHideOthers(currentElement)
+    return () =>
+      h(
+        MenuContentImpl as Component,
+        mergeProps(forwarded.value, {
+          ref: forwardRef,
+          'trap-focus': menuContext.open.value,
+          'disable-outside-pointer-events': menuContext.open.value,
+          'disable-outside-scroll': true,
+          onDismiss: () => menuContext.onOpenChange(false),
+          onFocusOutside: withModifiers(
+            ((event: Event) => emit('focusOutside', event)) as (event: Event) => void,
+            ['prevent'],
+          ),
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+const MenuRootContentNonModal = defineComponent({
+  name: 'MenuRootContentNonModal',
+  props: typeProps,
+  emits: menuContentEmits,
+  setup(props, { emit, slots }) {
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const menuContext = injectMenuContext()
+    return () =>
+      h(
+        MenuContentImpl as Component,
+        mergeProps(forwarded.value, {
+          'trap-focus': false,
+          'disable-outside-pointer-events': false,
+          'disable-outside-scroll': false,
+          onDismiss: () => menuContext.onOpenChange(false),
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const menuContentProps = { forceMount: { type: Boolean, required: false }, ...typeProps }
+
+export const MenuContent = defineComponent({
+  name: 'MenuContent',
+  props: menuContentProps,
+  emits: menuContentEmits,
+  setup(props, { emit, slots, attrs }) {
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const menuContext = injectMenuContext()
+    const rootContext = injectMenuRootContext()
+    return () =>
+      h(
+        Presence,
+        { present: props.forceMount || menuContext.open.value },
+        {
+          default: withCtx(() => [
+            rootContext.modal.value
+              ? h(
+                  MenuRootContentModal as Component,
+                  mergeProps({ key: 0 }, { ...attrs, ...forwarded.value }),
+                  { default: withCtx(() => [renderSlot(slots, 'default')]) },
+                )
+              : h(
+                  MenuRootContentNonModal as Component,
+                  mergeProps({ key: 1 }, { ...attrs, ...forwarded.value }),
+                  { default: withCtx(() => [renderSlot(slots, 'default')]) },
+                ),
+          ]),
+        },
+      )
+  },
+})
+
+const { side: _side, align: _align, ...subTypeProps } = typeProps
+
+export const menuSubContentProps = {
+  forceMount: { type: Boolean, required: false },
+  ...subTypeProps,
+  prioritizePosition: { type: Boolean, required: false, default: true },
+}
+
+export const MenuSubContent = defineComponent({
+  name: 'MenuSubContent',
+  props: menuSubContentProps,
+  emits: menuContentEmits,
+  setup(props, { emit, slots }) {
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const menuContext = injectMenuContext()
+    const rootContext = injectMenuRootContext()
+    const menuSubContext = injectMenuSubContext()
+    const parentContentContext = injectMenuContentContext()
+    const { forwardRef, currentElement: subContentElement } = useForwardExpose()
+    menuSubContext.contentId ||= useId(undefined, 'reka-menu-sub-content')
+
+    const onOpenAutoFocus = withModifiers(() => {
+      if (rootContext.isUsingKeyboardRef.value) subContentElement.value?.focus()
+    }, ['prevent'])
+    const onCloseAutoFocus = withModifiers(() => {}, ['prevent'])
+    const onFocusOutside = (event: Event) => {
+      if (event.defaultPrevented) return
+      const isMovingToParentContent = parentContentContext.filterElement.value?.contains(
+        event.target as Node,
+      )
+      if (event.target !== menuSubContext.trigger.value && !isMovingToParentContent)
+        menuContext.onOpenChange(false)
+    }
+    const onEscapeKeyDown = (event: Event) => {
+      rootContext.onClose()
+      event.preventDefault()
+    }
+    const onKeydown = (event: KeyboardEvent) => {
+      const isKeyDownInside = (event.currentTarget as HTMLElement)?.contains(
+        event.target as HTMLElement,
+      )
+      const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir.value].includes(event.key)
+      if (isKeyDownInside && isCloseKey) {
+        menuContext.onOpenChange(false)
+        if (parentContentContext.filterElement.value) {
+          parentContentContext.filterElement.value.focus()
+          parentContentContext.highlightedElement.value = menuSubContext.trigger.value
+          menuSubContext.trigger.value?.scrollIntoView({ block: 'nearest' })
+        } else menuSubContext.trigger.value?.focus()
+        event.preventDefault()
+      }
+    }
+
+    return () =>
+      h(
+        Presence,
+        { present: props.forceMount || menuContext.open.value },
+        {
+          default: withCtx(() => [
+            h(
+              MenuContentImpl as Component,
+              mergeProps(forwarded.value, {
+                id: menuSubContext.contentId,
+                ref: forwardRef,
+                'aria-labelledby': menuSubContext.triggerId,
+                align: 'start',
+                side: rootContext.dir.value === 'rtl' ? 'left' : 'right',
+                'disable-outside-pointer-events': false,
+                'disable-outside-scroll': false,
+                'trap-focus': false,
+                onOpenAutoFocus,
+                onCloseAutoFocus,
+                onFocusOutside,
+                onEscapeKeyDown,
+                onKeydown,
+              }),
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export type MenuContentProps = Partial<Record<keyof typeof menuContentProps, unknown>> & {
+  as?: PrimitiveProps['as']
+}

package/src/primitives/menu/context.ts

@@ -0,0 +1,72 @@
+import type { Ref } from 'vue'
+import type { CheckedState, GraceIntent } from '../../../../shared/src/primitives/menu'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export interface MenuContext {
+  open: Ref<boolean>
+  onOpenChange: (open: boolean) => void
+  content: Ref<HTMLElement | undefined>
+  onContentChange: (content: HTMLElement | undefined) => void
+}
+
+export const [injectMenuContext, provideMenuContext] = createContext<MenuContext>(
+  ['MenuRoot', 'MenuSub'],
+  'MenuContext',
+)
+
+export interface MenuRootContext {
+  onClose: () => void
+  dir: Ref<Direction>
+  isUsingKeyboardRef: Ref<boolean>
+  modal: Ref<boolean>
+}
+
+export const [injectMenuRootContext, provideMenuRootContext] =
+  createContext<MenuRootContext>('MenuRoot')
+
+export interface MenuContentContext {
+  onItemEnter: (event: PointerEvent) => boolean
+  onItemLeave: (event: PointerEvent) => boolean
+  onTriggerLeave: (event: PointerEvent) => boolean
+  searchRef: Ref<string>
+  pointerGraceTimerRef: Ref<number>
+  onPointerGraceIntentChange: (intent: GraceIntent | null) => void
+  highlightedElement: Ref<HTMLElement | undefined>
+  onKeydownNavigation: (event: KeyboardEvent) => void
+  onKeydownEnter: (event: KeyboardEvent) => void
+  filterElement: Ref<HTMLElement | undefined>
+  onFilterElementChange: (element: HTMLElement | undefined) => void
+  activeSubmenuContext: Ref<
+    { onOpenChange: (open: boolean) => void; trigger: Ref<HTMLElement | undefined> } | undefined
+  >
+}
+
+export const [injectMenuContentContext, provideMenuContentContext] =
+  createContext<MenuContentContext>('MenuContent')
+
+export interface MenuSubContext {
+  contentId: string
+  triggerId: string
+  trigger: Ref<HTMLElement | undefined>
+  onTriggerChange: (trigger: HTMLElement | undefined) => void
+}
+
+export const [injectMenuSubContext, provideMenuSubContext] =
+  createContext<MenuSubContext>('MenuSub')
+
+export const [injectMenuGroupContext, provideMenuGroupContext] = createContext<{ id: string }>(
+  'MenuGroup',
+)
+
+export interface MenuRadioGroupContext {
+  modelValue: Ref<unknown>
+  onValueChange: (payload: unknown) => void
+}
+
+export const [injectMenuRadioGroupContext, provideMenuRadioGroupContext] =
+  createContext<MenuRadioGroupContext>('MenuRadioGroup')
+
+export const [injectMenuItemIndicatorContext, provideMenuItemIndicatorContext] = createContext<{
+  modelValue: Ref<CheckedState>
+}>(['MenuCheckboxItem', 'MenuRadioItem'], 'MenuItemIndicatorContext')

package/src/primitives/menu/index.ts

@@ -0,0 +1,26 @@
+export * from './context'
+export { MenuContentImpl, menuContentEmits, menuContentImplProps } from './MenuContentImpl'
+export {
+  MenuAnchor,
+  MenuArrow,
+  MenuCheckboxItem,
+  MenuGroup,
+  MenuItem,
+  MenuItemImpl,
+  MenuItemIndicator,
+  MenuLabel,
+  MenuPortal,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuSubTrigger,
+} from './MenuItem'
+export {
+  MenuContent,
+  menuContentProps,
+  MenuRoot,
+  MenuSub,
+  MenuSubContent,
+  menuSubContentProps,
+  type MenuContentProps,
+} from './MenuRoot'

package/src/primitives/menu/wrap.ts

@@ -0,0 +1,53 @@
+import {
+  defineComponent,
+  guardReactiveProps,
+  h,
+  normalizeProps,
+  renderSlot,
+  withCtx,
+  type Component,
+  type ComponentObjectPropsOptions,
+} from 'vue'
+import { useEmitAsProps } from '../utils/useEmitAsProps'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardPropsEmits } from '../utils/useForwardPropsEmits'
+
+export type WrapMode = 'props' | 'emits' | 'forwarded'
+
+export function wrapMenuPart<P extends ComponentObjectPropsOptions, const E extends string[] = []>(
+  name: string,
+  target: Component,
+  props: P,
+  options: { emits?: E; mode?: WrapMode; expose?: boolean } = {},
+) {
+  const { emits = [] as string[] as E, mode = 'props', expose = true } = options
+  return defineComponent({
+    name,
+    props,
+    emits,
+    setup(rawProps, { emit, slots }) {
+      const emitter = emit as (name: string) => void
+      const emitsAsProps = mode === 'emits' ? useEmitAsProps(emitter) : {}
+      const forwarded = mode === 'forwarded' ? useForwardPropsEmits(rawProps, emitter) : undefined
+      if (expose) useForwardExpose()
+      return () =>
+        h(
+          target,
+          normalizeProps(
+            guardReactiveProps(
+              mode === 'forwarded'
+                ? forwarded!.value
+                : mode === 'emits'
+                  ? { ...rawProps, ...emitsAsProps }
+                  : rawProps,
+            ),
+          ),
+          {
+            default: withCtx((slotProps: Record<string, unknown>) => [
+              renderSlot(slots, 'default', slotProps),
+            ]),
+          },
+        )
+    },
+  })
+}