From 3cc789219880a6b5e2bc417461564bffe74f9884 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Tue, 14 Dec 2021 15:28:54 -0800
Subject: [PATCH] Fix select input styles

---
 src/ListBox.module.css     |  5 ++++-
 src/Modal.module.css       |  2 ++
 src/Popover.jsx            | 37 +++++++++++++++++--------------------
 src/PopoverMenu.jsx        | 28 +++++++++++++++-------------
 src/SelectInput.jsx        | 14 --------------
 src/SelectInput.module.css | 14 ++++++--------
 src/Tabs.module.css        |  1 +
 7 files changed, 45 insertions(+), 56 deletions(-)

diff --git a/src/ListBox.module.css b/src/ListBox.module.css
index 060ef09..0af4d8a 100644
--- a/src/ListBox.module.css
+++ b/src/ListBox.module.css
@@ -5,6 +5,9 @@
   overflow-y: auto;
   list-style: none;
   background-color: transparent;
+  border: 1px solid var(--inputBorderColor);
+  background-color: var(--bgColor1);
+  border-radius: 8px;
 }
 
 .option {
@@ -25,7 +28,7 @@
 }
 
 .option.focused {
-  background-color: var(--bgColor3);
+  background-color: rgba(111, 120, 130, 0.2);
 }
 
 .option.disabled {
diff --git a/src/Modal.module.css b/src/Modal.module.css
index f83db90..53c4314 100644
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -17,6 +17,8 @@
   border-radius: 8px;
   max-width: 90vw;
   width: 600px;
+  display: flex;
+  flex-direction: column;
 }
 
 .modalHeader {
diff --git a/src/Popover.jsx b/src/Popover.jsx
index 314d134..7729fc0 100644
--- a/src/Popover.jsx
+++ b/src/Popover.jsx
@@ -1,15 +1,14 @@
-import React, { forwardRef } from "react";
-import {
-  DismissButton,
-  useOverlay,
-  OverlayContainer,
-} from "@react-aria/overlays";
+import React, { forwardRef, useRef } from "react";
+import { DismissButton, useOverlay } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
 import classNames from "classnames";
 import styles from "./Popover.module.css";
 
 export const Popover = forwardRef(
   ({ isOpen = true, onClose, className, children, ...rest }, ref) => {
+    const fallbackRef = useRef();
+    const popoverRef = ref || fallbackRef;
+
     const { overlayProps } = useOverlay(
       {
         isOpen,
@@ -17,23 +16,21 @@ export const Popover = forwardRef(
         shouldCloseOnBlur: true,
         isDismissable: true,
       },
-      ref
+      popoverRef
     );
 
     return (
-      <OverlayContainer>
-        <FocusScope restoreFocus>
-          <div
-            {...overlayProps}
-            {...rest}
-            className={classNames(styles.popover, className)}
-            ref={ref}
-          >
-            {children}
-            <DismissButton onDismiss={onClose} />
-          </div>
-        </FocusScope>
-      </OverlayContainer>
+      <FocusScope restoreFocus>
+        <div
+          {...overlayProps}
+          {...rest}
+          className={classNames(styles.popover, className)}
+          ref={popoverRef}
+        >
+          {children}
+          <DismissButton onDismiss={onClose} />
+        </div>
+      </FocusScope>
     );
   }
 );
diff --git a/src/PopoverMenu.jsx b/src/PopoverMenu.jsx
index d355731..1436b99 100644
--- a/src/PopoverMenu.jsx
+++ b/src/PopoverMenu.jsx
@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import styles from "./PopoverMenu.module.css";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useMenuTrigger } from "@react-aria/menu";
-import { useOverlayPosition } from "@react-aria/overlays";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import classNames from "classnames";
 import { Popover } from "./Popover";
 
@@ -52,18 +52,20 @@ export function PopoverMenuTrigger({
         ref={buttonRef}
       />
       {popoverMenuState.isOpen && (
-        <Popover
-          {...overlayProps}
-          isOpen={popoverMenuState.isOpen}
-          onClose={popoverMenuState.close}
-          ref={popoverRef}
-        >
-          {popoverMenu({
-            ...menuProps,
-            autoFocus: popoverMenuState.focusStrategy,
-            onClose: popoverMenuState.close,
-          })}
-        </Popover>
+        <OverlayContainer>
+          <Popover
+            {...overlayProps}
+            isOpen={popoverMenuState.isOpen}
+            onClose={popoverMenuState.close}
+            ref={popoverRef}
+          >
+            {popoverMenu({
+              ...menuProps,
+              autoFocus: popoverMenuState.focusStrategy,
+              onClose: popoverMenuState.close,
+            })}
+          </Popover>
+        </OverlayContainer>
       )}
     </div>
   );
diff --git a/src/SelectInput.jsx b/src/SelectInput.jsx
index defef0f..1e54ec1 100644
--- a/src/SelectInput.jsx
+++ b/src/SelectInput.jsx
@@ -4,7 +4,6 @@ import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";
 import { Popover } from "./Popover";
 import { ListBox } from "./ListBox";
-import { useOverlayPosition } from "@react-aria/overlays";
 import styles from "./SelectInput.module.css";
 import classNames from "classnames";
 import { ReactComponent as ArrowDownIcon } from "./icons/ArrowDown.svg";
@@ -21,16 +20,6 @@ export function SelectInput(props) {
 
   const { buttonProps } = useButton(triggerProps, ref);
 
-  const popoverRef = useRef();
-
-  const { overlayProps } = useOverlayPosition({
-    targetRef: ref,
-    overlayRef: popoverRef,
-    placement: "bottom left",
-    offset: 5,
-    isOpen: state.isOpen,
-  });
-
   return (
     <div className={classNames(styles.selectInput, props.className)}>
       <h4 {...labelProps} className={styles.label}>
@@ -52,15 +41,12 @@ export function SelectInput(props) {
       </button>
       {state.isOpen && (
         <Popover
-          ref={popoverRef}
           isOpen={state.isOpen}
           onClose={state.close}
           className={styles.popover}
-          {...overlayProps}
         >
           <ListBox
             {...menuProps}
-            className
             state={state}
             optionClassName={styles.option}
           />
diff --git a/src/SelectInput.module.css b/src/SelectInput.module.css
index 8bdb56e..723ab43 100644
--- a/src/SelectInput.module.css
+++ b/src/SelectInput.module.css
@@ -2,6 +2,7 @@
   position: relative;
   display: inline-block;
   margin-bottom: 28px;
+  max-width: 444px;
 }
 
 .label {
@@ -23,6 +24,7 @@
   color: var(--textColor1);
   height: 40px;
   max-width: 100%;
+  width: 100%;
 }
 
 .selectedItem {
@@ -33,12 +35,8 @@
 }
 
 .popover {
-}
-
-.option:first-child {
-  border-radius: 8px 8px 0 0;
-}
-
-.option:last-child {
-  border-radius: 0 0 8px 8px;
+  position: absolute;
+  margin-top: 5px;
+  width: 100%;
+  z-index: 1;
 }
diff --git a/src/Tabs.module.css b/src/Tabs.module.css
index 69ec67d..39cec01 100644
--- a/src/Tabs.module.css
+++ b/src/Tabs.module.css
@@ -1,6 +1,7 @@
 .tabContainer {
   width: 100%;
   display: flex;
+  flex: 1;
 }
 
 .tabList {