base-ui-vue 0.4.0 → 0.5.0

package/src/floating-ui-vue/hooks/useHoverFloatingInteraction.ts

@@ -0,0 +1,244 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { Delay, FloatingContext, FloatingRootContext } from '../types'
+import { isElement } from '@floating-ui/utils/dom'
+import { onScopeDispose, toValue, watchEffect } from 'vue'
+import { addEventListener } from '../../utils/addEventListener'
+import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails'
+import { mergeCleanups } from '../../utils/mergeCleanups'
+import { ownerDocument } from '../../utils/owner'
+import { REASONS } from '../../utils/reasons'
+import { useTimeout } from '../../utils/useTimeout'
+import { useFloatingParentNodeId, useFloatingTree } from '../components/FloatingTree'
+import { contains, getTarget } from '../utils/element'
+import { getNodeChildren } from '../utils/nodes'
+import {
+  applySafePolygonPointerEventsMutation,
+  clearSafePolygonPointerEventsMutation,
+  isInteractiveElement,
+  useHoverInteractionSharedState,
+} from './useHoverInteractionSharedState'
+import {
+  getDelay,
+  isClickLikeOpenEvent as isClickLikeOpenEventShared,
+  isHoverOpenEvent,
+  isInsideEnabledTrigger,
+} from './useHoverShared'
+
+export interface UseHoverFloatingInteractionProps {
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: MaybeRefOrGetter<boolean | undefined>
+  /**
+   * Waits for the specified time when the event listener runs before changing
+   * the `open` state.
+   * @default 0
+   */
+  closeDelay?: MaybeRefOrGetter<Delay | (() => Delay) | undefined>
+  /**
+   * Tree node id override for floating elements that participate in the tree
+   * without a `FloatingContext`, such as inline nested navigation menus.
+   */
+  nodeId?: MaybeRefOrGetter<string | undefined>
+}
+
+/**
+ * Provides hover interactions that should be attached to the floating element.
+ */
+export function useHoverFloatingInteraction(
+  context: FloatingRootContext | FloatingContext,
+  parameters: UseHoverFloatingInteractionProps = {},
+): void {
+  const store = 'rootStore' in context ? context.rootStore : context
+
+  const open = store.useState('open')
+  const floatingElement = store.useState('floatingElement')
+  const domReferenceElement = store.useState('domReferenceElement')
+  const { dataRef } = store.context
+
+  const tree = useFloatingTree()
+  const parentId = useFloatingParentNodeId()
+  const instance = useHoverInteractionSharedState(store)
+
+  const childClosedTimeout = useTimeout()
+
+  function enabled() {
+    return toValue(parameters.enabled ?? true) !== false
+  }
+
+  function isClickLikeOpenEvent() {
+    return isClickLikeOpenEventShared(dataRef.value.openEvent?.type, instance.interactedInside)
+  }
+
+  function isHoverOpen() {
+    return isHoverOpenEvent(dataRef.value.openEvent?.type)
+  }
+
+  function clearPointerEvents() {
+    clearSafePolygonPointerEventsMutation(instance)
+  }
+
+  watchEffect(() => {
+    if (!open.value) {
+      instance.pointerType = undefined
+      instance.restTimeoutPending = false
+      instance.interactedInside = false
+      clearPointerEvents()
+    }
+  })
+
+  onScopeDispose(clearPointerEvents)
+
+  watchEffect((onCleanup) => {
+    if (!enabled()) {
+      return
+    }
+
+    if (
+      open.value
+      && instance.handleCloseOptions?.blockPointerEvents
+      && isHoverOpen()
+      && isElement(domReferenceElement.value)
+      && floatingElement.value
+    ) {
+      const ref = domReferenceElement.value as HTMLElement | SVGSVGElement
+      const floatingEl = floatingElement.value
+      const doc = ownerDocument(floatingEl)
+
+      const parentNode = tree?.nodesRef.value.find(node => node.id === parentId)
+      const parentFloating = parentNode?.context?.rootStore.select('floatingElement') ?? null
+
+      if (parentFloating) {
+        parentFloating.style.pointerEvents = ''
+      }
+
+      const cachedScopeElement
+        = instance.pointerEventsScopeElement !== floatingEl
+          ? instance.pointerEventsScopeElement
+          : null
+      const parentScopeElement = parentFloating !== floatingEl ? parentFloating : null
+      const scopeElement
+        = instance.handleCloseOptions?.getScope?.()
+          ?? cachedScopeElement
+          ?? parentScopeElement
+          ?? (ref.closest('[data-rootownerid]') as HTMLElement | SVGSVGElement | null)
+          ?? doc?.body
+
+      if (scopeElement) {
+        applySafePolygonPointerEventsMutation(instance, {
+          scopeElement,
+          referenceElement: ref,
+          floatingElement: floatingEl,
+        })
+
+        onCleanup(clearPointerEvents)
+      }
+    }
+  })
+
+  watchEffect((onCleanup) => {
+    if (!enabled()) {
+      return
+    }
+
+    function hasParentChildren() {
+      return Boolean(tree && parentId && getNodeChildren(tree.nodesRef.value, parentId).length > 0)
+    }
+
+    function closeWithDelay(event: MouseEvent) {
+      const closeDelay = getDelay(toValue(parameters.closeDelay ?? 0), 'close', instance.pointerType)
+      const close = () => {
+        store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event))
+        tree?.events.emit('floating.closed', event)
+      }
+
+      if (closeDelay) {
+        instance.openChangeTimeout.start(closeDelay, close)
+      }
+      else {
+        instance.openChangeTimeout.clear()
+        close()
+      }
+    }
+
+    function handleInteractInside(event: PointerEvent) {
+      const target = getTarget(event) as Element | null
+      if (!isInteractiveElement(target)) {
+        instance.interactedInside = false
+        return
+      }
+
+      instance.interactedInside = target?.closest('[aria-haspopup]') != null
+    }
+
+    function onFloatingMouseEnter() {
+      instance.openChangeTimeout.clear()
+      store.context.clearCloseTimer?.()
+      childClosedTimeout.clear()
+      tree?.events.off('floating.closed', onNodeClosed)
+      clearPointerEvents()
+    }
+
+    function onFloatingMouseLeave(event: MouseEvent) {
+      if (hasParentChildren() && tree) {
+        tree.events.off('floating.closed', onNodeClosed)
+        tree.events.on('floating.closed', onNodeClosed)
+        return
+      }
+
+      if (isInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) {
+        return
+      }
+
+      const currentNodeId = dataRef.value.floatingContext?.nodeId ?? toValue(parameters.nodeId)
+      const relatedTarget = event.relatedTarget
+      const isMovingIntoDescendantFloating
+        = tree
+          && currentNodeId
+          && isElement(relatedTarget)
+          && getNodeChildren(tree.nodesRef.value, currentNodeId, false).some(node =>
+            contains(node.context?.rootStore.select('floatingElement'), relatedTarget),
+          )
+
+      if (isMovingIntoDescendantFloating) {
+        return
+      }
+
+      if (instance.handler) {
+        instance.handler(event)
+        return
+      }
+
+      clearPointerEvents()
+      if (isHoverOpen() && !isClickLikeOpenEvent()) {
+        closeWithDelay(event)
+      }
+    }
+
+    function onNodeClosed(event: MouseEvent) {
+      if (!tree || !parentId || hasParentChildren()) {
+        return
+      }
+
+      childClosedTimeout.start(0, () => {
+        tree.events.off('floating.closed', onNodeClosed)
+        store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event))
+        tree.events.emit('floating.closed', event)
+      })
+    }
+
+    const floating = floatingElement.value
+    const cleanup = mergeCleanups(
+      addEventListener(floating, 'mouseenter', onFloatingMouseEnter),
+      addEventListener(floating, 'mouseleave', onFloatingMouseLeave),
+      addEventListener(floating, 'pointerdown', handleInteractInside, true),
+      () => {
+        tree?.events.off('floating.closed', onNodeClosed)
+      },
+    )
+
+    onCleanup(cleanup)
+  })
+}

package/src/floating-ui-vue/hooks/useHoverInteractionSharedState.ts

@@ -0,0 +1,125 @@
+import type { FloatingRootContext, HandleCloseOptions } from '../types'
+import { onScopeDispose } from 'vue'
+import { Timeout } from '../../utils/useTimeout'
+import { isInteractiveElement } from '../utils/element'
+
+export { isInteractiveElement }
+
+export class HoverInteraction {
+  pointerType: string | undefined
+  interactedInside: boolean
+  handler: ((event: MouseEvent) => void) | undefined
+  blockMouseMove: boolean
+  performedPointerEventsMutation: boolean
+  pointerEventsScopeElement: HTMLElement | SVGSVGElement | null
+  pointerEventsReferenceElement: HTMLElement | SVGSVGElement | null
+  pointerEventsFloatingElement: HTMLElement | null
+  restTimeoutPending: boolean
+  openChangeTimeout: Timeout
+  restTimeout: Timeout
+  handleCloseOptions: HandleCloseOptions | undefined
+
+  constructor() {
+    this.pointerType = undefined
+    this.interactedInside = false
+    this.handler = undefined
+    this.blockMouseMove = true
+    this.performedPointerEventsMutation = false
+    this.pointerEventsScopeElement = null
+    this.pointerEventsReferenceElement = null
+    this.pointerEventsFloatingElement = null
+    this.restTimeoutPending = false
+    this.openChangeTimeout = new Timeout()
+    this.restTimeout = new Timeout()
+    this.handleCloseOptions = undefined
+  }
+
+  static create(): HoverInteraction {
+    return new HoverInteraction()
+  }
+
+  dispose = () => {
+    this.openChangeTimeout.clear()
+    this.restTimeout.clear()
+  }
+}
+
+type PointerEventsMutationState = Pick<
+  HoverInteraction,
+  | 'performedPointerEventsMutation'
+  | 'pointerEventsScopeElement'
+  | 'pointerEventsReferenceElement'
+  | 'pointerEventsFloatingElement'
+>
+
+const pointerEventsMutationOwnerByScopeElement = new WeakMap<
+  HTMLElement | SVGSVGElement,
+  PointerEventsMutationState
+>()
+
+export function clearSafePolygonPointerEventsMutation(instance: PointerEventsMutationState) {
+  if (!instance.performedPointerEventsMutation) {
+    return
+  }
+
+  const scopeElement = instance.pointerEventsScopeElement
+
+  if (scopeElement && pointerEventsMutationOwnerByScopeElement.get(scopeElement) === instance) {
+    instance.pointerEventsScopeElement?.style.removeProperty('pointer-events')
+    instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events')
+    instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events')
+    pointerEventsMutationOwnerByScopeElement.delete(scopeElement)
+  }
+
+  instance.performedPointerEventsMutation = false
+  instance.pointerEventsScopeElement = null
+  instance.pointerEventsReferenceElement = null
+  instance.pointerEventsFloatingElement = null
+}
+
+export function applySafePolygonPointerEventsMutation(
+  instance: PointerEventsMutationState,
+  options: {
+    scopeElement: HTMLElement | SVGSVGElement
+    referenceElement: HTMLElement | SVGSVGElement
+    floatingElement: HTMLElement
+  },
+) {
+  const { scopeElement, referenceElement, floatingElement } = options
+
+  const existingOwner = pointerEventsMutationOwnerByScopeElement.get(scopeElement)
+  if (existingOwner && existingOwner !== instance) {
+    clearSafePolygonPointerEventsMutation(existingOwner)
+  }
+
+  clearSafePolygonPointerEventsMutation(instance)
+  instance.performedPointerEventsMutation = true
+  instance.pointerEventsScopeElement = scopeElement
+  instance.pointerEventsReferenceElement = referenceElement
+  instance.pointerEventsFloatingElement = floatingElement
+  pointerEventsMutationOwnerByScopeElement.set(scopeElement, instance)
+
+  scopeElement.style.pointerEvents = 'none'
+  referenceElement.style.pointerEvents = 'auto'
+  floatingElement.style.pointerEvents = 'auto'
+}
+
+interface HoverContextData {
+  hoverInteractionState?: HoverInteraction
+}
+
+export function getHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction {
+  const data = store.context.dataRef.value as HoverContextData
+
+  if (!data.hoverInteractionState) {
+    data.hoverInteractionState = HoverInteraction.create()
+  }
+
+  return data.hoverInteractionState
+}
+
+export function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction {
+  const instance = getHoverInteractionSharedState(store)
+  onScopeDispose(instance.dispose)
+  return instance
+}

package/src/floating-ui-vue/hooks/useHoverShared.ts

@@ -0,0 +1,53 @@
+import type { Delay } from '../types'
+import { isMouseLikePointerType } from '../utils/event'
+
+export type {
+  HandleClose,
+  HandleCloseContext,
+  HandleCloseContextBase,
+  HandleCloseOptions,
+} from '../types'
+export { isTargetInsideEnabledTrigger as isInsideEnabledTrigger } from '../utils/element'
+
+function resolveValue<T>(
+  value: T | (() => T) | undefined,
+  pointerType?: PointerEvent['pointerType'],
+): T | 0 | undefined {
+  if (pointerType != null && !isMouseLikePointerType(pointerType)) {
+    return 0
+  }
+
+  if (typeof value === 'function') {
+    return (value as () => T)()
+  }
+
+  return value
+}
+
+export function getDelay(
+  value: Delay | (() => Delay) | undefined,
+  prop: 'open' | 'close',
+  pointerType?: PointerEvent['pointerType'],
+) {
+  const result = resolveValue(value, pointerType)
+  if (typeof result === 'number') {
+    return result
+  }
+
+  return result?.[prop]
+}
+
+export function getRestMs(value: number | (() => number)) {
+  if (typeof value === 'function') {
+    return value()
+  }
+  return value
+}
+
+export function isClickLikeOpenEvent(openEventType: string | undefined, interactedInside: boolean) {
+  return interactedInside || openEventType === 'click' || openEventType === 'mousedown'
+}
+
+export function isHoverOpenEvent(openEventType: string | undefined) {
+  return openEventType?.includes('mouse') && openEventType !== 'mousedown'
+}

package/src/floating-ui-vue/index.ts

@@ -0,0 +1,48 @@
+export { useFloatingPortalNode } from './components/FloatingPortal'
+export type {
+  FloatingPortal,
+  FloatingPortalContainer,
+  FloatingPortalContext,
+  FloatingPortalFocusManagerState,
+  FloatingPortalProps,
+  FloatingPortalState,
+  FloatingPortalTarget,
+  UseFloatingPortalNodeProps,
+  UseFloatingPortalNodeResult,
+} from './components/FloatingPortal'
+export {
+  floatingPortalContextKey,
+  usePortalContext,
+} from './components/FloatingPortal'
+export { createFloatingRootContext } from './components/FloatingRootStore'
+export {
+  provideFloatingNode,
+  provideFloatingTree,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+} from './components/FloatingTree'
+export { FloatingTreeStore } from './components/FloatingTreeStore'
+export { useDismiss } from './hooks/useDismiss'
+export type { UseDismissProps } from './hooks/useDismiss'
+export { useHoverFloatingInteraction } from './hooks/useHoverFloatingInteraction'
+export type { UseHoverFloatingInteractionProps } from './hooks/useHoverFloatingInteraction'
+export type * from './types'
+export {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  detectOverflow,
+  flip,
+  getOverflowAncestors,
+  hide,
+  inline,
+  limitShift,
+  offset,
+  platform,
+  shift,
+  size,
+  useFloating,
+} from '@floating-ui/vue'
+export type * from '@floating-ui/vue'

package/src/floating-ui-vue/middleware/arrow.ts

@@ -0,0 +1,114 @@
+import type { Middleware, MiddlewareState, Padding } from '@floating-ui/vue'
+import {
+  clamp,
+  evaluate,
+  getAlignment,
+  getAlignmentAxis,
+  getAxisLength,
+  getPaddingObject,
+} from '@floating-ui/utils'
+
+type Derivable<T> = T | ((state: MiddlewareState) => T)
+
+export interface ArrowOptions {
+  /**
+   * The arrow element to be positioned.
+   * @default undefined
+   */
+  element: Element | null | undefined
+  /**
+   * The padding between the arrow element and the floating element edges.
+   * Useful when the floating element has rounded corners.
+   * @default 0
+   */
+  padding?: Padding
+  /**
+   * Which element to use as the offset parent.
+   * @default 'real'
+   */
+  offsetParent: 'real' | 'floating'
+}
+
+/**
+ * Fork of the original `arrow` middleware from Floating UI that allows
+ * configuring the offset parent.
+ */
+export function baseArrow(options: ArrowOptions | Derivable<ArrowOptions>): Middleware {
+  return {
+    name: 'arrow',
+    options,
+    async fn(state) {
+      const { x, y, placement, rects, platform, elements, middlewareData } = state
+      const { element, padding = 0, offsetParent = 'real' } = evaluate(options, state) || {}
+
+      if (element == null) {
+        return {}
+      }
+
+      const paddingObject = getPaddingObject(padding)
+      const coords = { x, y }
+      const axis = getAlignmentAxis(placement)
+      const length = getAxisLength(axis)
+      const arrowDimensions = await platform.getDimensions(element)
+      const isYAxis = axis === 'y'
+      const minProp = isYAxis ? 'top' : 'left'
+      const maxProp = isYAxis ? 'bottom' : 'right'
+      const clientProp = isYAxis ? 'clientHeight' : 'clientWidth'
+
+      const endDiff
+        = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length]
+      const startDiff = coords[axis] - rects.reference[axis]
+
+      const arrowOffsetParent = offsetParent === 'real'
+        ? await platform.getOffsetParent?.(element)
+        : elements.floating
+      let clientSize = 0
+
+      if (arrowOffsetParent && await platform.isElement?.(arrowOffsetParent)) {
+        clientSize = arrowOffsetParent[clientProp]
+      }
+
+      if (!clientSize) {
+        clientSize = elements.floating[clientProp] || rects.floating[length]
+      }
+
+      const centerToReference = endDiff / 2 - startDiff / 2
+      const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1
+      const minPadding = Math.min(paddingObject[minProp], largestPossiblePadding)
+      const maxPadding = Math.min(paddingObject[maxProp], largestPossiblePadding)
+
+      const min = minPadding
+      const max = clientSize - arrowDimensions[length] - maxPadding
+      const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference
+      const offset = clamp(min, center, max)
+
+      const shouldAddOffset
+        = !middlewareData.arrow
+          && getAlignment(placement) != null
+          && center !== offset
+          && rects.reference[length] / 2
+          - (center < min ? minPadding : maxPadding)
+          - arrowDimensions[length] / 2
+          < 0
+      const alignmentOffset = shouldAddOffset ? (center < min ? center - min : center - max) : 0
+
+      return {
+        [axis]: coords[axis] + alignmentOffset,
+        data: {
+          [axis]: offset,
+          centerOffset: center - offset - alignmentOffset,
+          ...(shouldAddOffset && { alignmentOffset }),
+        },
+        reset: shouldAddOffset,
+      }
+    },
+  }
+}
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ */
+export function arrow(options: ArrowOptions | Derivable<ArrowOptions>): Middleware {
+  return baseArrow(options)
+}

package/src/floating-ui-vue/types.ts

@@ -1 +1,118 @@
+import type {
+  Placement,
+  VirtualElement,
+} from '@floating-ui/vue'
+import type { ComputedRef, Ref } from 'vue'
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { TransitionStatus } from '../utils/useTransitionStatus'
+import type { FloatingTreeStore } from './components/FloatingTreeStore'
+
 export type { Coords, Dimensions } from '@floating-ui/dom'
+
+export type ReferenceType = Element | VirtualElement
+export type Delay = number | Partial<{ open: number, close: number }>
+
+export interface FloatingEvents {
+  emit: <T extends string>(event: T, data?: any) => void
+  on: (event: string, handler: (data: any) => void) => void
+  off: (event: string, handler: (data: any) => void) => void
+}
+
+export interface ContextData {
+  openEvent?: Event
+  floatingContext?: FloatingContext
+  insideVueTree?: boolean
+  __escapeKeyBubbles?: boolean
+  __outsidePressBubbles?: boolean
+  [key: string]: any
+}
+
+export interface FloatingUIOpenChangeDetails {
+  open: boolean
+  reason: string
+  nativeEvent: Event
+  nested: boolean
+  triggerElement: Element | undefined
+}
+
+export interface FloatingTriggerMap {
+  hasElement: (element: Element) => boolean
+  hasMatchingElement: (predicate: (element: Element) => boolean) => boolean
+  getById: (id: string) => Element | undefined
+  entries: () => IterableIterator<[string, HTMLElement]>
+  elements: () => IterableIterator<Element>
+  readonly size: number
+}
+
+export interface FloatingRootState {
+  open: boolean
+  transitionStatus: TransitionStatus
+  domReferenceElement: Element | null
+  referenceElement: ReferenceType | null
+  floatingElement: HTMLElement | null
+  floatingId: string | undefined
+}
+
+export interface FloatingRootStoreContext {
+  dataRef: Ref<ContextData>
+  events: FloatingEvents
+  nested: boolean
+  triggerElements: FloatingTriggerMap
+  clearCloseTimer?: () => void
+}
+
+export interface FloatingRootContext {
+  context: FloatingRootStoreContext
+  useState: <K extends keyof FloatingRootState>(key: K) => ComputedRef<FloatingRootState[K]>
+  select: <K extends keyof FloatingRootState>(key: K) => FloatingRootState[K]
+  setOpen: (open: boolean, eventDetails: BaseUIChangeEventDetails<string, any>) => void
+  dispatchOpenChange: (open: boolean, eventDetails: BaseUIChangeEventDetails<string, any>) => void
+}
+
+export interface FloatingContext {
+  open: ComputedRef<boolean>
+  nodeId: string | undefined
+  floatingId: string | undefined
+  rootStore: FloatingRootContext
+}
+
+export interface FloatingNodeType {
+  id: string | undefined
+  parentId: string | null
+  context?: FloatingContext
+}
+
+export type FloatingTreeType = FloatingTreeStore
+
+export interface ElementProps {
+  reference?: Record<string, any> | undefined
+  floating?: Record<string, any> | undefined
+  item?: Record<string, any> | undefined
+  trigger?: Record<string, any> | undefined
+}
+
+export interface HandleCloseOptions {
+  blockPointerEvents?: boolean
+  getScope?: (() => HTMLElement | SVGSVGElement | null)
+}
+
+export interface HandleCloseContext {
+  x: number | null
+  y: number | null
+  placement: Placement | null
+  elements: {
+    domReference: Element | null
+    floating: HTMLElement | null
+  }
+  onClose: () => void
+  nodeId?: string
+  tree?: FloatingTreeType | null
+  leave?: boolean
+}
+
+export type HandleCloseContextBase = Omit<HandleCloseContext, 'onClose' | 'tree' | 'x' | 'y'>
+
+export interface HandleClose {
+  (context: HandleCloseContext): (event: MouseEvent) => void
+  __options?: HandleCloseOptions
+}