feat: setup zag transition for popover

Author: codebender828

package.json

@@ -141,7 +141,7 @@
     "@vueuse/core": "4.9.1",
     "@vueuse/head": "^0.7.4",
     "@vueuse/integrations": "^4.8.1",
-    "@vueuse/motion": "^1.5.4",
+    "@vueuse/motion": "^1.6.0",
     "@vueuse/shared": "^9.11.1",
     "aria-hidden": "^1.1.2",
     "axe-core": "^4.1.2",

packages/c-checkbox/package.json

@@ -37,7 +37,7 @@
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",
-    "@vueuse/motion": "^1.5.4",
+    "@vueuse/motion": "^1.6.0",
     "@zag-js/checkbox": "0.2.12",
     "@zag-js/vue": "0.2.10"
   },

packages/c-modal/package.json

@@ -44,7 +44,7 @@
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",
-    "@vueuse/motion": "^1.5.4",
+    "@vueuse/motion": "^1.6.0",
     "aria-hidden": "^1.1.2"
   },
   "devDependencies": {

packages/c-motion/package.json

@@ -38,7 +38,7 @@
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",
-    "@vueuse/motion": "^1.5.4",
+    "@vueuse/motion": "^1.6.0",
     "@vueuse/shared": "^9.11.1"
   },
   "devDependencies": {

packages/c-popover/examples/with-hover-trigger.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { chakra, useColorModeValue } from "../../vue/src"
+import {
+  CPopover,
+  CPopoverTrigger,
+  CPopoverContent,
+  CPopoverArrow,
+  CPopoverHeader,
+  CPopoverBody,
+} from "../src"
+import { CButton } from "../../c-button/src"
+</script>
+
+<template>
+  <c-popover
+    trigger="hover"
+    :positioning="{
+      placement: 'right',
+    }"
+  >
+    <c-popover-trigger>
+      <c-button> Over over me </c-button>
+    </c-popover-trigger>
+    <c-popover-content
+      px="3"
+      py="2"
+      :bg="useColorModeValue('gray.100', 'gray.800').value"
+    >
+      <c-popover-arrow />
+      <c-popover-header>Hover Popover</c-popover-header>
+      <c-popover-body>
+        <chakra.div> This is a popover </chakra.div>
+      </c-popover-body>
+    </c-popover-content>
+  </c-popover>
+</template>

packages/c-popover/src/c-popover-content.tsx

@@ -1,7 +1,12 @@
-import { defineComponent } from "vue"
+import { Transition, computed, defineComponent, watch, watchEffect } from "vue"
 import { usePopoverContext } from "./popover.context"
 import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
 import { CPopoverPositioner } from "./c-popover-positioner"
+import { CAnimatePresence, TransitionDefaults } from "@chakra-ui/c-motion"
+import { MotionDirective, useMotion, useMotions } from "@vueuse/motion"
+import { useId } from "@chakra-ui/vue-composables"
+import { withDirectives } from "vue"
+import { match } from "@chakra-ui/vue-utils"
 
 export interface CPopoverContentProps extends HTMLChakraProps<"div"> {}
 export const CPopoverContent = defineComponent({
@@ -10,9 +15,60 @@ export const CPopoverContent = defineComponent({
   setup(_, { slots, attrs }) {
     const api = usePopoverContext()
 
+    const popoverContentProps = computed(() => {
+      const { ...rest } = { ...attrs, ...api.value.contentProps }
+      return {
+        ...rest,
+        ...match(api.value.trigger, {
+          hover: {
+            async onPointerenter(e: MouseEvent) {
+              const motions = useMotions()
+              const instance = motions[api.value.transitionId]
+              instance.stopTransitions()
+              api.value.open()
+              requestAnimationFrame(() => {
+                api.value.enterTransition(() => null)
+              })
+            },
+            async onPointerleave(e: MouseEvent) {
+              requestAnimationFrame(() => {
+                api.value.leaveTransition(() => api.value.close())
+              })
+            },
+          },
+          click: {},
+        }),
+      }
+    })
+
     return () => (
-      <CPopoverPositioner {...attrs}>
-        <chakra.div {...api.value.contentProps}>{slots.default?.()}</chakra.div>
+      <CPopoverPositioner>
+        <CAnimatePresence>
+          {api.value.isOpen &&
+            withDirectives(
+              <chakra.div {...popoverContentProps.value}>
+                {slots.default?.()}
+              </chakra.div>,
+              [
+                [
+                  MotionDirective({
+                    initial: { scale: 0.95, opacity: 0 },
+                    enter: {
+                      scale: 1,
+                      transition: TransitionDefaults.enter,
+                      opacity: 1,
+                    },
+                    leave: {
+                      scale: 0.95,
+                      transition: TransitionDefaults.leave,
+                      opacity: 0,
+                    },
+                  }),
+                  api.value.transitionId,
+                ],
+              ]
+            )}
+        </CAnimatePresence>
       </CPopoverPositioner>
     )
   },

packages/c-popover/src/c-popover-positioner.tsx

@@ -1,22 +1,22 @@
 import { defineComponent } from "vue"
 import { usePopoverContext } from "./popover.context"
 import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
-import { CMotion } from "@chakra-ui/c-motion"
 
 export interface CPopoverPositionerProps extends HTMLChakraProps<"div"> {}
 export const CPopoverPositioner = defineComponent({
   name: "CPopoverPositioner",
+  inheritAttrs: false,
   setup(_, { slots, attrs }) {
     const api = usePopoverContext()
 
-    return () => (
-      <chakra.div {...api.value.positionerProps}>
-        <CMotion type={"scale"}>
-          {api.value.isOpen && (
-            <chakra.div {...attrs}>{slots.default?.()}</chakra.div>
-          )}
-        </CMotion>
-      </chakra.div>
-    )
+    return () => {
+      const { style, ...positionerProps } = api.value.positionerProps
+      const { opacity, ...styleProps } = style
+      return (
+        <chakra.div {...positionerProps} style={styleProps}>
+          <chakra.div {...attrs}>{slots.default?.()}</chakra.div>
+        </chakra.div>
+      )
+    }
   },
 })

packages/c-popover/src/c-popover-trigger.tsx

@@ -1,15 +1,49 @@
-import { defineComponent } from "vue"
+import { computed, defineComponent, watchEffect } from "vue"
 import { usePopoverContext } from "./popover.context"
-import { withSingleton } from "@chakra-ui/vue-utils"
+import { match, withSingleton } from "@chakra-ui/vue-utils"
 
 export const CPopoverTrigger = defineComponent({
   name: "CPopoverTrigger",
   setup(_, { slots, attrs }) {
     const api = usePopoverContext()
 
+    const popoverTriggerProps = computed(() => {
+      const { onClick, ...rest } = api.value.triggerProps
+      return {
+        ...rest,
+        ...match(api.value.trigger, {
+          click: {
+            async onClick(e: MouseEvent) {
+              if (api.value.isOpen) {
+                requestAnimationFrame(() => {
+                  api.value.leaveTransition(() => onClick(e))
+                })
+                await api.value.wait(300)
+              } else {
+                onClick(e)
+              }
+            },
+          },
+          hover: {
+            async onPointerenter(e: MouseEvent) {
+              api.value.open()
+              requestAnimationFrame(() => {
+                api.value.enterTransition(() => null)
+              })
+            },
+            async onPointerleave(e: MouseEvent) {
+              requestAnimationFrame(() => {
+                api.value.leaveTransition(() => api.value.close())
+              })
+            },
+          },
+        }),
+      }
+    })
+
     return () =>
       withSingleton(slots, "CPopoverTrigger", {
-        ...api.value.triggerProps,
+        ...popoverTriggerProps.value,
         ...attrs,
       })
   },

packages/c-popover/src/c-popover.tsx

@@ -10,14 +10,20 @@
 
 import { computed, defineComponent, PropType } from "vue"
 import { PopoverProvider } from "./popover.context"
-import { usePopover, UsePopoverProps } from "./use-popover"
-import type * as Z from "@zag-js/types"
-import type * as PO from "@zag-js/popover"
-import type * as PP from "@zag-js/popper"
+import {
+  useDeferredDisclosure,
+  usePopover,
+  UsePopoverProps,
+} from "./use-popover"
+import type * as ZP from "@zag-js/popper"
+import { useId } from "@chakra-ui/vue-composables"
+import { useMotions } from "@vueuse/motion"
 
 type PopoverPropsContext = UsePopoverProps["context"]
 
-export type CPopoverProps = PopoverPropsContext
+export interface CPopoverProps extends PopoverPropsContext {
+  trigger: "click" | "hover"
+}
 
 const VuePopoverProps = {
   autoFocus: {
@@ -56,6 +62,14 @@ const VuePopoverProps = {
   positioning: {
     type: Object as PropType<CPopoverProps["positioning"]>,
   },
+  trigger: {
+    type: String as PropType<CPopoverProps["trigger"]>,
+    default: "click",
+  },
+}
+
+function wait(delay: number) {
+  return new Promise((resolve) => setTimeout(resolve, delay))
 }
 
 export const CPopover = defineComponent({
@@ -74,10 +88,42 @@ export const CPopover = defineComponent({
       emit,
     }))
 
+    const transitionId = useId(
+      popoverProps.value.context.id,
+      "transition:popover:"
+    )
+
+    /** Handles exit transition */
+    const leaveTransition = (done: VoidFunction) => {
+      const motions = useMotions()
+      const instance = motions[transitionId.value]
+      instance?.leave(() => {
+        done()
+      })
+    }
+
+    const enterTransition = async (done: VoidFunction) => {
+      const motions = useMotions()
+      const instance = motions[transitionId.value]
+      await instance.apply("enter")
+      done()
+    }
+
     const api = usePopover(popoverProps.value)
+    const nativeIsOpen = computed(() => api.value.isOpen)
 
-    PopoverProvider(api)
+    const { isOpenDeferred } = useDeferredDisclosure(nativeIsOpen)
+    const popoverApi = computed(() => ({
+      ...api.value,
+      deferredIsOpen: isOpenDeferred.value,
+      leaveTransition,
+      enterTransition,
+      wait,
+      transitionId: transitionId.value,
+      trigger: props.trigger,
+    }))
 
+    PopoverProvider(popoverApi)
     return () => slots.default?.()
   },
 })

packages/c-popover/src/popover.context.ts

@@ -1,10 +1,19 @@
 import type { connect } from "@zag-js/popover"
 import type { ComputedRef } from "vue"
-import { createContext } from "@chakra-ui/vue-utils"
+import { AnyFn, createContext } from "@chakra-ui/vue-utils"
 import type { UsePopoverReturn } from "./use-popover"
 
 export const [PopoverProvider, usePopoverContext] = createContext<
-  ComputedRef<ReturnType<typeof connect>>
+  ComputedRef<
+    ReturnType<typeof connect> & {
+      deferredIsOpen: boolean
+      leaveTransition: AnyFn
+      enterTransition: AnyFn
+      wait: AnyFn
+      transitionId: string
+      trigger: "click" | "hover"
+    }
+  >
 >({
   name: "CPopoverContext",
   strict: true,