feat: remove conflicting wait

Author: codebender828

packages/c-popover/examples/with-controlled-usage.vue

@@ -13,20 +13,19 @@ import { CButton, CButtonGroup } from "../../c-button/src"
 import { useDisclosure } from "../../vue-composables/src/use-disclosure"
 import { CHStack } from "../../layout/src/stack"
 
-const { isOpen, open } = useDisclosure({
+const { isOpen, open, toggle } = useDisclosure({
   defaultIsOpen: false,
 })
 </script>
 
 <template>
   <c-h-stack>
-    <c-button @click="open"> Trigger </c-button>
+    <c-button @click="toggle"> Trigger </c-button>
     <c-popover
       :positioning="{
         placement: 'right-start',
       }"
       :is-open="isOpen"
-      @close="isOpen = false"
     >
       <c-popover-trigger>
         <c-button color-scheme="pink"> Popover Target </c-button>

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

@@ -8,7 +8,7 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
  */
 
-import { computed, defineComponent, mergeProps, PropType } from "vue"
+import { computed, defineComponent, mergeProps, PropType, watch } from "vue"
 import { PopoverProvider, PopoverStylesProvider } from "./popover.context"
 import { usePopover, UsePopoverProps } from "./use-popover"
 import { wait } from "./popover.utils"
@@ -105,12 +105,26 @@ export const CPopover = defineComponent({
       const motions = useMotions()
       const instance = motions[transitionId.value]
       requestAnimationFrame(async () => {
+        instance.stopTransitions()
         instance.set("initial")
         await instance.apply("enter")
         done()
       })
     }
 
+    if (typeof props.isOpen !== "undefined") {
+      watch(
+        () => props.isOpen,
+        (isOpen) => {
+          if (isOpen) {
+            enterTransition(() => {})
+          } else {
+            leaveTransition(() => {})
+          }
+        }
+      )
+    }
+
     const api = usePopover(popoverProps.value)
 
     const popoverApi = computed(() => ({

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

@@ -68,7 +68,6 @@ export function usePopover(props: UsePopoverProps) {
         api.value.open()
         return
       } else if (!isOpen && !state.value.matches("closed")) {
-        await wait(300)
         api.value.close()
         return
       }