Select's API?

[gtonussi]

Hello, I'm sorry if this is too obvious, but starting on version 0.15, I've noticed that Select component had a major update and works kinda different.

Now, the root component doesnt accept a function as children that would receive API parameters as it did on previous versions.

So, how can I access that API and get informations like "isOpen" or "selectedItem"?

I see that for selectedItem there is the ItemIndicator component, but I'm afraid it is not the same. For example, I want the selected option to have a different background color from unselected and hovered, and I was doing it with the API.

[codepath2019]

Hi @gtonussi,

I am also recently starting on version 0.15, for react. From my understanding, you can do the following to obtain the state of the component.

<Select.Content>
  {map(
    ({ label, value }) => (
      <Select.Item key={value} item={{ label, value }}>
        {({ isSelected }) => {
          return null // replace with your desired JSX
        }}
      </Select.Item>
    ),
    items
  )}
</Select.Content>

The important part is that you can pass a child component to Select.Item and that child will have access to the item's state.

Looking at the type definition of Select.Item. You'll see that it specifies that the children of Select.Item can be passed props with the shape of ItemState.

declare const Select: SelectComponent & {
  Item: ForwardRefExoticComponent<
    Omit<HTMLArkProps<'div'>, 'children'> & {
      children?: ReactNode | ((props: ItemState) => ReactNode)
    } & ItemProps &
      RefAttributes<HTMLDivElement>
  >
  // other properties on Select ... etc
}

type ItemState = {
    value: string;
    isDisabled: boolean;
    isSelected: boolean;
    isHighlighted: boolean;
};

Hopefully this helps

[renchris]

Is it possible to use the component in a use server component and environment when exposing and using the itemState prop?

I get the error

Unhandled Runtime Error
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... value="item" children={function}>

When I have

<Accordion.Item value="item">
  {(state) => (
    <div>
      Text or Inner Components
    </div>
  )}
</Accordion.Item>