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 (
-
-
-
- {children}
-
-
-
-
+
+
+ {children}
+
+
+
);
}
);
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 && (
-
- {popoverMenu({
- ...menuProps,
- autoFocus: popoverMenuState.focusStrategy,
- onClose: popoverMenuState.close,
- })}
-
+
+
+ {popoverMenu({
+ ...menuProps,
+ autoFocus: popoverMenuState.focusStrategy,
+ onClose: popoverMenuState.close,
+ })}
+
+
)}
);
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 (
@@ -52,15 +41,12 @@ export function SelectInput(props) {
{state.isOpen && (
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 {