refactor(vue/select): update api handling (#831)

* refactor(vue/select): update api handling

* test(vue/select): add test for children in `SelectOption`

packages/vue/src/select/index.ts

@@ -1,5 +1,6 @@
 export { Select, type SelectProps } from './select'
 export { SelectContent, type SelectContentProps } from './select-content'
+export type { SelectContext } from './select-context'
 export { SelectLabel, type SelectLabelProps } from './select-label'
 export { SelectOption, type SelectOptionProps } from './select-option'
 export { SelectOptionGroup, type SelectOptionGroupProps } from './select-option-group'

packages/vue/src/select/select-context.ts

@@ -1,9 +1,9 @@
 import { type connect } from '@zag-js/select'
-import { type ComputedRef } from 'vue'
+import { type ComputedRef, type UnwrapRef } from 'vue'
 import { createContext } from '../context'
 import { type UseSelectReturn } from './use-select'
 
 export const [SelectProvider, useSelectContext] =
   createContext<ComputedRef<ReturnType<typeof connect>>>('SelectContext')
 
-export type SelectContext = UseSelectReturn
+export type SelectContext = UnwrapRef<UseSelectReturn>

packages/vue/src/select/select-option.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import type { ComponentWithProps } from '../utils'
 import { useSelectContext } from './select-context'
 
 type OptionProps = Parameters<ReturnType<typeof useSelectContext>['value']['getOptionProps']>[0]
@@ -36,14 +36,10 @@ export const SelectOption: ComponentWithProps<SelectOptionProps> = defineCompone
 
     const api = useSelectContext()
 
-    return () => {
-      const validChildren = getValidChildren(slots)
-
-      return (
-        <ark.li {...api.value.getOptionProps(selectOptionProps.value)} {...attrs}>
-          {() => (validChildren.length > 1 ? validChildren : selectOptionProps.value.label)}
-        </ark.li>
-      )
-    }
+    return () => (
+      <ark.li {...api.value.getOptionProps(selectOptionProps.value)} {...attrs}>
+        {() => (slots.default?.() ? slots.default() : selectOptionProps.value.label)}
+      </ark.li>
+    )
   },
 })

packages/vue/src/select/select.test.tsx

@@ -1,5 +1,14 @@
 import user from '@testing-library/user-event'
 import { render } from '@testing-library/vue'
+import { Teleport } from 'vue'
+import {
+  Select,
+  SelectContent,
+  SelectLabel,
+  SelectOption,
+  SelectPositioner,
+  SelectTrigger,
+} from '.'
 import SelectStory from './select.stories.vue'
 
 /**
@@ -32,4 +41,36 @@ describe('Select', () => {
     await wait(50)
     expect(queryByText('Select')).not.toBeInTheDocument()
   })
+
+  it('should allow content as children through SelectOption', async () => {
+    const onChange = vi.fn()
+
+    const { getByRole, getByText } = render(
+      <Select onChange={onChange}>
+        <SelectLabel>Framework:</SelectLabel>
+        <SelectTrigger>
+          <button>Select</button>
+        </SelectTrigger>
+
+        <Teleport to="body">
+          <SelectPositioner>
+            <SelectContent>
+              <SelectOption value="sad" label="Sad" />
+              <SelectOption value="disappointed" label="Disappointed" />
+              <SelectOption value="starstruck" label="Starstruck">
+                🤩
+              </SelectOption>
+            </SelectContent>
+          </SelectPositioner>
+        </Teleport>
+      </Select>,
+    )
+
+    expect(getByRole('option', { hidden: true, name: '🤩' })).not.toBeVisible()
+    await user.click(getByText('Select'))
+
+    await user.click(getByRole('option', { name: '🤩' }))
+
+    expect(onChange).toBeCalledWith({ value: 'starstruck', label: 'Starstruck' })
+  })
 })

packages/vue/src/select/select.tsx

@@ -62,10 +62,10 @@ export const Select: ComponentWithProps<SelectProps> = defineComponent({
   emits: ['change', 'highlight', 'open', 'close', 'update:modelValue'],
   props: VueSelectProps,
   setup(props, { slots, emit }) {
-    const { api } = useSelect(emit, props)
+    const api = useSelect(emit, props)
 
     SelectProvider(api)
 
-    return () => slots?.default?.()
+    return () => slots?.default?.({ ...api.value })
   },
 })

packages/vue/src/select/use-select.ts

@@ -33,7 +33,7 @@ export const useSelect = (emit: CallableFunction, context: UseSelectContext) =>
 
   const api = computed(() => connect(state.value, send, normalizeProps))
 
-  return { api }
+  return api
 }
 
 export type UseSelectReturn = ReturnType<typeof useSelect>