[BUG] - Custom Select component's items TS issue

[jegork]

NextUI Version

0.0.0-canary-20240520130845

Describe the bug

When having a Custom Select component:

import { extendVariants, Select } from "@nextui-org/react";

const secondaryColor = {
  label: [
    "text-secondary-400",
    "group-data-[filled-within=true]:text-secondary-600",
  ],
  value: ["text-secondary-300"],
  trigger: [
    "bg-secondary",
    "data-[hover=true]:bg-secondary-800",
    "group-data-[focus=true]:bg-secondary-800",
  ],
};

export const CustomSelect = extendVariants(Select, {
  variants: {
    color: {
      secondary: secondaryColor,
      "secondary-light": {
        ...secondaryColor,
        trigger: [
          "bg-secondary-800",
          "data-[hover=true]:bg-secondary-800",
          "group-data-[focus=true]:bg-secondary-800",
        ],
        value: ["text-secondary-300"],
      },
    },
  },
  // compoundVariants: [],
});

And using the component with items field, the items are not typed correctly.

<CustomSelect
  color="secondary-light"
  label="Role"
  disallowEmptySelection
  items={data} // VS Code shows that items here is Iterable<object>
>
  {(item) => ( // item here is typed as object
    <SelectItem key={item.id} value={item.id}>
      {item.name}
    </SelectItem>
  )}
</CustomSelect>

Because item param in children is typed as object, it is not possible to access fields of item.

However, everything works with normal Select (not custom one)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Code above should be enough to reproduce

Expected behavior

I guess the types for Custom Select component should use generics for items and children. Currently, via VS Code I see children?: CollectionChildren<object> | undefined

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-899 [BUG] - Custom Select component's items TS issue

[Frank-vdm]

I second this, i'm supplying a type to my select/ autocomplete as below and im still getting type errors

 <Autocomplete<{label: string, value: string}>
      variant={variant}
      radius={radius}
      labelPlacement={labelPlacement}
      defaultItems={defaultItems}
      items={items}
      {...props}
    >
      {(d) => (
        <AutocompleteItem<Option> key={d.value}>{d.label}</AutocompleteItem>
      )}
    </Autocomplete>

to fix it i need to do the following

 <Autocomplete<{label: string, value: string}>
      variant={variant}
      radius={radius}
      labelPlacement={labelPlacement as {label:string, value: string}}
      defaultItems={defaultItems as {label:string, value: string}}
      items={items}
      {...props}
    >
      {(d) => (
        <AutocompleteItem<Option> key={d.value}>{d.label}</AutocompleteItem>
      )}
    </Autocomplete>