fix: slot prevents out transition for non-modal dropdown and select components

packages/radix-vue/src/Primitive/Slot.ts

@@ -1,63 +1,47 @@
-import { type VNode, cloneVNode, defineComponent, mergeProps } from 'vue'
+import { Comment, cloneVNode, defineComponent, mergeProps } from 'vue'
 import { renderSlotFragments } from '@/shared'
 
-function groupChildren(children: VNode[]) {
-  let firstChildren: VNode | undefined
-  const commentChildrenBeforeFirst: VNode[] = []
-  const otherChildren: VNode[] = []
-
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    if (!firstChildren) {
-      if (child.type === Symbol.for('v-cmt')) { // check if the vnode is comment type (https://github.com/vuejs/core/blob/caeb8a68811a1b0f799632582289fcf169fb673c/packages/runtime-core/src/vnode.ts#L66)
-        commentChildrenBeforeFirst.push(child)
-        continue
-      }
-      firstChildren = child
-    }
-    else {
-      otherChildren.push(child)
-    }
-  }
-  return { firstChildren, otherChildren, commentChildrenBeforeFirst }
-}
-
 export const Slot = defineComponent({
   name: 'PrimitiveSlot',
   inheritAttrs: false,
   setup(_, { attrs, slots }) {
     return () => {
       if (!slots.default)
         return null
-      const children = renderSlotFragments(slots.default())
-      const { firstChildren, otherChildren, commentChildrenBeforeFirst } = groupChildren(children)
-
-      if (firstChildren) {
-        // remove props ref from being inferred
-        delete firstChildren.props?.ref
-        const mergedProps = mergeProps(attrs, firstChildren.props ?? {})
-        // remove class to prevent duplicated
-        if (attrs.class && firstChildren.props?.class)
-          delete firstChildren.props.class
-
-        const cloned = cloneVNode(firstChildren, mergedProps)
-        // Explicitly override props starting with `on`.
-        // It seems cloneVNode from Vue doesn't like overriding `onXXX` props. So
-        // we have to do it manually.
-        for (const prop in mergedProps) {
-          if (prop.startsWith('on')) {
-            cloned.props ||= {}
-            cloned.props[prop] = mergedProps[prop]
-          }
-        }
-
-        if (commentChildrenBeforeFirst.length)
-          return [...commentChildrenBeforeFirst, cloned, ...otherChildren]
 
-        return [cloned, ...otherChildren]
+      const childrens = renderSlotFragments(slots.default())
+      const firstNonCommentChildrenIndex = childrens.findIndex(child => child.type !== Comment)
+      if (firstNonCommentChildrenIndex === -1)
+        return childrens
+
+      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex]
+
+      // remove props ref from being inferred
+      delete firstNonCommentChildren.props?.ref
+
+      const mergedProps = firstNonCommentChildren.props
+        ? mergeProps(attrs, firstNonCommentChildren.props)
+        : attrs
+      // remove class to prevent duplicated
+      if (attrs.class && firstNonCommentChildren.props?.class)
+        delete firstNonCommentChildren.props.class
+      const cloned = cloneVNode(firstNonCommentChildren, mergedProps)
+
+      // Explicitly override props starting with `on`.
+      // It seems cloneVNode from Vue doesn't like overriding `onXXX` props.
+      // So we have to do it manually.
+      for (const prop in mergedProps) {
+        if (prop.startsWith('on')) {
+          cloned.props ||= {}
+          cloned.props[prop] = mergedProps[prop]
+        }
       }
 
-      return children
+      if (childrens.length === 1)
+        return cloned
+
+      childrens[firstNonCommentChildrenIndex] = cloned
+      return childrens
     }
   },
 })