fix: popover initial transition state

Author: codebender828

packages/c-popover/examples/simple-popover.vue

@@ -13,9 +13,13 @@ import { CButton } from "../../c-button/src"
 </script>
 
 <template>
-  <c-popover>
+  <c-popover
+    :positioning="{
+      placement: 'bottom-start',
+    }"
+  >
     <c-popover-trigger>
-      <c-button> Click me </c-button>
+      <c-button> Trigger </c-button>
     </c-popover-trigger>
     <c-popover-content>
       <c-popover-arrow />

packages/c-popover/examples/with-portal.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Teleport } from "vue"
+import {
+  CPopover,
+  CPopoverTrigger,
+  CPopoverContent,
+  CPopoverArrow,
+  CPopoverHeader,
+  CPopoverBody,
+  CPopoverFooter,
+  CPopoverCloseButton,
+} from "../src"
+import { CButton } from "../../c-button/src"
+</script>
+
+<template>
+  <c-popover
+    :positioning="{
+      placement: 'bottom-start',
+    }"
+  >
+    <c-popover-trigger>
+      <c-button> Portal Popover </c-button>
+    </c-popover-trigger>
+    <Teleport to="body">
+      <c-popover-content>
+        <c-popover-arrow />
+        <c-popover-header>Look! I'm portalled</c-popover-header>
+        <c-popover-body>
+          Inspect me in the DOM and you'll see that I'm portalled to the end of
+          the body
+        </c-popover-body>
+        <c-popover-footer>
+          <c-button size="sm">Okay</c-button>
+        </c-popover-footer>
+        <c-popover-close-button />
+      </c-popover-content>
+    </Teleport>
+  </c-popover>
+</template>

packages/c-popover/package.json

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

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

@@ -0,0 +1,35 @@
+import { computed, defineComponent } from "vue"
+import { usePopoverContext, useStyles } from "./popover.context"
+import { CCloseButton, type CloseButtonProps } from "@chakra-ui/c-close-button"
+import { match } from "@chakra-ui/vue-utils"
+
+export interface CPopoverCloseButtonProps extends CloseButtonProps {}
+export const CPopoverCloseButton = defineComponent({
+  name: "CPopoverCloseButton",
+  setup(_, { attrs }) {
+    const api = usePopoverContext()
+    const styles = useStyles()
+
+    const popoverTriggerProps = computed(() => {
+      const { onClick, ...rest } = api.value.triggerProps
+      return {
+        ...rest,
+        async onClick(e: MouseEvent) {
+          requestAnimationFrame(() => {
+            api.value.leaveTransition(() => onClick(e))
+          })
+        },
+      }
+    })
+
+    return () => (
+      <CCloseButton
+        size="sm"
+        __label="popover__close-button"
+        __css={styles.value.closeButton}
+        {...popoverTriggerProps.value}
+        {...attrs}
+      />
+    )
+  },
+})

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

@@ -6,30 +6,15 @@ import {
   chakra,
 } from "@chakra-ui/vue-system"
 import { CPopoverPositioner } from "./c-popover-positioner"
-import { TransitionDefaults } from "@chakra-ui/c-motion"
 import { MotionDirective, useMotions } from "@vueuse/motion"
 import { withDirectives } from "vue"
 import { match } from "@chakra-ui/vue-utils"
+import { PopoverVariants } from "./popover.transitions"
 
-const variants = {
-  backdrop: {
-    initial: {
-      opacity: 0,
-      scale: 1.1,
-    },
-    animate: { opacity: 0.5, scale: 1 },
-    exit: { opacity: 0, scale: 1.1 },
-  },
-  content: {
-    initial: {
-      opacity: 0,
-      scale: 1.005,
-      y: 10,
-    },
-    animate: { opacity: 1, scale: 1, y: 0 },
-    exit: { opacity: 0, scale: 1.005, y: 10 },
-  },
-}
+const toVar = (value: string, fallback?: string) => ({
+  var: value,
+  varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`,
+})
 
 export interface CPopoverContentProps extends HTMLChakraProps<"div"> {}
 export const CPopoverContent = defineComponent({
@@ -44,6 +29,10 @@ export const CPopoverContent = defineComponent({
       display: "flex",
       flexDirection: "column",
       ...styles.value.content,
+      transformOrigin: toVar(
+        "--transform-origin",
+        api.value.positionerProps.style.transformOrigin
+      ).varRef,
     }))
 
     const popoverContentProps = computed(() => {
@@ -82,24 +71,7 @@ export const CPopoverContent = defineComponent({
           >
             {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,
-            ],
-          ]
+          [[MotionDirective(PopoverVariants), api.value.transitionId]]
         )}
       </CPopoverPositioner>
     )

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

@@ -35,7 +35,7 @@ export const CPopoverTrigger = defineComponent({
               })
             },
             async onPointerleave(e: MouseEvent) {
-              requestAnimationFrame(() => {
+              requestAnimationFrame(async () => {
                 api.value.leaveTransition(() => api.value.close())
               })
             },

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

@@ -10,11 +10,8 @@
 
 import { computed, defineComponent, mergeProps, PropType } from "vue"
 import { PopoverProvider, PopoverStylesProvider } from "./popover.context"
-import {
-  useDeferredDisclosure,
-  usePopover,
-  UsePopoverProps,
-} from "./use-popover"
+import { usePopover, UsePopoverProps } from "./use-popover"
+import { wait } from "./popover.utils"
 import type * as ZP from "@zag-js/popper"
 import type * as ZT from "@zag-js/types"
 import { useId } from "@chakra-ui/vue-composables"
@@ -70,10 +67,6 @@ const VuePopoverProps = {
   },
 }
 
-function wait(delay: number) {
-  return new Promise((resolve) => setTimeout(resolve, delay))
-}
-
 export const CPopover = defineComponent({
   name: "CPopover",
   props: VuePopoverProps,
@@ -110,26 +103,24 @@ export const CPopover = defineComponent({
 
     const enterTransition = (done: VoidFunction) => {
       const motions = useMotions()
-      console.log("motions", motions)
       const instance = motions[transitionId.value]
       requestAnimationFrame(async () => {
+        instance.set("initial")
         await instance.apply("enter")
         done()
       })
     }
 
     const api = usePopover(popoverProps.value)
-    const nativeIsOpen = computed(() => api.value.isOpen)
 
-    const { isOpenDeferred } = useDeferredDisclosure(nativeIsOpen)
     const popoverApi = computed(() => ({
       ...api.value,
-      deferredIsOpen: isOpenDeferred.value,
       leaveTransition,
       enterTransition,
       wait,
       transitionId: transitionId.value,
       trigger: props.trigger,
+      close: () => leaveTransition(() => api.value.close()),
     }))
 
     PopoverProvider(popoverApi)

packages/c-popover/src/index.tsx

@@ -16,6 +16,10 @@ export { CPopoverHeader, type CPopoverHeaderProps } from "./c-popover-header"
 export { CPopoverFooter, type CPopoverFooterProps } from "./c-popover-footer"
 export { CPopoverBody, type CPopoverBodyProps } from "./c-popover-body"
 export { CPopoverAnchor, type CPopoverAnchorProps } from "./c-popover-anchor"
+export {
+  CPopoverCloseButton,
+  type CPopoverCloseButtonProps,
+} from "./c-popover-close-button"
 export { usePopover } from "./use-popover"
 
 export type { CPopoverProps } from "./c-popover"

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

@@ -2,12 +2,12 @@ import type { connect } from "@zag-js/popover"
 import type { ComputedRef } from "vue"
 import { AnyFn, createContext } from "@chakra-ui/vue-utils"
 import { createStylesContext } from "@chakra-ui/vue-system"
+import type * as S from "@chakra-ui/styled-system"
 import type { UsePopoverReturn } from "./use-popover"
 
 export const [PopoverProvider, usePopoverContext] = createContext<
   ComputedRef<
     ReturnType<typeof connect> & {
-      deferredIsOpen: boolean
       leaveTransition: AnyFn
       enterTransition: AnyFn
       wait: AnyFn

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

@@ -0,0 +1,16 @@
+import { TransitionDefaults } from "@chakra-ui/c-motion"
+import { MotionVariants } from "@vueuse/motion"
+
+export const PopoverVariants: MotionVariants = {
+  initial: { scale: 0.95, opacity: 0 },
+  enter: {
+    scale: 1,
+    transition: TransitionDefaults.enter,
+    opacity: 1,
+  },
+  leave: {
+    scale: 0.95,
+    transition: TransitionDefaults.leave,
+    opacity: 0,
+  },
+}