@axa-fr/design-system-slash-react 1.0.6-alpha.1 → 1.0.6-alpha.12

package/dist/Popover/AnimatedPopover.d.ts

@@ -1,5 +1,5 @@
-import { Placement } from "@popperjs/core";
 import React from "react";
+import { Placement } from "@floating-ui/react";
 type PropsAnimatedPopover = {
     placement: Placement;
     children: React.ReactNode;

package/dist/Popover/AnimatedPopover.js

@@ -1,29 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { usePopper } from "react-popper";
+import React, { useRef } from "react";
+import { arrow, FloatingArrow, offset, useFloating, } from "@floating-ui/react";
 import { getComponentClassName } from "../utilities";
 const defaultClassName = "af-popover__container";
 export const AnimatedPopover = ({ placement, children, isOpen, target, className, classModifier, onMouseEnter, onMouseLeave, }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
     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 (_jsxs("div", { className: componentClassName, children: [_jsx("div", { ref: setReferenceElement, className: "af-popover__container-over", role: "presentation", children: target }), isOpen && (_jsxs("div", { ref: setPopperElement, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: styles.popper, "data-popper-placement": placement, className: "af-popover__container-pop", ...attributes.popper, children: [_jsx("div", { children: children }), _jsx("div", { ref: setArrowElement, style: styles.arrow, className: "af-popover__arrow" })] }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { ref: setReferenceElement, className: "af-popover__container-over", role: "presentation", children: target }), isOpen && (_jsxs("div", { ref: setPopperElement, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: floatingStyles, "data-popper-placement": placement, className: "af-popover__container-pop", children: [_jsx("div", { children: children }), _jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "white" })] }))] }));
 };

package/dist/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
-import { Placement } from "@popperjs/core";
 import React from "react";
+import { Placement } from "@floating-ui/react";
 import { PopoverModes } from "./Popover.types";
 type Props = {
     className?: string;

package/dist/Popover/Popover.types.d.ts

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

package/dist/Popover/PopoverBase.d.ts

@@ -1,5 +1,5 @@
-import { Placement } from "@popperjs/core";
 import React from "react";
+import { Placement } from "@floating-ui/react";
 import "@axa-fr/design-system-slash-css/dist/Popover/Popover.scss";
 type Props = {
     placement?: Placement;

package/dist/Popover/PopoverBase.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { AnimatedPopover } from "./AnimatedPopover";
 import "@axa-fr/design-system-slash-css/dist/Popover/Popover.scss";
 const defaultClassName = "af-popover__container";
-const PopoverBase = ({ children, isOpen, placement = "auto", className = defaultClassName, classModifier, element, onMouseEnter, onMouseLeave, }) => {
+const PopoverBase = ({ children, isOpen, placement = "right", className = defaultClassName, classModifier, element, onMouseEnter, onMouseLeave, }) => {
     return (_jsx(AnimatedPopover, { target: children, placement: placement, isOpen: isOpen, className: className, classModifier: classModifier, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: element }));
 };
 export { PopoverBase };

package/dist/Popover/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.0.6-alpha.1",
+  "version": "1.0.6-alpha.12",
   "description": "",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.0.6-alpha.1",
+    "@axa-fr/design-system-slash-css": "1.0.6-alpha.12",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -55,15 +55,14 @@
     }
   },
   "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.8.0"
+    "react-select": "^5.9.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^2.0.2",