From 05094c7f1648395af61bbf9d6e2f3df89002a334 Mon Sep 17 00:00:00 2001
From: David Menc <david.menc@icloud.com>
Date: Tue, 19 Nov 2024 10:14:44 +0100
Subject: [PATCH] Fix misplaced `Popover` when using Floating UI (#566)

---
 src/components/Popover/Popover.jsx | 23 +++++++++++++++++++++++
 src/components/Popover/README.md   |  8 +++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx
index d0d24768..17eb8bdc 100644
--- a/src/components/Popover/Popover.jsx
+++ b/src/components/Popover/Popover.jsx
@@ -13,6 +13,9 @@ export const Popover = React.forwardRef((props, ref) => {
     placement,
     children,
     portalId,
+    position,
+    x,
+    y,
     ...restProps
   } = props;
 
@@ -26,6 +29,11 @@ export const Popover = React.forwardRef((props, ref) => {
         getRootAlignmentClassName(placement, styles),
       )}
       ref={ref}
+      style={{
+        left: x,
+        position,
+        top: y,
+      }}
     >
       {children}
       <span className={styles.arrow} />
@@ -42,6 +50,9 @@ export const Popover = React.forwardRef((props, ref) => {
 Popover.defaultProps = {
   placement: 'bottom',
   portalId: null,
+  position: null,
+  x: null,
+  y: null,
 };
 
 Popover.propTypes = {
@@ -71,6 +82,18 @@ Popover.propTypes = {
    * If set, popover is rendered in the React Portal with that ID.
    */
   portalId: PropTypes.string,
+  /**
+   * This sets the CSS property `position` of the popover. This is reserved for use with Floating UI.
+   */
+  position: PropTypes.string,
+  /**
+   * This sets the CSS property `top` of the popover. This is reserved for use with Floating UI.
+   */
+  x: PropTypes.string,
+  /**
+   * This sets the CSS property `left` of the popover. This is reserved for use with Floating UI.
+   */
+  y: PropTypes.string,
 };
 
 export const PopoverWithGlobalProps = withGlobalProps(Popover, 'Popover');
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index dac06ce8..a2e2be4d 100644
--- a/src/components/Popover/README.md
+++ b/src/components/Popover/README.md
@@ -267,11 +267,9 @@ React.createElement(() => {
             <Popover
               id="my-advanced-popover"
               placement={finalPlacement}
-              style={{
-                position: strategy,
-                top: y ? y : '',
-                left: x ? x : '',
-              }}
+              position={strategy}
+              x={x}
+              y={y}
               ref={floating}
             >
               Auto-flipping Popover