useCombobox not exposed with Park-UI

[renchris]

Most Ark Components use Component.Context to expose their state and functionality.

However, the Combobox Ark component uses a useCombobox hook that isn't made available with the Park-UI component as you can see with

import { Combobox, createListCollection, useCombobox } from '@ark-ui/react/combobox'
...
const combobox = useCombobox({ collection: collection, onInputValueChange: handleInputChange })
...
<button onClick={() => combobox.focus()}>Focus</button>

From the full Ark component documentation example

Using the Root Provider
The RootProvider component provides a context for the combobox. It accepts the value of the useCombobox hook. You can leverage it to access the component state and methods from outside the combobox.

React
Solid
Vue
import { Combobox, createListCollection, useCombobox } from '@ark-ui/react/combobox'
import { Portal } from '@ark-ui/react/portal'
import { useMemo, useState } from 'react'

const initialItems = ['React', 'Solid', 'Vue']

export const RootProvider = () => {
  const [items, setItems] = useState(initialItems)

  const collection = useMemo(() => createListCollection({ items }), [items])

  const handleInputChange = (details: Combobox.InputValueChangeDetails) => {
    setItems(
      initialItems.filter((item) => item.toLowerCase().includes(details.inputValue.toLowerCase())),
    )
  }

  const combobox = useCombobox({ collection: collection, onInputValueChange: handleInputChange })

  return (
    <>
      <button onClick={() => combobox.focus()}>Focus</button>

      <Combobox.RootProvider value={combobox}>
        <Combobox.Label>Framework</Combobox.Label>
        <Combobox.Control>
          <Combobox.Input />
          <Combobox.Trigger>Open</Combobox.Trigger>
          <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
        </Combobox.Control>
        <Portal>
          <Combobox.Positioner>
            <Combobox.Content>
              <Combobox.ItemGroup>
                <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
                {collection.items.map((item) => (
                  <Combobox.Item key={item} item={item}>
                    <Combobox.ItemText>{item}</Combobox.ItemText>
                    <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                  </Combobox.Item>
                ))}
              </Combobox.ItemGroup>
            </Combobox.Content>
          </Combobox.Positioner>
        </Portal>
      </Combobox.RootProvider>
    </>
  )
}
If you're using the RootProvider component, you don't need to use the Root component.

I need the useCombobox available so that I can use Park-UI and not have to bypass to import directly from Ark so that I can for example focus the combobox on click

[FranciscoKloganB]

Park UI only provides styles for headless components exposed by Ark UI. You should be able to use the hook without issues.

The only thing you need to ensure is:

• Install the proper underlying ark-ui version
  • Code snippets in Park UI website are still using ark v3
  • The demo you linked in Ark UI is using ark v4
• In case there are breaking changes between the ark-ui version and the demo used in park-ui patch the difference.
  • The breaking changes from Ark Ui v3 to v4 are mostly items being renamed to collection expecting a collection interface (createListCollection), Date and Color Picker.

In short, Park UI provides styles for a given version, it's up to the consumer to ensure the recipes are compatible with the version they are using and/or upgrade to get new functionality.

Hope this helped in some way.