From 5ff689ce5840121a2121e6af87ce069356a82782 Mon Sep 17 00:00:00 2001
From: casperiv0 <53900565+casperiv0@users.noreply.github.com>
Date: Thu, 19 Oct 2023 08:04:48 +0200
Subject: [PATCH] fix(ui): popover positions

---
 .../fields/async-list-search-field.tsx        |  4 +--
 .../ui/src/components/fields/select-field.tsx |  2 +-
 .../overlays/async-list/popover.tsx           | 35 -------------------
 .../ui/src/components/overlays/popover.tsx    | 31 +++++-----------
 4 files changed, 12 insertions(+), 60 deletions(-)
 delete mode 100644 packages/ui/src/components/overlays/async-list/popover.tsx

diff --git a/packages/ui/src/components/fields/async-list-search-field.tsx b/packages/ui/src/components/fields/async-list-search-field.tsx
index cd812af93..521ec7ef0 100644
--- a/packages/ui/src/components/fields/async-list-search-field.tsx
+++ b/packages/ui/src/components/fields/async-list-search-field.tsx
@@ -6,7 +6,6 @@ import type { ComboBoxProps } from "@react-types/combobox";
 import { Label } from "../label";
 import { Input } from "../inputs/input";
 import { ErrorMessage } from "../error-message";
-import { Popover } from "../overlays/async-list/popover";
 import { AsyncListFieldListBox } from "../list/async-list/async-list-list-box";
 import { useAsyncList } from "@react-stately/data";
 import { USER_API_TOKEN_HEADER } from "@snailycad/config";
@@ -18,6 +17,7 @@ import { Loader } from "../loader";
 import { getAPIUrl } from "@snailycad/utils/api-url";
 import { AsyncListSearchFieldActions } from "./async-list-search-field/actions";
 import { cn } from "mxcn";
+import { Popover } from "..";
 
 interface AsyncListFieldFetchOptions {
   filterTextRequired?: boolean;
@@ -197,7 +197,7 @@ function AsyncListSearchField<T extends object>(props: AsyncListFieldProps<T>) {
 
         {state.isOpen ? (
           <Popover
-            menuClassName={props.menuClassName}
+            className={props.menuClassName}
             isOpen={state.isOpen}
             onClose={state.close}
             popoverRef={popoverRef}
diff --git a/packages/ui/src/components/fields/select-field.tsx b/packages/ui/src/components/fields/select-field.tsx
index bd6b94175..ba7a09bb5 100644
--- a/packages/ui/src/components/fields/select-field.tsx
+++ b/packages/ui/src/components/fields/select-field.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import type { AriaSelectProps } from "@react-types/select";
 import { Item } from "@react-stately/collections";
-import { ModalProvider } from "@react-aria/overlays";
 import { cn } from "mxcn";
 import { Popover } from "../overlays/popover";
 import { ListBox } from "../list/select/list-box";
@@ -14,6 +13,7 @@ import { SelectActions } from "../inputs/select/select-actions";
 import { ErrorMessage } from "../error-message";
 import { Label } from "../label";
 import { useButton } from "@react-aria/button";
+import { ModalProvider } from "@react-aria/overlays";
 
 export interface SelectValue {
   value: string;
diff --git a/packages/ui/src/components/overlays/async-list/popover.tsx b/packages/ui/src/components/overlays/async-list/popover.tsx
deleted file mode 100644
index f43c6d253..000000000
--- a/packages/ui/src/components/overlays/async-list/popover.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from "react";
-import { FocusScope } from "@react-aria/focus";
-import { useOverlay, DismissButton } from "@react-aria/overlays";
-import { cn } from "mxcn";
-
-interface Props {
-  children: React.ReactNode;
-  onClose(): void;
-  isOpen: boolean;
-  popoverRef?: React.MutableRefObject<HTMLDivElement | null>;
-  menuClassName?: string;
-}
-
-export function Popover(props: Props) {
-  const ref = React.useRef<HTMLDivElement>(null);
-  const { popoverRef = ref, isOpen, onClose, children, menuClassName } = props;
-
-  const { overlayProps } = useOverlay({ isOpen, onClose, isDismissable: true }, popoverRef);
-
-  return (
-    <FocusScope contain>
-      <div
-        {...overlayProps}
-        ref={popoverRef}
-        className={cn(
-          "w-full absolute z-50 top-full bg-gray-200 dark:bg-primary dark:border dark:border-secondary rounded-md shadow-lg mt-2 p-2",
-          menuClassName,
-        )}
-      >
-        {children}
-        <DismissButton onDismiss={onClose} />
-      </div>
-    </FocusScope>
-  );
-}
diff --git a/packages/ui/src/components/overlays/popover.tsx b/packages/ui/src/components/overlays/popover.tsx
index b68cda90a..264d0e39b 100644
--- a/packages/ui/src/components/overlays/popover.tsx
+++ b/packages/ui/src/components/overlays/popover.tsx
@@ -1,14 +1,14 @@
 import * as React from "react";
 import { FocusScope } from "@react-aria/focus";
-import { type AriaDialogProps, useDialog } from "@react-aria/dialog";
+import { type AriaDialogProps } from "@react-aria/dialog";
 import {
   OverlayContainer,
   useOverlayPosition,
   useOverlay,
-  useModal,
   DismissButton,
 } from "@react-aria/overlays";
 import { mergeProps } from "@react-aria/utils";
+import { cn } from "mxcn";
 
 interface Props extends AriaDialogProps {
   children: React.ReactNode;
@@ -27,26 +27,13 @@ export function Popover(props: Props) {
   const { popoverRef = ref, isOpen, onClose, children, isCalendar, ...otherProps } = props;
 
   const { overlayProps } = useOverlay({ isOpen, onClose, isDismissable: true }, popoverRef);
-  const { modalProps } = useModal();
-  const { dialogProps } = useDialog(otherProps, popoverRef);
-
-  const { overlayProps: positionProps, updatePosition } = useOverlayPosition({
+  const { overlayProps: positionProps } = useOverlayPosition({
     isOpen,
-    offset: 2,
-    containerPadding: 0,
     overlayRef: ref,
     targetRef: outerRef,
     placement: "bottom start",
   });
 
-  React.useLayoutEffect(() => {
-    if (isOpen) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isOpen, updatePosition]);
-
   const inputWidth = outerRef.current?.clientWidth ?? 0;
   const leftStyle = parseInt(positionProps.style?.left?.toString() || "0", 10);
   const width = isCalendar ? MENU_WIDTH : inputWidth;
@@ -63,13 +50,13 @@ export function Popover(props: Props) {
       <OverlayContainer>
         <FocusScope contain>
           <div
-            {...mergeProps(overlayProps, modalProps, dialogProps)}
+            {...mergeProps(overlayProps, otherProps)}
             ref={popoverRef}
-            className="w-full absolute top-full bg-gray-200 dark:bg-primary border border-gray-400 dark:border-secondary rounded-md shadow-lg mt-2 p-2 z-10"
-            style={{
-              zIndex: 999,
-              ...style,
-            }}
+            className={cn(
+              "w-full absolute bg-gray-200 dark:bg-primary border border-gray-400 dark:border-secondary rounded-md shadow-lg mt-2 p-2 z-10",
+              props.className,
+            )}
+            style={style}
           >
             {children}
             <DismissButton onDismiss={onClose} />