refactor(slash): migrate from popperjs to floating-ui for Popover com…

…ponent

slash/css/src/Popover/Popover.scss

@@ -1,8 +1,6 @@
 @use "sass:color";
 @use "../common/common" as common;
 
-$arrow-size: 16px;
-$arrow-offset: -4px;
 $padding-popover: 0.5rem 1rem;
 
 .af-popover {
@@ -26,8 +24,10 @@ $padding-popover: 0.5rem 1rem;
       width: calc(260 / 16 * 1rem);
       padding: $padding-popover;
       border-radius: 3px;
-      color: common.$white;
-      background: common.$color-azur;
+      line-height: 1.125rem;
+      color: common.$color-azur;
+      background: common.$white;
+      box-shadow: 0 0 9px 0 rgba(0, 0, 0, 18%);
 
       .af-subtitle {
         font-size: 2em;
@@ -47,37 +47,5 @@ $padding-popover: 0.5rem 1rem;
         }
       }
     }
-
-    .af-popover__arrow {
-      position: absolute;
-      z-index: -1;
-      width: $arrow-size;
-      height: $arrow-size;
-
-      &::before {
-        position: absolute;
-        width: $arrow-size;
-        height: $arrow-size;
-        background: common.$color-azur;
-        transform: rotate(45deg);
-        content: "";
-      }
-    }
-
-    [data-popper-placement^="top"] > .af-popover__arrow {
-      bottom: $arrow-offset;
-    }
-
-    [data-popper-placement^="bottom"] > .af-popover__arrow {
-      top: $arrow-offset;
-    }
-
-    [data-popper-placement^="right"] > .af-popover__arrow {
-      left: $arrow-offset;
-    }
-
-    [data-popper-placement^="left"] > .af-popover__arrow {
-      right: $arrow-offset;
-    }
   }
 }

slash/react/package.json

@@ -55,14 +55,13 @@
     }
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.2",
     "@fontsource/source-sans-pro": "^5.0.8",
-    "@popperjs/core": "^2.11.8",
     "@tanem/svg-injector": "^10.1.68",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
     "rc-slider": "^11.1.7",
     "react-dropzone": "^11.5.3",
-    "react-popper": "^2.3.0",
     "react-select": "^5.9.0"
   },
   "devDependencies": {

slash/react/src/HelpButton/demo.scss

@@ -6,15 +6,7 @@
     &__container-pop {
       width: 300px;
       background: white;
-      box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.2);
       padding: 0;
-
-      &[data-popper-placement^="top"] > .af-popover__arrow::before,
-      &[data-popper-placement^="right"] > .af-popover__arrow::before,
-      &[data-popper-placement^="left"] > .af-popover__arrow::before {
-        background: white;
-        box-shadow: -2px 0 5px 0px rgba(0, 0, 0, 0.2);
-      }
     }
   }
 }

slash/react/src/Popover/AnimatedPopover.tsx

@@ -1,7 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Placement } from "@popperjs/core";
-import React from "react";
-import { usePopper } from "react-popper";
+import React, { useRef } from "react";
+import {
+  arrow,
+  FloatingArrow,
+  offset,
+  Placement,
+  useFloating,
+} from "@floating-ui/react";
 import { getComponentClassName } from "../utilities";
 
 const defaultClassName = "af-popover__container";
@@ -35,23 +40,12 @@ export const AnimatedPopover = ({
 
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
-  const [arrowElement, setArrowElement] = React.useState(null);
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    modifiers: [
-      {
-        name: "arrow",
-        options: {
-          element: arrowElement,
-        },
-      },
-      {
-        name: "offset",
-        options: {
-          offset: [0, 8],
-        },
-      },
-    ],
+  const arrowRef = useRef(null);
+
+  const { floatingStyles, context } = useFloating({
     placement,
+    elements: { reference: referenceElement, floating: popperElement },
+    middleware: [offset(12), arrow({ element: arrowRef })],
   });
 
   return (
@@ -69,17 +63,12 @@ export const AnimatedPopover = ({
           ref={setPopperElement as any}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
-          style={styles.popper}
+          style={floatingStyles}
           data-popper-placement={placement}
           className="af-popover__container-pop"
-          {...attributes.popper}
         >
           <div>{children}</div>
-          <div
-            ref={setArrowElement as any}
-            style={styles.arrow}
-            className="af-popover__arrow"
-          />
+          <FloatingArrow ref={arrowRef} context={context} fill="white" />
         </div>
       )}
     </div>

slash/react/src/Popover/Popover.mdx

@@ -45,8 +45,8 @@ const MyComponent = () => (
       <td>Placement of the popover</td>
       <td>top</td>
       <td>
-        List of options is available on the [Popperjs
-        docs](https://popper.js.org/docs/v2/constructors/#options)
+        List of options is available on the [FloatingUI
+        docs](https://floating-ui.com/docs/getting-started)
       </td>
     </tr>
     <tr>

slash/react/src/Popover/Popover.stories.tsx

@@ -44,9 +44,6 @@ export const Default: StoryObj<typeof Popover> = {
   argTypes: {
     placement: {
       options: [
-        "auto",
-        "auto-start",
-        "auto-end",
         "top",
         "top-start",
         "top-end",

slash/react/src/Popover/Popover.tsx

@@ -1,5 +1,5 @@
-import { Placement } from "@popperjs/core";
 import React from "react";
+import { Placement } from "@floating-ui/react";
 import { PopoverModes } from "./Popover.types";
 import { PopoverClick } from "./PopoverClick";
 import { PopoverOver } from "./PopoverOver";

slash/react/src/Popover/Popover.types.ts

@@ -1,4 +1,4 @@
-import { Placement } from "@popperjs/core";
+import { Placement } from "@floating-ui/react";
 
 export type PopoverModes = "hover" | "click";
 

slash/react/src/Popover/PopoverBase.tsx

@@ -1,5 +1,5 @@
-import { Placement } from "@popperjs/core";
 import React from "react";
+import { Placement } from "@floating-ui/react";
 import { AnimatedPopover } from "./AnimatedPopover";
 
 import "@axa-fr/design-system-slash-css/dist/Popover/Popover.scss";
@@ -20,7 +20,7 @@ type Props = {
 const PopoverBase = ({
   children,
   isOpen,
-  placement = "auto",
+  placement = "right",
   className = defaultClassName,
   classModifier,
   element,

slash/react/src/Popover/index.ts

@@ -1,4 +1,4 @@
 export { Popover } from "./Popover";
 
-export { type Placement } from "@popperjs/core";
+export { type Placement } from "@floating-ui/react";
 export { type PopoverModes } from "./Popover.types";