Fix/1625 (#1628)

* fix(listbox): item classNames prop, listbox wrapper export

* chore(listbox): changesets

.changeset/angry-kings-remain.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/listbox": patch
+---
+
+Fix #1625 Listbox item classNames

apps/docs/content/components/listbox/description.ts

@@ -100,7 +100,7 @@ const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
   </svg>
 );`;
 
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

apps/docs/content/components/listbox/disabled-keys.ts

@@ -1,4 +1,4 @@
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

apps/docs/content/components/listbox/dynamic.ts

@@ -1,4 +1,4 @@
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

apps/docs/content/components/listbox/icons.ts

@@ -100,7 +100,7 @@ const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
   </svg>
 );`;
 
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

apps/docs/content/components/listbox/multiple-selection.ts

@@ -1,4 +1,4 @@
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

apps/docs/content/components/listbox/sections.ts

@@ -100,7 +100,7 @@ const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
   </svg>
 );`;
 
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

apps/docs/content/components/listbox/usage.ts

@@ -1,4 +1,4 @@
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

apps/docs/content/components/listbox/variants.ts

@@ -1,4 +1,4 @@
-const ListboxWrapper = `const ListboxWrapper = ({children}) => (
+const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
   <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
     {children}
   </div>

packages/components/listbox/src/listbox-item.tsx

@@ -12,8 +12,6 @@ export interface ListboxItemProps<T extends object = object> extends UseListboxI
 const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
   const {
     Component,
-    slots,
-    classNames,
     rendered,
     description,
     isSelectable,
@@ -25,6 +23,7 @@ const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
     disableAnimation,
     getItemProps,
     getLabelProps,
+    getWrapperProps,
     getDescriptionProps,
     getSelectedIconProps,
   } = useListboxItem(props);
@@ -47,7 +46,7 @@ const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
     <Component {...getItemProps()}>
       {startContent}
       {description ? (
-        <div className={slots.wrapper({class: classNames?.wrapper})}>
+        <div {...getWrapperProps()}>
           <span {...getLabelProps()}>{rendered}</span>
           <span {...getDescriptionProps()}>{description}</span>
         </div>

packages/components/listbox/src/listbox.tsx

@@ -1,6 +1,7 @@
 import type {ForwardedRef, ReactElement, Ref} from "react";
 
 import {forwardRef} from "@nextui-org/system";
+import {mergeProps} from "@react-aria/utils";
 
 import {UseListboxProps, useListbox} from "./use-listbox";
 import ListboxSection from "./listbox-section";
@@ -27,7 +28,13 @@ function Listbox<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListE
         if (item.type === "section") {
           return <ListboxSection key={item.key} {...itemProps} itemClasses={itemClasses} />;
         }
-        let listboxItem = <ListboxItem key={item.key} {...itemProps} classNames={itemClasses} />;
+        let listboxItem = (
+          <ListboxItem
+            key={item.key}
+            {...itemProps}
+            classNames={mergeProps(itemClasses, item.props?.classNames)}
+          />
+        );
 
         if (item.wrapper) {
           listboxItem = item.wrapper(listboxItem);

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

@@ -132,6 +132,11 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     className: slots.description({class: classNames?.description}),
   });
 
+  const getWrapperProps: PropGetter = (props = {}) => ({
+    ...mergeProps(props),
+    className: slots.wrapper({class: classNames?.wrapper}),
+  });
+
   const getSelectedIconProps = useCallback<PropGetter>(
     (props = {}) => {
       return {
@@ -160,6 +165,7 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     disableAnimation,
     getItemProps,
     getLabelProps,
+    getWrapperProps,
     getDescriptionProps,
     getSelectedIconProps,
   };