[BUG] - Listbox dynamic item give unknown type to item if Listbox is extended using extendVariants in Typescript

[ameytessact]

NextUI Version

2.3.0

Describe the bug

A listbox component that is extended does not infer the types correctly.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

I have a simple Listbox that uses dynamic items as follows:

export const MentionsListBox = ({
  items,
}: {
  items: Array<Item>;
}) => {
  return (
    <Listbox items={items || []}>
      {(item) => (
        <ListboxItem>
          {item.label}
        </ListboxItem>
      )}
    </Listbox>
  );
};

I am getting an typescript error for the type of item.

Type '(item: Item) => JSX.Element' is not assignable to type 'CollectionChildren<unknown> | undefined'.
  Type '(item: Item) => JSX.Element' is not assignable to type '(item: unknown) => CollectionElement<unknown>'.
    Types of parameters 'item' and 'item' are incompatible.
      Type 'unknown' is not assignable to type 'Item'. ts(2322)

Here is how I've extended my Listbox component:

import {
  Listbox as NextListBox,
  ListboxItem as NextListboxItem,
  ListboxSection as NextListboxSection
} from '@nextui-org/listbox';
import { extendVariants } from '@nextui-org/react';

export const Listbox = extendVariants(NextListBox, {
  defaultVariants: {
    variant: 'default'
  },
  variants: {
    variant: {
      default: {
        base: 'p-2 bg-ds-menu-bg border-ds-menu-border border rounded-xl',
        list: 'space-y-1'
      }
    }
  }
});

export const ListboxItem = extendVariants(NextListboxItem, {
  defaultVariants: {
    variant: 'default'
  },
  variants: {
    variant: {
      default: {
        base: 'bg-transparent data-[hover=true]:bg-ds-menu-bg-hover',
        description: 'text-ds-menu-text-secondary'
      }
    }
  }
});
export const ListboxSection = extendVariants(NextListboxSection, {});

Expected behavior

This error gets fixed automatically if I use the next ui component directly as such:

import { Listbox, ListboxItem } from '@nextui-org/react';

item also get the correct type inferred instad of unknown

I expect the extended component to infer the type correctly as well.

Screenshots or Videos

No response

Operating System Version

Ubuntu 24.04

Browser

Chrome

[linear[bot]]

ENG-857 [BUG] - Listbox dynamic item give unknown type to item if Listbox is exteded using extendVariants in Typescript

[winchesHe]

@ameytessact Hi, you could fix the type error by following code

export const Listbox = extendVariants(NextListBox, {
  defaultVariants: {
    variant: "default",
  },
  variants: {
    variant: {
      default: {
        base: "p-2 bg-ds-menu-bg border-ds-menu-border border rounded-xl",
        list: "space-y-1",
      },
    },
  },
}) as typeof NextListBox;

export const ListboxItem = extendVariants(NextListboxItem, {
  defaultVariants: {
    variant: "default",
  },
  variants: {
    variant: {
      default: {
        base: "bg-transparent data-[hover=true]:bg-ds-menu-bg-hover",
        description: "text-ds-menu-text-secondary",
      },
    },
  },
}) as typeof NextListboxItem;

Cause the ListBox compoent you extending is needed to infer the Items type by T generics