From 35c40fde0d4bfcf3ed1792cb35a8726a93728db0 Mon Sep 17 00:00:00 2001
From: Sid Jain <sid_26@outlook.com>
Date: Sat, 7 Sep 2024 04:19:21 +0530
Subject: [PATCH] Add extra classnames for list item states

---
 .../CountrySelector/CountrySelectorDropdown.tsx       | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/CountrySelector/CountrySelectorDropdown.tsx b/src/components/CountrySelector/CountrySelectorDropdown.tsx
index 39bf13f..7b67616 100644
--- a/src/components/CountrySelector/CountrySelectorDropdown.tsx
+++ b/src/components/CountrySelector/CountrySelectorDropdown.tsx
@@ -27,6 +27,9 @@ export interface CountrySelectorDropdownStyleProps {
 
   listItemStyle?: React.CSSProperties;
   listItemClassName?: string;
+  listItemPreferredClassName?: string;
+  listItemSelectedClassName?: string;
+  listItemFocusedClassName?: string;
 
   listItemFlagStyle?: React.CSSProperties;
   listItemFlagClassName?: string;
@@ -291,7 +294,13 @@ export const CountrySelectorDropdown: React.FC<
                     'country-selector-dropdown__list-item--selected',
                   isFocused && 'country-selector-dropdown__list-item--focused',
                 ],
-                rawClassNames: [styleProps.listItemClassName],
+                rawClassNames: [
+                  styleProps.listItemClassName,
+                  isPreferred &&
+                    styleProps.listItemPreferredClassName,
+                  isSelected &&
+                    styleProps.listItemSelectedClassName,
+                  isFocused && styleProps.listItemFocusedClassName,],
               })}
               onClick={() => handleCountrySelect(country)}
               style={styleProps.listItemStyle}