Move popover

src/popover/Popover.jsx

@@ -0,0 +1,36 @@
+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";
+import { useObjectRef } from "@react-aria/utils";
+
+export const Popover = forwardRef(
+  ({ isOpen = true, onClose, className, children, ...rest }, ref) => {
+    const popoverRef = useObjectRef(ref);
+
+    const { overlayProps } = useOverlay(
+      {
+        isOpen,
+        onClose,
+        shouldCloseOnBlur: true,
+        isDismissable: true,
+      },
+      popoverRef
+    );
+
+    return (
+      <FocusScope restoreFocus>
+        <div
+          {...overlayProps}
+          {...rest}
+          className={classNames(styles.popover, className)}
+          ref={popoverRef}
+        >
+          {children}
+          <DismissButton onDismiss={onClose} />
+        </div>
+      </FocusScope>
+    );
+  }
+);

src/popover/Popover.module.css

@@ -0,0 +1,8 @@
+.popover {
+  display: flex;
+  flex-direction: column;
+  width: 194px;
+  background: var(--bgColor2);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+}

src/popover/PopoverMenu.jsx

@@ -0,0 +1,72 @@
+import React, { useRef } from "react";
+import styles from "./PopoverMenu.module.css";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useMenuTrigger } from "@react-aria/menu";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
+import classNames from "classnames";
+import { Popover } from "./Popover";
+
+export function PopoverMenuTrigger({
+  children,
+  placement,
+  className,
+  disableOnState,
+  ...rest
+}) {
+  const popoverMenuState = useMenuTriggerState(rest);
+  const buttonRef = useRef();
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    {},
+    popoverMenuState,
+    buttonRef
+  );
+
+  const popoverRef = useRef();
+
+  const { overlayProps } = useOverlayPosition({
+    targetRef: buttonRef,
+    overlayRef: popoverRef,
+    placement: placement || "top",
+    offset: 5,
+    isOpen: popoverMenuState.isOpen,
+  });
+
+  if (
+    !Array.isArray(children) ||
+    children.length > 2 ||
+    typeof children[1] !== "function"
+  ) {
+    throw new Error(
+      "PopoverMenu must have two props. The first being a button and the second being a render prop."
+    );
+  }
+
+  const [popoverTrigger, popoverMenu] = children;
+
+  return (
+    <div className={classNames(styles.popoverMenuTrigger, className)}>
+      <popoverTrigger.type
+        {...popoverTrigger.props}
+        {...menuTriggerProps}
+        on={!disableOnState && popoverMenuState.isOpen}
+        ref={buttonRef}
+      />
+      {popoverMenuState.isOpen && (
+        <OverlayContainer>
+          <Popover
+            {...overlayProps}
+            isOpen={popoverMenuState.isOpen}
+            onClose={popoverMenuState.close}
+            ref={popoverRef}
+          >
+            {popoverMenu({
+              ...menuProps,
+              autoFocus: popoverMenuState.focusStrategy,
+              onClose: popoverMenuState.close,
+            })}
+          </Popover>
+        </OverlayContainer>
+      )}
+    </div>
+  );
+}

src/popover/PopoverMenu.module.css

@@ -0,0 +1,4 @@
+.popoverMenuTrigger {
+  position: relative;
+  display: inline-block;
+}