fix(ui): popover positions

SnailyCAD · Oct 19, 2023 · 5ff689c · 5ff689c
1 parent a7bc1c9
commit 5ff689c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 60 deletions.
diff --git 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
@@ -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
diff --git 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} />