From fe7b9794051aea8af9e5c310f74a881e694dfb1e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 2 Sep 2022 13:38:29 +0800
Subject: [PATCH] fix: allow passing of className to Listbox Option component

---
 src/components/Listbox/Listbox2.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Listbox/Listbox2.tsx b/src/components/Listbox/Listbox2.tsx
index d020580e..5366c606 100644
--- a/src/components/Listbox/Listbox2.tsx
+++ b/src/components/Listbox/Listbox2.tsx
@@ -275,6 +275,7 @@ interface OptionProps {
   label: string
   disabled?: boolean
   children?: React.ReactNode
+  className?: string
   addOnBefore?: ({ active, selected }: any) => React.ReactNode
 }
 
@@ -289,6 +290,7 @@ function SelectOption({
   label,
   disabled = false,
   children,
+  className = '',
   addOnBefore,
 }: OptionProps) {
   const __styles = styleHandler('listbox')
@@ -301,11 +303,11 @@ function SelectOption({
         return (
           <DropdownMenuPrimitive.Item
             key={id}
-            className={classNames(
+            className={`${classNames(
               __styles.option,
               active ? __styles.option_active : ' ',
               disabled ? __styles.option_disabled : ' '
-            )}
+            )} ${className}`}
             onSelect={() => (!disabled ? onChange(value) : {})}
           >
             <div className={__styles.option_inner}>