fix(vue): presence of componets with Positioner (#2799)

* fix(vue): dialog presence

* fix(vue): tooltip presence

* fix(vue): color-picker presence

* fix(vue): date-picker presence

* fix(vue): combobox presence

* fix(vue): hover-card presence

* fix(vue): menu presence

* fix(vue): popover presence

* fix(vue): select presence

* fix(vue): time-picker presence

* fix(vue): presence fix mistakes

* fix(vue): dialog and tooltip tests waiting

packages/vue/src/components/color-picker/color-picker-content.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { mergeProps } from '@zag-js/vue'
+import { type HTMLAttributes, computed } from 'vue'
 import type { PolymorphicProps } from '../factory'
-import type { PresenceProps } from '../presence'
+import { type PresenceProps, usePresenceContext } from '../presence'
 
 export interface ColorPickerContentBaseProps extends PresenceProps, PolymorphicProps {}
 export interface ColorPickerContentProps
@@ -18,10 +19,12 @@ import { useColorPickerContext } from './use-color-picker-context'
 
 defineProps<ColorPickerContentProps>()
 const colorPicker = useColorPickerContext()
+const presence = usePresenceContext()
+const mergedProps = computed(() => mergeProps(colorPicker.value.getContentProps(), presence.value.presenceProps))
 </script>
 
 <template>
-  <ark.div v-bind="colorPicker.getContentProps()">
+  <ark.div v-if="!presence.unmounted" v-bind="mergedProps" :as-child="asChild">
     <slot />
   </ark.div>
 </template>

packages/vue/src/components/color-picker/color-picker-positioner.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
-import type { PolymorphicProps } from '../factory'
+import { type HTMLAttributes, computed } from 'vue'
+import { type PolymorphicProps, ark } from '../factory'
 
 export interface ColorPickerPositionerBaseProps extends PolymorphicProps {}
 export interface ColorPickerPositionerProps
@@ -13,21 +13,24 @@ export interface ColorPickerPositionerProps
 
 <script setup lang="ts">
 import { useRenderStrategyProps } from '../../utils'
-import { Presence } from '../presence'
+import { PresenceProvider, usePresence } from '../presence'
 import { useColorPickerContext } from './use-color-picker-context'
 
 defineProps<ColorPickerPositionerProps>()
 const colorPicker = useColorPickerContext()
 const renderStrategy = useRenderStrategyProps()
+
+const presence = usePresence(
+  computed(() => ({
+    ...renderStrategy.value,
+    present: colorPicker.value.open,
+  })),
+)
+PresenceProvider(presence)
 </script>
 
 <template>
-  <Presence
-    v-bind="colorPicker.getPositionerProps()"
-    :present="colorPicker.open"
-    :lazy-mount="renderStrategy.lazyMount"
-    :unmount-on-exit="renderStrategy.unmountOnExit"
-  >
+  <ark.div v-if="!presence.unmounted" v-bind="colorPicker.getPositionerProps()" :as-child="asChild">
     <slot />
-  </Presence>
+  </ark.div>
 </template>

packages/vue/src/components/combobox/combobox-content.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { mergeProps } from '@zag-js/vue'
+import { type HTMLAttributes, computed } from 'vue'
 import type { PolymorphicProps } from '../factory'
+import { usePresenceContext } from '../presence'
 
 export interface ComboboxContentBaseProps extends PolymorphicProps {}
 export interface ComboboxContentProps
@@ -17,10 +19,13 @@ import { useComboboxContext } from './use-combobox-context'
 
 defineProps<ComboboxContentProps>()
 const combobox = useComboboxContext()
+const presence = usePresenceContext()
+const mergedProps = computed(() => mergeProps(combobox.value.getContentProps(), presence.value.presenceProps))
 </script>
 
 <template>
-  <ark.div v-bind="combobox.getContentProps()" :as-child="asChild">
+  <ark.div v-if="!presence.unmounted" v-bind="mergedProps" :as-child="asChild">
     <slot />
   </ark.div>
 </template>
+

packages/vue/src/components/combobox/combobox-positioner.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
-import type { PolymorphicProps } from '../factory'
+import { type HTMLAttributes, computed } from 'vue'
+import { type PolymorphicProps, ark } from '../factory'
 
 export interface ComboboxPositionerBaseProps extends PolymorphicProps {}
 export interface ComboboxPositionerProps
@@ -13,21 +13,24 @@ export interface ComboboxPositionerProps
 
 <script setup lang="ts">
 import { useRenderStrategyProps } from '../../utils'
-import { Presence } from '../presence'
+import { PresenceProvider, usePresence } from '../presence'
 import { useComboboxContext } from './use-combobox-context'
 
 defineProps<ComboboxPositionerProps>()
 const combobox = useComboboxContext()
 const renderStrategy = useRenderStrategyProps()
+
+const presence = usePresence(
+  computed(() => ({
+    ...renderStrategy.value,
+    present: combobox.value.open,
+  })),
+)
+PresenceProvider(presence)
 </script>
 
 <template>
-  <Presence
-    v-bind="combobox.getPositionerProps()"
-    :present="combobox.open"
-    :lazy-mount="renderStrategy.lazyMount"
-    :unmount-on-exit="renderStrategy.unmountOnExit"
-  >
+  <ark.div v-if="!presence.unmounted" v-bind="combobox.getPositionerProps()" :as-child="asChild">
     <slot />
-  </Presence>
+  </ark.div>
 </template>

packages/vue/src/components/date-picker/date-picker-content.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { mergeProps } from '@zag-js/vue'
+import { type HTMLAttributes, computed } from 'vue'
 import type { PolymorphicProps } from '../factory'
+import { usePresenceContext } from '../presence'
 
 export interface DatePickerContentBaseProps extends PolymorphicProps {}
 export interface DatePickerContentProps
@@ -17,10 +19,12 @@ import { useDatePickerContext } from './use-date-picker-context'
 
 defineProps<DatePickerContentProps>()
 const datePicker = useDatePickerContext()
+const presence = usePresenceContext()
+const mergedProps = computed(() => mergeProps(datePicker.value.getContentProps(), presence.value.presenceProps))
 </script>
 
 <template>
-  <ark.div v-bind="datePicker.getContentProps()" :as-child="asChild">
+  <ark.div v-if="!presence.unmounted" v-bind="mergedProps" :as-child="asChild">
     <slot />
   </ark.div>
 </template>

packages/vue/src/components/date-picker/date-picker-positioner.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
-import type { PolymorphicProps } from '../factory'
+import { type HTMLAttributes, computed } from 'vue'
+import { type PolymorphicProps, ark } from '../factory'
 
 export interface DatePickerPositionerBaseProps extends PolymorphicProps {}
 export interface DatePickerPositionerProps
@@ -13,21 +13,24 @@ export interface DatePickerPositionerProps
 
 <script setup lang="ts">
 import { useRenderStrategyProps } from '../../utils'
-import { Presence } from '../presence'
+import { PresenceProvider, usePresence } from '../presence'
 import { useDatePickerContext } from './use-date-picker-context'
 
 defineProps<DatePickerPositionerProps>()
 const datePicker = useDatePickerContext()
 const renderStrategy = useRenderStrategyProps()
+
+const presence = usePresence(
+  computed(() => ({
+    ...renderStrategy.value,
+    present: datePicker.value.open,
+  })),
+)
+PresenceProvider(presence)
 </script>
 
 <template>
-  <Presence
-    v-bind="datePicker.getPositionerProps()"
-    :present="datePicker.open"
-    :lazy-mount="renderStrategy.lazyMount"
-    :unmount-on-exit="renderStrategy.unmountOnExit"
-  >
+  <ark.div v-if="!presence.unmounted" v-bind="datePicker.getPositionerProps()" :as-child="asChild">
     <slot />
-  </Presence>
-</template>
+  </ark.div>
+</template>

packages/vue/src/components/dialog/dialog-content.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { mergeProps } from '@zag-js/vue'
+import { type HTMLAttributes, computed } from 'vue'
 import type { PolymorphicProps } from '../factory'
+import { usePresenceContext } from '../presence'
 
 export interface DialogContentBaseProps extends PolymorphicProps {}
 export interface DialogContentProps
@@ -16,11 +18,14 @@ import { ark } from '../factory'
 import { useDialogContext } from './use-dialog-context'
 
 defineProps<DialogContentProps>()
+
 const dialog = useDialogContext()
+const presence = usePresenceContext()
+const mergedProps = computed(() => mergeProps(dialog.value.getContentProps(), presence.value.presenceProps))
 </script>
 
 <template>
-  <ark.div v-bind="dialog.getContentProps()" :as-child="asChild">
+  <ark.div v-if="!presence.unmounted" v-bind="mergedProps" :as-child="asChild">
     <slot />
   </ark.div>
 </template>

packages/vue/src/components/dialog/dialog-positioner.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { useRenderStrategyProps } from '../../utils'
 import type { PolymorphicProps } from '../factory'
 
 export interface DialogPositionerBaseProps extends PolymorphicProps {}
@@ -12,22 +13,26 @@ export interface DialogPositionerProps
 </script>
 
 <script setup lang="ts">
-import { useRenderStrategyProps } from '../../utils'
-import { Presence } from '../presence'
+import { ark } from '../factory'
+import { PresenceProvider, usePresence } from '../presence'
 import { useDialogContext } from './use-dialog-context'
 
 defineProps<DialogPositionerProps>()
+
 const dialog = useDialogContext()
 const renderStrategy = useRenderStrategyProps()
+
+const presence = usePresence(
+  computed(() => ({
+    ...renderStrategy.value,
+    present: dialog.value.open,
+  })),
+)
+PresenceProvider(presence)
 </script>
 
 <template>
-  <Presence
-    v-bind="dialog.getPositionerProps()"
-    :present="dialog.open"
-    :lazy-mount="renderStrategy.lazyMount"
-    :unmount-on-exit="renderStrategy.unmountOnExit"
-  >
+  <ark.div v-if="!presence.unmounted" v-bind="dialog.getPositionerProps()" :as-child="asChild">
     <slot />
-  </Presence>
+  </ark.div>
 </template>

packages/vue/src/components/dialog/tests/dialog.test.ts

@@ -19,10 +19,11 @@ describe('Dialog', () => {
     render(ComponentUnderTest)
 
     await user.click(screen.getByText('Open Dialog'))
-    expect(await screen.findByText('Dialog Title')).toBeVisible()
+
+    await waitFor(async () => expect(await screen.findByText('Dialog Title')).toBeVisible())
 
     await user.click(screen.getByText('Close'))
-    expect(await screen.findByText('Dialog Title')).not.toBeVisible()
+    await waitFor(async () => expect(await screen.findByText('Dialog Title')).not.toBeVisible())
   })
 
   it('should invoke onOpenChange if dialog is closed', async () => {

packages/vue/src/components/hover-card/hover-card-content.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { mergeProps } from '@zag-js/vue'
+import { type HTMLAttributes, computed } from 'vue'
 import type { PolymorphicProps } from '../factory'
+import { usePresenceContext } from '../presence'
 
 export interface HoverCardContentBaseProps extends PolymorphicProps {}
 export interface HoverCardContentProps
@@ -17,10 +19,12 @@ import { useHoverCardContext } from './use-hover-card-context'
 
 defineProps<HoverCardContentProps>()
 const hoverCard = useHoverCardContext()
+const presence = usePresenceContext()
+const mergedProps = computed(() => mergeProps(hoverCard.value.getContentProps(), presence.value.presenceProps))
 </script>
 
 <template>
-  <ark.div v-bind="hoverCard.getContentProps()" :as-child="asChild">
+  <ark.div v-if="!presence.unmounted" v-bind="mergedProps" :as-child="asChild">
     <slot />
   </ark.div>
-</template>
+</template>

packages/vue/src/components/hover-card/hover-card-positioner.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
-import type { PolymorphicProps } from '../factory'
+import { type HTMLAttributes, computed } from 'vue'
+import { type PolymorphicProps, ark } from '../factory'
 
 export interface HoverCardPositionerBaseProps extends PolymorphicProps {}
 export interface HoverCardPositionerProps
@@ -13,21 +13,25 @@ export interface HoverCardPositionerProps
 
 <script setup lang="ts">
 import { useRenderStrategyProps } from '../../utils'
-import { Presence } from '../presence'
+import { PresenceProvider, usePresence } from '../presence'
 import { useHoverCardContext } from './use-hover-card-context'
 
 defineProps<HoverCardPositionerProps>()
 const hoverCard = useHoverCardContext()
 const renderStrategy = useRenderStrategyProps()
+
+const presence = usePresence(
+  computed(() => ({
+    ...renderStrategy.value,
+    present: hoverCard.value.open,
+  })),
+)
+PresenceProvider(presence)
 </script>
 
 <template>
-  <Presence
-    v-bind="hoverCard.getPositionerProps()"
-    :present="hoverCard.open"
-    :lazy-mount="renderStrategy.lazyMount"
-    :unmount-on-exit="renderStrategy.unmountOnExit"
-  >
+  <ark.div v-if="!presence.unmounted" v-bind="hoverCard.getPositionerProps()" :as-child="asChild">
     <slot />
-  </Presence>
+  </ark.div>
 </template>
+

packages/vue/src/components/menu/menu-content.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { mergeProps } from '@zag-js/vue'
+import { type HTMLAttributes, computed } from 'vue'
 import type { PolymorphicProps } from '../factory'
+import { usePresenceContext } from '../presence'
 
 export interface MenuContentBaseProps extends PolymorphicProps {}
 export interface MenuContentProps
@@ -17,10 +19,12 @@ import { useMenuContext } from './use-menu-context'
 
 defineProps<MenuContentProps>()
 const menu = useMenuContext()
+const presence = usePresenceContext()
+const mergedProps = computed(() => mergeProps(menu.value.getContentProps(), presence.value.presenceProps))
 </script>
 
 <template>
-  <ark.div v-bind="menu.getContentProps()" :as-child="asChild">
+  <ark.div v-if="!presence.unmounted" v-bind="mergedProps" :as-child="asChild">
     <slot />
   </ark.div>
-</template>
+</template>