From 15d786e19e7011cf964e8244e4b54c18d1b1ca9d Mon Sep 17 00:00:00 2001
From: Ayonix <github@leva.xyz>
Date: Fri, 18 Feb 2022 22:40:05 +0100
Subject: [PATCH] Add backgroundColor prop for options

---
 docs/components/props.js | 8 ++++++++
 docs/props.mdx           | 7 +++----
 src/index.tsx            | 4 +++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/docs/components/props.js b/docs/components/props.js
index 62ccca5..34f328b 100644
--- a/docs/components/props.js
+++ b/docs/components/props.js
@@ -51,6 +51,14 @@ const Props = () => {
             <td>#68D391</td>
             <td>Changes the highlighted colour of the selected option</td>
           </tr>
+          <tr>
+            <td>
+              <a href='/docs-props/#example-2'>backgroundColor</a>
+            </td>
+            <td>String</td>
+            <td>#F0F0F0</td>
+            <td>Changes the background colour of the options in the list</td>
+          </tr>
           <tr>
             <td>
               <a href='/docs-props/#example-2'>className</a>
diff --git a/docs/props.mdx b/docs/props.mdx
index c8f838c..b1ed34c 100644
--- a/docs/props.mdx
+++ b/docs/props.mdx
@@ -89,6 +89,7 @@ const App = () => {
         style={{ margin: '10px' }}
         hightlighColor='#C6F6D5'
         selectedOptionColor='#68D391'
+        backgroundColor='#F0F0F0'
       />
     </div>
   )
@@ -259,12 +260,10 @@ const App = () => {
     <div>
       <ComboBox
         options={options}
-        renderRightElement={()=> <AiFillCaretDown /> }
-        renderLeftElement={()=> <AiFillFilter /> }
-
+        renderRightElement={() => <AiFillCaretDown />}
+        renderLeftElement={() => <AiFillFilter />}
       />
     </div>
   )
 }
 ```
-
diff --git a/src/index.tsx b/src/index.tsx
index 6692777..d658fbf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,6 +28,7 @@ type ComboBoxProps = {
   popoverClassName?: string
   highlightColor?: string
   selectedOptionColor?: string
+  backgroundColor?: string
   enableAutocomplete?: boolean
   inputStyles?: React.CSSProperties
   name?: string
@@ -59,6 +60,7 @@ const ComboBox: React.FC<ComboBoxProps> = ({
   popoverClassName,
   highlightColor,
   selectedOptionColor,
+  backgroundColor,
   enableAutocomplete,
   inputStyles,
   name,
@@ -283,7 +285,7 @@ const ComboBox: React.FC<ComboBoxProps> = ({
       return highlightColor || '#bee3f8'
     } else if (optionIndex === selectedOptionIndex) {
       return selectedOptionColor || '#63b3ed'
-    } else return 'white'
+    } else return backgroundColor || 'white'
   }
 
   return (