@axa-fr/design-system-slash-react 1.0.6-alpha.7 → 1.1.0-RC.1

package/dist/Form/Date/Date.js

@@ -3,9 +3,10 @@ import "@axa-fr/design-system-slash-css/dist/Form/Date/Date.scss";
 import { forwardRef, useMemo } from "react";
 import { getComponentClassName } from "../../utilities";
 const formatDateValue = (dateValue) => {
-    const monthFormatted = `0${dateValue.getMonth() + 1}`.slice(-2);
-    const dayFormatted = `0${dateValue.getDate()}`.slice(-2);
-    return `${dateValue.getFullYear()}-${monthFormatted}-${dayFormatted}`;
+    const formattedDateValue = new globalThis.Date(dateValue);
+    const monthFormatted = `0${formattedDateValue.getMonth() + 1}`.slice(-2);
+    const dayFormatted = `0${formattedDateValue.getDate()}`.slice(-2);
+    return `${formattedDateValue.getFullYear()}-${monthFormatted}-${dayFormatted}`;
 };
 const Date = forwardRef(({ className, classModifier, defaultValue, value, ...otherProps }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-form__input-date");

package/dist/Layout/Header/Infos/Infos.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
 import { getComponentClassName } from "../../../utilities";
+import { generateId } from "../../../utilities/helpers/generateId";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
 const defaultClassName = "af-contrat";
 const Infos = ({ infos, className, classModifier }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => (_jsxs(Fragment, { children: [_jsx("dt", { className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, children: info.definition })] }, `info-${info.id}`))) })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => (_jsxs(Fragment, { children: [_jsx("dt", { className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, children: info.definition })] }, `info-${generateId(info)}`))) })] }));
 };
 export { Infos };

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/dist/utilities/helpers/generateId.d.ts

@@ -0,0 +1 @@
+export declare const generateId: (item: object) => string;

package/dist/utilities/helpers/generateId.js

@@ -0,0 +1,10 @@
+let counter = 1;
+const map = new WeakMap();
+export const generateId = (item) => {
+    if (!map.has(item)) {
+        map.set(item, counter);
+        counter += 1;
+        return generateId(item);
+    }
+    return `id-${map.get(item)}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.0.6-alpha.7",
+  "version": "1.1.0-RC.1",
   "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.7",
+    "@axa-fr/design-system-slash-css": "1.1.0-RC.1",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -55,74 +55,21 @@
     }
   },
   "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": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@material-symbols/svg-400": "*",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/theming": "^8.3.5",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/dompurify": "^3.0.5",
-    "@types/jest": "^29.5.12",
-    "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.2",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.1.2",
-    "chromatic": "^11.12.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.9.0",
-    "jest-axe": "^8.0.0",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.3.5",
-    "tsc-files": "^1.1.4",
-    "typescript": "^5.6.3",
-    "vitest": "^2.0.5"
-  },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",
     "*.(ts|tsx)": "tsc-files --noEmit",
     "*.mdx": "prettier --write"
   },
   "volta": {
-    "node": "20.10.0",
-    "npm": "10.2.5"
+    "extends": "../../package.json"
   }
 }