feat(toolip): manage transitions

Author: codebender828

packages/c-tooltip/package.json

@@ -34,6 +34,7 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
+    "@chakra-ui/c-motion": "workspace:*",
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-utils": "workspace:*",

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

@@ -1,4 +1,11 @@
-import { Teleport, computed, defineComponent, mergeProps } from "vue"
+import {
+  Teleport,
+  Transition,
+  computed,
+  defineComponent,
+  mergeProps,
+  withDirectives,
+} from "vue"
 import { useTooltipContext } from "./tooltip.context"
 import {
   HTMLChakraProps,
@@ -9,6 +16,13 @@ import {
 import { CTooltipPositioner } from "./c-tooltip-positioner"
 import { filterUndefined } from "@chakra-ui/utils"
 import { vueThemingProps } from "@chakra-ui/vue-utils"
+import { MotionDirective, useMotions } from "@vueuse/motion"
+import { TooltipVariants } from "./tooltip.transition"
+
+const toVar = (value: string, fallback?: string) => ({
+  var: value,
+  varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`,
+})
 
 export type CTooltipContentProps = HTMLChakraProps<"div">
 export const CTooltipContent = defineComponent({
@@ -27,17 +41,50 @@ export const CTooltipContent = defineComponent({
       })
     )
     const styles = useStyleConfig("Tooltip", themingProps.value)
+    const contentStyles = computed(() => ({
+      ...styles.value,
+      transformOrigin: toVar(
+        "--transform-origin",
+        api.value.positionerProps.style.transformOrigin
+      ).varRef,
+    }))
+
+    /** Handles exit transition */
+    const leaveTransition = (el: Element, done: VoidFunction) => {
+      const motions = useMotions()
+      const instance = motions[api.value.transitionId]
+      instance?.leave(() => {
+        done()
+      })
+    }
+
+    const enterTransition = (el: Element, done: VoidFunction) => {
+      const motions = useMotions()
+      const instance = motions[api.value.transitionId]
+      requestAnimationFrame(async () => {
+        instance?.stopTransitions()
+        instance?.set("initial")
+        await instance?.apply("enter")
+        done()
+      })
+    }
 
     return () => (
       <Teleport to="body">
         <CTooltipPositioner>
-          <chakra.div
-            __css={styles.value}
-            {...api.value.contentProps}
-            {...attrs}
-          >
-            {slots.default?.()}
-          </chakra.div>
+          <Transition onEnter={enterTransition} onLeave={leaveTransition}>
+            {api.value.isOpen &&
+              withDirectives(
+                <chakra.div
+                  __css={contentStyles.value}
+                  {...api.value.contentProps}
+                  {...attrs}
+                >
+                  {slots.default?.()}
+                </chakra.div>,
+                [[MotionDirective(TooltipVariants), api.value.transitionId]]
+              )}
+          </Transition>
         </CTooltipPositioner>
       </Teleport>
     )

packages/c-tooltip/src/c-tooltip.tsx

@@ -8,11 +8,13 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
  */
 
-import { computed, defineComponent, h, Fragment, PropType } from "vue"
+import { computed, defineComponent, h, Fragment, PropType, watch } from "vue"
 import { TooltipProvider } from "./tooltip.context"
 import { useTooltip, UseTooltipProps } from "./use-tooltip"
 import type * as PP from "@zag-js/popper"
 import { filterUndefined } from "@chakra-ui/utils"
+import { useId } from "@chakra-ui/vue-composables"
+import { useMotions } from "@vueuse/motion"
 
 type UseTooltipPropsContext = UseTooltipProps["context"]
 
@@ -24,9 +26,11 @@ const VueTooltipProps = {
   },
   openDelay: {
     type: Number as PropType<CTooltipProps["openDelay"]>,
+    default: 0,
   },
   closeDelay: {
     type: Number as PropType<CTooltipProps["closeDelay"]>,
+    default: 0,
   },
   closeOnPointerDown: {
     type: Boolean as PropType<CTooltipProps["closeOnPointerDown"]>,
@@ -62,8 +66,16 @@ export const CTooltip = defineComponent({
       emit,
     }))
 
+    const transitionId = useId(undefined, "transition:toolip")
+
     const api = useTooltip(tooltipProps.value)
-    TooltipProvider(api)
+
+    const tooltipApi = computed(() => ({
+      ...api.value,
+      transitionId: transitionId.value,
+    }))
+
+    TooltipProvider(tooltipApi)
     return () => slots?.default?.()
   },
 })

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

@@ -1,10 +1,14 @@
 import type { connect } from "@zag-js/tooltip"
 import type { ComputedRef } from "vue"
-import { createContext } from "@chakra-ui/vue-utils"
+import { AnyFn, createContext } from "@chakra-ui/vue-utils"
 import type { UseTooltipReturn } from "./use-tooltip"
 
+export interface CTooltipContext extends ReturnType<typeof connect> {
+  transitionId: string
+}
+
 export const [TooltipProvider, useTooltipContext] = createContext<
-  ComputedRef<ReturnType<typeof connect>>
+  ComputedRef<CTooltipContext>
 >({
   name: "CTooltipContext",
   strict: true,

packages/c-tooltip/src/tooltip.transition.ts

@@ -0,0 +1,23 @@
+// import { TransitionDefaults } from "@chakra-ui/c-motion"
+import { MotionVariants } from "@vueuse/motion"
+
+export const TooltipVariants: MotionVariants = {
+  initial: { scale: 0.95, opacity: 0 },
+  enter: {
+    scale: 1,
+    // transition: TransitionDefaults.enter,
+    transition: {
+      opacity: { easings: "easeOut", duration: 200 },
+      scale: { duration: 200, ease: [0.175, 0.885, 0.4, 1.1] },
+    },
+    opacity: 1,
+  },
+  leave: {
+    scale: 0.85,
+    opacity: 0,
+    transition: {
+      opacity: { duration: 150, easings: "easeInOut" },
+      scale: { duration: 200, easings: "easeInOut" },
+    },
+  },
+}

packages/c-tooltip/src/use-tooltip.ts

@@ -24,9 +24,9 @@ export const useTooltip = (props: UseTooltipProps) => {
       onClose() {
         emit("close")
       },
+      closeDelay: 300,
     })
   )
-
   return computed(() => connect(state.value, send, normalizeProps))
 }