fix(listbox): dynamic items types (#1544)

.changeset/seven-rockets-melt.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/listbox": patch
+---
+
+Fix #1503 Listbox dynamic items types fixed

packages/components/listbox/__tests__/listbox.test.tsx

@@ -107,9 +107,9 @@ describe("Listbox", () => {
 
     const wrapper = render(
       <Listbox aria-label="Actions" items={listboxItems}>
-        {(section: any) => (
+        {(section) => (
           <ListboxSection aria-label={section.title} items={section.children} title={section.title}>
-            {(item: any) => <ListboxItem key={item.key}>{item.name}</ListboxItem>}
+            {(item) => <ListboxItem key={item.key}>{item.name}</ListboxItem>}
           </ListboxSection>
         )}
       </Listbox>,

packages/components/listbox/src/listbox.tsx

@@ -1,14 +1,16 @@
+import type {ForwardedRef, ReactElement, Ref} from "react";
+
 import {forwardRef} from "@nextui-org/system";
 
 import {UseListboxProps, useListbox} from "./use-listbox";
 import ListboxSection from "./listbox-section";
 import ListboxItem from "./listbox-item";
 
-export interface ListboxProps extends UseListboxProps {}
+interface Props<T> extends UseListboxProps<T> {}
 
-const Listbox = forwardRef<"ul", ListboxProps>((props, ref) => {
+function Listbox<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElement>) {
   const {Component, state, getBaseProps, color, disableAnimation, variant, itemClasses} =
-    useListbox({...props, ref});
+    useListbox<T>({...props, ref});
 
   return (
     <Component {...getBaseProps()}>
@@ -35,8 +37,13 @@ const Listbox = forwardRef<"ul", ListboxProps>((props, ref) => {
       })}
     </Component>
   );
-});
+}
 
 Listbox.displayName = "NextUI.Listbox";
 
-export default Listbox;
+export type ListboxProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
+
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+export default forwardRef(Listbox) as <T = object>(props: ListboxProps<T>) => ReactElement;
+
+Listbox.displayName = "NextUI.Listbox";

packages/components/listbox/src/use-listbox.ts

@@ -1,4 +1,6 @@
-import {AriaListBoxOptions, useListBox as useAriaListbox} from "@react-aria/listbox";
+import type {KeyboardDelegate} from "@react-types/shared";
+
+import {AriaListBoxProps, useListBox as useAriaListbox} from "@react-aria/listbox";
 import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 import {listbox, ListboxVariantProps} from "@nextui-org/theme";
 import {ListState, useListState} from "@react-stately/list";
@@ -7,6 +9,24 @@ import {useMemo} from "react";
 
 import {ListboxItemProps} from "./listbox-item";
 
+interface AriaListBoxOptions<T> extends AriaListBoxProps<T> {
+  /** Whether the listbox uses virtual scrolling. */
+  isVirtualized?: boolean;
+  /**
+   * An optional keyboard delegate implementation for type to select,
+   * to override the default.
+   */
+  keyboardDelegate?: KeyboardDelegate;
+  /**
+   * Whether the listbox items should use virtual focus instead of being focused directly.
+   */
+  shouldUseVirtualFocus?: boolean;
+  /** Whether selection should occur on press up instead of press down. */
+  shouldSelectOnPressUp?: boolean;
+  /** Whether options should be focused when the user hovers over them. */
+  shouldFocusOnHover?: boolean;
+}
+
 interface Props<T> extends Omit<HTMLNextUIProps<"ul">, "children"> {
   /**
    * Ref to the DOM node.
@@ -37,7 +57,7 @@ interface Props<T> extends Omit<HTMLNextUIProps<"ul">, "children"> {
 
 export type UseListboxProps<T = object> = Props<T> & AriaListBoxOptions<T> & ListboxVariantProps;
 
-export function useListbox(props: UseListboxProps) {
+export function useListbox<T extends object>(props: UseListboxProps<T>) {
   const {
     ref,
     as,

packages/components/listbox/stories/listbox.stories.tsx

@@ -201,7 +201,6 @@ const MultipleSelectionTemplate = ({color, variant, ...args}: ListboxProps) => {
     <Listbox
       disallowEmptySelection
       aria-label="Actions"
-      closeOnSelect={false}
       color={color}
       selectedKeys={selected}
       selectionMode="multiple"