@axa-fr/design-system-look-and-feel-react 1.0.5-alpha.324 → 1.0.5-alpha.326

package/dist/Layout/Footer/Footer.d.ts

@@ -1,4 +1,3 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Footer/Footer.scss";
 import { FC } from "react";
 import { SocialMedia } from "./MenuIcons";

package/dist/Layout/Footer/Footer.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Footer/Footer.scss";
 import expandMore from "@material-symbols/svg-400/outlined/keyboard_arrow_down.svg";
 import classNames from "classnames";

package/dist/Layout/Header/BurgerMenu/BurgerMenu.d.ts

@@ -4,10 +4,9 @@ import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickItem/ClickItem.scss";
 type BurgerMenuProps = {
-    isOpen: boolean;
+    refModal: React.RefObject<HTMLDialogElement | null>;
     items: ReactElement[];
     setActiveLink: Dispatch<SetStateAction<number | undefined>>;
-    setIsOpen: Dispatch<SetStateAction<boolean>>;
 } & ComponentPropsWithoutRef<"nav">;
-declare const BurgerMenu: ({ isOpen, items, setActiveLink, setIsOpen, ...props }: BurgerMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BurgerMenu: ({ items, setActiveLink, refModal, ...props }: BurgerMenuProps) => import("react/jsx-runtime").JSX.Element | null;
 export { BurgerMenu };

package/dist/Layout/Header/BurgerMenu/BurgerMenu.js

@@ -5,15 +5,15 @@ import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickItem/ClickItem.scss";
 import classNames from "classnames";
 import { ClickItem, createClickItemParent } from "../../../List/ClickItem";
-const BurgerMenu = ({ isOpen, items, setActiveLink, setIsOpen, ...props }) => {
+const BurgerMenu = ({ items, setActiveLink, refModal, ...props }) => {
     const handleOnClick = (index) => () => {
         setActiveLink(index);
-        setIsOpen(false);
+        refModal.current?.close();
     };
     if (items.length === 0)
         return null;
-    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal mobile", "aria-hidden": !isOpen, className: classNames("af-card", "af-card--list", "af-burger-menu", {
-            open: isOpen,
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal mobile", "aria-hidden": !refModal.current?.open, className: classNames("af-card", "af-card--list", "af-burger-menu", {
+            open: refModal.current?.open,
         }), ...props, children: _jsx("ul", { role: "menubar", children: items.map((item, index) => {
                 const { key, props: itemProps, type } = item;
                 const { children, ...otherProps } = itemProps;

package/dist/Layout/Header/Header.js

@@ -1,27 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
 import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
-import { Children, isValidElement, useCallback, useEffect, useMemo, useState, } from "react";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
-import { Button, IconBg, Svg } from "../..";
+import { Button, IconBg, Modal, Svg } from "../..";
 import { BurgerMenu } from "./BurgerMenu";
 import { BREAKPOINT } from "../../utilities";
 export const Header = ({ children, defaultActiveLink, previousLink, rightItem, ...props }) => {
     const [activeLink, setActiveLink] = useState(defaultActiveLink);
-    const [isOpen, setIsOpen] = useState(false);
-    const toggleMenu = () => setIsOpen((prev) => !prev);
+    const ref = useRef(null);
+    const toggleMenu = () => {
+        ref.current?.showModal();
+    };
     const resetActiveLink = useCallback(() => setActiveLink(defaultActiveLink), [defaultActiveLink]);
     useEffect(() => {
         const handleResize = () => {
-            if (window.innerWidth > BREAKPOINT.MD && isOpen) {
-                setIsOpen(false);
+            if (window.innerWidth > BREAKPOINT.MD && ref.current?.open) {
+                ref.current?.close();
             }
         };
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
-    }, [isOpen]);
+    }, [ref.current?.open]);
     const burgerMenuItems = useMemo(() => {
         const mapValidElements = (items) => (Children.map(items, (child) => isValidElement(child) && child) ?? []).filter(Boolean);
         const validLinks = mapValidElements(children);
@@ -33,5 +35,9 @@ export const Header = ({ children, defaultActiveLink, previousLink, rightItem, .
         }
         return [...validLinks, rightItem];
     }, [children, rightItem]);
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "af-header", ...props, children: [_jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "logo AXA" }), _jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children })] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem }), burgerMenuItems && burgerMenuItems.length > 0 && (_jsx(Button, { "aria-label": isOpen ? "Fermer le menu" : "Ouvrir le menu", onClick: toggleMenu, variant: "ghost", children: _jsx(IconBg, { children: _jsx(Svg, { src: menu, "aria-hidden": "true" }) }) }))] }), _jsx(BurgerMenu, { isOpen: isOpen, items: burgerMenuItems, setActiveLink: setActiveLink, setIsOpen: setIsOpen })] }), _jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }), burgerMenuItems && burgerMenuItems.length > 0 && (_jsx("div", { className: `af-header-overlay ${isOpen ? "open" : ""}` }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("header", { className: "af-header", ...props, children: _jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "logo AXA" }), _jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children })] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem }), burgerMenuItems && burgerMenuItems.length > 0 && (_jsx(Button, { "aria-label": "Ouvrir le menu", onClick: toggleMenu, variant: "ghost", children: _jsx(IconBg, { children: _jsx(Svg, { src: menu, "aria-hidden": "true" }) }) }))] }) }), _jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }), _jsx(Modal, { ref: ref, onClose: () => {
+                    ref.current?.close();
+                }, onCancel: () => {
+                    ref.current?.close();
+                }, title: "Menu principal", role: "dialog", children: _jsx(BurgerMenu, { refModal: ref, items: burgerMenuItems, setActiveLink: setActiveLink }) })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-alpha.324",
+  "version": "1.0.5-alpha.326",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,10 +47,10 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.324",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.326",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18",
-    "@axa-fr/design-system-apollo-react": "1.0.5-alpha.324"
+    "@axa-fr/design-system-apollo-react": "1.0.5-alpha.326"
   },
   "peerDependenciesMeta": {
     "@material-symbols/svg-400": {