fix: update code

packages/components/hover-card/package.json

@@ -37,12 +37,17 @@
  "vue": "^3.3.0"
  },
  "dependencies": {
+ "@floating-ui/vue": "^1.0.2",
+ "@oku-ui/dismissable-layer": "0.4.0-alpha.3",
  "@oku-ui/popper": "latest",
  "@oku-ui/portal": "latest",
+ "@oku-ui/presence": "0.4.0-alpha.3",
  "@oku-ui/primitive": "latest",
  "@oku-ui/provide": "latest",
+ "@oku-ui/slot": "0.4.0-alpha.3",
  "@oku-ui/use-composable": "latest",
- "@oku-ui/utils": "latest"
+ "@oku-ui/utils": "latest",
+ "@oku-ui/visually-hidden": "0.4.0-alpha.3"
  },
  "devDependencies": {
  "tsconfig": "workspace:^"

packages/components/hover-card/src/hoverCardContent.ts

@@ -1,7 +1,5 @@
 import type { PropType } from 'vue'
 import { computed, defineComponent, h, mergeProps, toRefs } from 'vue'
-import type { PrimitiveProps } from '@oku-ui/primitive'
-import { primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { OkuPresence } from '@oku-ui/presence'
 import { composeEventHandlers } from '@oku-ui/utils'
@@ -16,15 +14,18 @@
 export type HoverCardContentNaviteElement = HoverCardContentImplNaviteElement
 export type HoverCardContentElement = HoverCardContentImplElement
 
-export interface HoverCardContentProps extends PrimitiveProps, HoverCardContentImplProps {
+export interface HoverCardContentProps extends HoverCardContentImplProps {
  /**
  * Used to force mounting when more control is needed. Useful when
  * controlling animation with React animation libraries.
  */
  forceMount?: true
 }
 
-export type HoverCardContentEmits = HoverCardContentImplEmits
+export type HoverCardContentEmits = HoverCardContentImplEmits & {
+ pointerenter: [event: PointerEvent]
+ pointerleave: [event: PointerEvent]
+}
 
 export const hoverCardContentProps = {
  props: {
@@ -36,6 +37,10 @@
  },
  emits: {
  ...hoverCardContentImplProps.emits,
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ pointerenter: (event: PointerEvent) => true,
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ pointerleave: (event: PointerEvent) => true,
  },
 }
 
@@ -44,12 +49,11 @@
  inheritAttrs: false,
  props: {
  ...hoverCardContentProps.props,
- ...primitiveProps,
  ...scopeHoverCardProps,
  },
- emits: hoverCardContentImplProps.emits,
+ emits: hoverCardContentProps.emits,
  setup(props, { attrs, slots, emit }) {
  const { forceMount, side, scopeOkuHoverCard } = toRefs(props)
  const portalInject = usePortalInject(CONTENT_NAME, scopeOkuHoverCard.value)
  const forceMountProps = computed(() => forceMount.value || portalInject.forceMount?.value)
  const forwardedRef = useForwardRef()
@@ -61,10 +65,10 @@
  default: () => h(OkuHoverCardContentImpl, {
  'data-state': inject.open.value ? 'open' : 'closed',
  ...mergeProps(attrs, props),
- 'onPointerenter': composeEventHandlers<PointerEvent>((el) => {
+ 'onPointerenter': composeEventHandlers<HoverCardContentEmits['pointerenter'][0]>((el) => {
  emit('pointerenter', el)
  }, excludeTouch(inject.onOpen)),
- 'onPointerleave': composeEventHandlers<PointerEvent>((el) => {
+ 'onPointerleave': composeEventHandlers<HoverCardContentEmits['pointerleave'][0]>((el) => {
  emit('pointerleave', el)
  }, excludeTouch(inject.onClose)),
  'ref': forwardedRef,

packages/components/hover-card/src/hoverCardContentImpl.ts

@@ -44,6 +44,7 @@ export type HoverCardContentImplEmits = Omit<PopperContentEmits, 'placed'> & {
  */
  focusoutSide: [event: DismissableLayerEmits['focusoutSide'][0]]
  interactOutside: [event: DismissableLayerEmits['interactOutside'][0]]
+ pointerdown: [event: PointerEvent]
  close: []
 }
 
@@ -62,6 +63,8 @@ export const hoverCardContentImplProps = {
  focusoutSide: (event: DismissableLayerEmits['focusoutSide'][0]) => true,
  // eslint-disable-next-line unused-imports/no-unused-vars
  interactOutside: (event: DismissableLayerEmits['interactOutside'][0]) => true,
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ pointerdown: (event: MouseEvent) => true,
  close: () => true,
  },
 }
@@ -92,7 +95,7 @@ const hoverCardContentImpl = defineComponent({
  const { ...restAttrs } = attrs as HoverCardContentImplNaviteElement
  const inject = useHoverCardInject(CONTENT_NAME, props.scopeOkuHoverCard)
  const popperScope = usePopperScope(props.scopeOkuHoverCard)
- const _ref = ref<HoverCardContentImplElement>(null)
+ const _ref = ref<HoverCardContentImplElement | null>(null)
 
  const contentRef = ref<HTMLDivElement | null>(null)
  const forwardedRef = useForwardRef()
@@ -140,7 +143,7 @@ const hoverCardContentImpl = defineComponent({
  }
  })
 
- watchEffect((onClean) => {
+ watchEffect(() => {
  if (_ref.value) {
  const tabbables = getTabbableNodes(_ref.value)
  tabbables.forEach((tabbable: any) => tabbable.setAttribute('tabindex', '-1'))
@@ -179,7 +182,7 @@ const hoverCardContentImpl = defineComponent({
  onPointerdownOutside(event) {
  emit('pointerdownOutside', event)
  },
- onFocusOutside: composeEventHandlers<MouseEvent>((el) => {
+ onFocusOutside: composeEventHandlers<HoverCardContentImplEmits['focusoutSide'][0]>((el) => {
  emit('focusoutSide', el)
  }, (event) => {
  event.preventDefault()
@@ -192,11 +195,12 @@ const hoverCardContentImpl = defineComponent({
  ...popperScope,
  asChild: props.asChild,
  ...mergeProps(restAttrs, contentProps),
- onPointerDown: composeEventHandlers<MouseEvent>((el) => {
+ onPointerDown: composeEventHandlers<HoverCardContentImplEmits['pointerdown'][0]>((el) => {
  emit('pointerdown', el)
  }, (event) => {
+ const target = event.currentTarget as HTMLElement
  // Contain selection to current layer
- if (event.currentTarget.contains(event.target as HTMLElement))
+ if (target.contains(event.target as HTMLElement))
  containSelection.value = true
 
  inject.hasSelectionRef.value = false

packages/components/hover-card/src/index.ts

@@ -1,3 +1,5 @@
+import type { } from '@floating-ui/vue'
+
 export {
  OkuHoverCard,
  hoverCardProps,