[BUG] - Listbox typing issue when using dynamic collections

[Cowjiang]

NextUI Version

2.2.9

Describe the bug

When I try to use the Listbox & ListboxSection via dynamic collections, typing issue will be reported as below screenshot but rendering without any error.

TS2322: Type (item: ListboxItemBaseProps) => Element is not assignable to type (ItemElement<ListboxItemBaseProps> | ItemElement<ListboxItemBaseProps>[] | ItemRenderer<ListboxItemBaseProps>) & (ReactI18NextChildren | Iterable<...>) Type (item: ListboxItemBaseProps) => Element is not assignable to type ItemRenderer<ListboxItemBaseProps> & string Type (item: ListboxItemBaseProps) => Element is not assignable to type string

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

import { Listbox, ListboxItem, ListboxItemProps, ListboxSection, ListboxSectionProps } from '@nextui-org/react'
import { useState } from 'react'

const settingList: Partial<ListboxSectionProps<ListboxItemProps>>[] = [
  {
    key: 'application',
    title: 'Application',
    items: [
      {
        key: 'appearance',
        title: 'Appearance'
      }
    ]
  }
]

function Setting() {
  const [selectedKeys, setSelectedKeys] = useState(new Set(['text']))
  return (
    <Listbox
      selectionMode="single"
      selectedKeys={selectedKeys}
      onSelectionChange={setSelectedKeys}
      items={settingList}
    >
      {
        section => (
          <ListboxSection {...section}>
            {(item) => (
              <ListboxItem {...item} />
            )}
          </ListboxSection>
        )
      }
    </Listbox>
  )
}

export default Setting

Expected behavior

Nah, please take a look

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[Cowjiang]

and no issue if I don't use ListboxSection , like the example in document - Listbox -> ListboxItem the issue only produce on Listbox -> ListboxSection -> ListboxItem

[yahorbarkouski]

hey @Cowjiang, perhaps you have found a solution already?

[Cowjiang]

hey @Cowjiang, perhaps you have found a solution already?

Not yet, just add @ts-ignore : (

[ahmadbafrani]

I have the same issue when using ListboxSection with dynamic items.

<Listbox aria-label='Page selection' > <ListboxSection items={items}> {(item) => ( <ListboxItem key={item.key} > {item.title} </ListboxItem> )} </ListboxSection> </Listbox>

Type '(item: { key: string; title: string; }) => Element' is not assignable to type '(ItemElement<{ key: string; title: string; }> | ItemElement<{ key: string; title: string; }>[] | ItemRenderer<{ key: string; title: string; }>) & ReactNode'. Type '(item: { key: string; title: string; }) => Element' is not assignable to type 'ItemRenderer<{ key: string; title: string; }> & string'. Type '(item: { key: string; title: string; }) => Element' is not assignable to type 'string'.ts(2322)

As mentioned in ListboxSection document, children prop accepts ReactNode, so I changed the code to this and the error is gone: <Listbox aria-label='Page selection' > <ListboxSection> {items.map((item) => ( <ListboxItem key={item.key} > {item.title} </ListboxItem> ))} </ListboxSection> </Listbox>