fix(component): update type definition to prevent primitive values as…

… items (#2953)

* fix: update type definition to prevent primitive values as items

* fix: typecheck

.changeset/great-singers-repeat.md

@@ -0,0 +1,11 @@
+---
+"@nextui-org/autocomplete": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+"@nextui-org/select": patch
+"@nextui-org/tabs": patch
+"@nextui-org/use-aria-multiselect": patch
+---
+
+Fix update type definition to prevent primitive values as items (#2938)

packages/components/autocomplete/src/autocomplete.tsx

@@ -58,10 +58,10 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
   );
 }
 
-export type AutocompleteProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
+export type AutocompleteProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
 
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Autocomplete) as <T = object>(
+export default forwardRef(Autocomplete) as <T extends object>(
   props: AutocompleteProps<T>,
 ) => ReactElement;
 

packages/components/dropdown/src/dropdown-menu.tsx

@@ -6,7 +6,7 @@ import {ForwardedRef, ReactElement, Ref} from "react";
 
 import {useDropdownContext} from "./dropdown-context";
 
-interface Props<T> extends Omit<MenuProps<T>, "menuProps"> {}
+interface Props<T extends object = object> extends Omit<MenuProps<T>, "menuProps"> {}
 
 function DropdownMenu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElement>) {
   const {getMenuProps} = useDropdownContext();
@@ -20,10 +20,10 @@ function DropdownMenu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLU
   );
 }
 
-export type DropdownMenuProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
+export type DropdownMenuProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
 
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(DropdownMenu) as <T = object>(
+export default forwardRef(DropdownMenu) as <T extends object>(
   props: DropdownMenuProps<T>,
 ) => ReactElement;
 

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

@@ -134,7 +134,7 @@ export function useDropdown(props: UseDropdownProps) {
     };
   };
 
-  const getMenuProps = <T>(
+  const getMenuProps = <T extends object>(
     props?: Partial<MenuProps<T>>,
     _ref: Ref<any> | null | undefined = null,
   ) => {

packages/components/listbox/src/listbox.tsx

@@ -76,7 +76,7 @@ function Listbox<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListE
 
 Listbox.displayName = "NextUI.Listbox";
 
-export type ListboxProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
+export type ListboxProps<T extends object = 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;
+export default forwardRef(Listbox) as <T extends object>(props: ListboxProps<T>) => ReactElement;

packages/components/menu/src/menu.tsx

@@ -71,9 +71,9 @@ function Menu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElem
   );
 }
 
-export type MenuProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
+export type MenuProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
 
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Menu) as <T = object>(props: MenuProps<T>) => ReactElement;
+export default forwardRef(Menu) as <T extends object>(props: MenuProps<T>) => ReactElement;
 
 Menu.displayName = "NextUI.Menu";

packages/components/select/src/select.tsx

@@ -144,9 +144,9 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   );
 }
 
-export type SelectProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
+export type SelectProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
 
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Select) as <T = object>(props: SelectProps<T>) => ReactElement;
+export default forwardRef(Select) as <T extends object>(props: SelectProps<T>) => ReactElement;
 
 Select.displayName = "NextUI.Select";

packages/components/tabs/src/tabs.tsx

@@ -71,9 +71,9 @@ function Tabs<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLDivElemen
   return renderTabs;
 }
 
-export type TabsProps<T = object> = Props<T> & {ref?: Ref<HTMLElement>};
+export type TabsProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
 
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Tabs) as <T = object>(props: TabsProps<T>) => ReactElement;
+export default forwardRef(Tabs) as <T extends object>(props: TabsProps<T>) => ReactElement;
 
 Tabs.displayName = "NextUI.Tabs";