From abe14c87495b5530c830376d077e7a171a0fa591 Mon Sep 17 00:00:00 2001
From: mayakoneval <mayakoneval@gmail.com>
Date: Thu, 4 Nov 2021 15:45:56 -0400
Subject: [PATCH] Pass through `className` on `option` element as child of
 select (#381)

* pass classnames passed to the option element in a select's child array of options

* pass through child classname for each option

* don't pass classnames to popper
---
 src/Select/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index 9b5d8310..9a4fa1a9 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -80,6 +80,7 @@ interface ListItemWrapperProps
   /** Passthrough downshift function to get the props for an item */
   getItemProps: UseSelectPropGetters<OptionProps>["getItemProps"];
   selected: boolean;
+  className?: string;
 }
 
 /**
@@ -92,6 +93,7 @@ const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
   renderListItem,
   selected,
   selectionIndicator,
+  className,
 }) => {
   const index = downshiftItems.indexOf(element.props);
 
@@ -109,10 +111,10 @@ const ListItemWrapper: React.FC<ListItemWrapperProps> = ({
 
   return (
     <ClassNames>
-      {({ css }) => {
+      {({ css, cx }) => {
         return renderListItem(
           {
-            className: css({ alignItems: "baseline" }),
+            className: cx(css({ alignItems: "baseline" }), className),
             key: element.props.value || element.props.children,
             ...downshiftItemProps,
             highlighted: downshiftItemProps["aria-selected"] === "true",
@@ -490,6 +492,7 @@ export const Select: React.FC<Props> = ({
                   if (isHTMLOptionElement(child)) {
                     return (
                       <ListItemWrapper
+                        className={child.props.className}
                         data-top-level-index={topLevelIndex}
                         downshiftItems={items}
                         element={child}