@axa-fr/canopee-react 1.0.0-alpha.1089

package/dist/distributeur/Form/core/index.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+export { LegacyField } from "./Deprecated/Field";
+export { FieldForm } from "./Deprecated/FieldForm";
+export { FieldInput } from "./Deprecated/FieldInput";
+export { Field } from "./Field";
+export type { ConsumerFieldProps } from "./Field";
+export { FieldError } from "./FieldError";
+export { FormClassManager } from "./FormClassManager";
+export { HelpMessage } from "./HelpMessage";
+export { InputList } from "./InputList";
+export { MessageTypes } from "./MessageTypes";
+export { getFirstId } from "./getFirstId";
+export { getOptionClassName } from "./getOptionClassName";
+export { useInputClassModifier } from "./useInputClassModifier";
+export { useOptionsWithId } from "./useOptionsWithId";
+export type Option = {
+    id?: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    /**
+     * @deprecated Ne semble pas utilisé
+     */
+    description?: ReactNode;
+    value: string;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+type BaseFormEvent = {
+    id: string;
+    name: string;
+};
+export type FormEvent = (BaseFormEvent & {
+    value: string;
+}) | (BaseFormEvent & {
+    values: string[];
+});

package/dist/distributeur/Form/core/index.js

@@ -0,0 +1,13 @@
+export { LegacyField } from "./Deprecated/Field";
+export { FieldForm } from "./Deprecated/FieldForm";
+export { FieldInput } from "./Deprecated/FieldInput";
+export { Field } from "./Field";
+export { FieldError } from "./FieldError";
+export { FormClassManager } from "./FormClassManager";
+export { HelpMessage } from "./HelpMessage";
+export { InputList } from "./InputList";
+export { MessageTypes } from "./MessageTypes";
+export { getFirstId } from "./getFirstId";
+export { getOptionClassName } from "./getOptionClassName";
+export { useInputClassModifier } from "./useInputClassModifier";
+export { useOptionsWithId } from "./useOptionsWithId";

package/dist/distributeur/Form/core/useAriaInvalid.d.ts

@@ -0,0 +1,2 @@
+import { MessageTypes } from ".";
+export declare const useAriaInvalid: (message?: string, forceDisplayMessage?: boolean, messageType?: MessageTypes) => boolean;

package/dist/distributeur/Form/core/useAriaInvalid.js

@@ -0,0 +1,2 @@
+import { MessageTypes } from ".";
+export const useAriaInvalid = (message, forceDisplayMessage, messageType) => Boolean(message && forceDisplayMessage && messageType === MessageTypes.error);

package/dist/distributeur/Form/core/useInputClassModifier.d.ts

@@ -0,0 +1,4 @@
+export declare function useInputClassModifier(classModifier: string, disabled: boolean, hasChildren: boolean, required?: boolean): {
+    inputClassModifier: string;
+    inputFieldClassModifier: string;
+};

package/dist/distributeur/Form/core/useInputClassModifier.js

@@ -0,0 +1,13 @@
+export function useInputClassModifier(classModifier, disabled, hasChildren, required = false) {
+    return {
+        inputClassModifier: [
+            classModifier ?? "",
+            hasChildren ? "hasinfobulle" : "",
+        ].join(" "),
+        inputFieldClassModifier: [
+            classModifier ?? "",
+            disabled ? "disabled" : "",
+            required ? "required" : "",
+        ].join(" "),
+    };
+}

package/dist/distributeur/Form/core/useOptionsWithId.d.ts

@@ -0,0 +1,2 @@
+import type { Option } from ".";
+export declare function useOptionsWithId(options?: Option[], id?: string): Option[];

package/dist/distributeur/Form/core/useOptionsWithId.js

@@ -0,0 +1,13 @@
+import { useId } from "react";
+export function useOptionsWithId(options, id) {
+    const reactId = useId();
+    if (!options) {
+        return [];
+    }
+    return options.map((option, index) => {
+        if (option.id) {
+            return option;
+        }
+        return { ...option, id: `${id ?? reactId}_${index}` };
+    });
+}

package/dist/distributeur/HelpButton/index.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/canopee-css/distributeur/Action/Action.css";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Popover } from "../Popover";
+type HelpProps = Omit<ComponentPropsWithoutRef<typeof Popover>, "popoverElement"> & {
+    helpButtonContent?: ReactNode;
+};
+export declare const HelpButton: ({ className, classModifier, children, mode, placement, helpButtonContent, }: HelpProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/HelpButton/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Action/Action.css";
+import { Popover } from "../Popover";
+import { getComponentClassName } from "../utilities";
+export const HelpButton = ({ className, classModifier, children, mode = "click", placement = "right", helpButtonContent = _jsx("span", { className: "af-more-help", children: "i" }), }) => {
+    const buttonClassName = getComponentClassName("btn af-btn--circle", classModifier, "");
+    return (_jsx(Popover, { className: className, classModifier: classModifier, placement: placement, mode: mode, popoverElement: children, children: _jsx("div", { className: buttonClassName, children: helpButtonContent }) }));
+};

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

@@ -0,0 +1,14 @@
+import "@axa-fr/canopee-css/distributeur/Layout/Footer/Footer.css";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+type FooterProps = {
+    href?: string;
+    title?: string;
+    alt?: string;
+    icon?: string;
+    className?: string;
+    version?: string;
+};
+export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/distributeur/Layout/Footer/Footer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import logo from "@axa-fr/canopee-css/logo-axa.svg";
+import "@axa-fr/canopee-css/distributeur/Layout/Footer/Footer.css";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+import { forwardRef } from "react";
+import classNames from "classnames";
+export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", version, children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsxs("footer", { ref: ref, className: classNames("af-container", className), ...props, children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children }), version ? (_jsxs("span", { className: "af-footer-version", children: ["Version ", version] })) : null] })));
+Footer.displayName = "Footer";

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

@@ -0,0 +1 @@
+export { Footer } from "./Footer";

package/dist/distributeur/Layout/Footer/index.js

@@ -0,0 +1 @@
+export { Footer } from "./Footer";

package/dist/distributeur/Layout/Header/AnchorNavBar/AnchorNavBar.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+export type AnchorNavBarItem = {
+    /**
+     * name - The display name of the navigation item.
+     */
+    name: string;
+    /**
+     * isActive - If true, the item is highlighted as active.
+     */
+    isActive?: boolean;
+    /**
+     * onClick - Optional click handler for the navigation item.
+     */
+    onClick?: () => void;
+    /**
+     * link - The URL or anchor to navigate to when the item is clicked.
+     */
+    link?: string;
+    /**
+     * externalLink - If true, the link will open in a new tab and show an external link icon.
+     */
+    externalLink?: boolean;
+    /**
+     * render - Optional custom render function for the navigation item. If provided, it overrides the default rendering.
+     */
+    render?: (props: {
+        className: string;
+    }) => ReactNode;
+};
+/**
+ * Props for the AnchorNavBar component.
+ * items - An array of navigation items to display in the navigation bar.
+ */
+export type AnchorNavBarProps = {
+    items: AnchorNavBarItem[];
+};
+export declare const AnchorNavBar: ({ items }: AnchorNavBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Layout/Header/AnchorNavBar/AnchorNavBar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import externalLinkIcon from "@material-symbols/svg-400/sharp/exit_to_app.svg";
+import { Svg } from "../../../Svg";
+import { Link } from "../../../Link/Link";
+import { linkClassName } from "../../../Link/linkClassName";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+const defaultClassName = "af-anchor-navbar";
+export const AnchorNavBar = ({ items }) => {
+    return (_jsx("nav", { className: classNames("af-container", defaultClassName), children: _jsx("ul", { children: items.map((item) => {
+                if (item.render) {
+                    return (_jsx("li", { children: _jsx(Link, { render: item.render, className: classNames(`${linkClassName} ${defaultClassName}-link`, {
+                                [`${defaultClassName}-link--active`]: item.isActive,
+                            }) }) }, `nav-item-${item.name}`));
+                }
+                return (_jsx("li", { children: _jsxs(Link, { href: item.link, "aria-current": item.isActive ? "page" : undefined, onClick: item.onClick, className: classNames(`${defaultClassName}-link`, {
+                            [`${defaultClassName}-link--active`]: item.isActive,
+                        }), target: item.externalLink ? "_blank" : undefined, children: [item.name, item.externalLink ? (_jsx(Svg, { role: "presentation", src: externalLinkIcon, className: `${defaultClassName}-external-link-svg` })) : null] }) }, `nav-item-${item.name}`));
+            }) }) }));
+};

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

@@ -0,0 +1,9 @@
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Header.css";
+import { type ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    classModifier?: string;
+    className?: string;
+};
+declare const Header: ({ classModifier, className, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Header };

package/dist/distributeur/Layout/Header/Header.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Header.css";
+import classNames from "classnames";
+import { getComponentClassName } from "../../utilities";
+const defaultClassName = "af-header";
+const Header = ({ classModifier, className, children }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsx("div", { className: classNames("af-container", componentClassName), children: _jsx("header", { className: `${defaultClassName}__content`, role: "banner", children: children }) }));
+};
+export { Header };

package/dist/distributeur/Layout/Header/HeaderTitle/HeaderTitle.d.ts

@@ -0,0 +1,17 @@
+import "@axa-fr/canopee-css/distributeur/Layout/Header/HeaderTitle/HeaderTitle.css";
+import { ReactNode } from "react";
+import { AnchorNavBarItem } from "../AnchorNavBar/AnchorNavBar";
+type Props = {
+    children?: ReactNode;
+    classModifier?: string;
+    className?: string;
+    isSticky?: boolean;
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
+    subtitle?: string;
+    title: string;
+    toggleMenu?: () => void;
+    anchorNavBarItems?: AnchorNavBarItem[];
+};
+declare const HeaderTitle: ({ children, classModifier, className, isSticky, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { HeaderTitle };

package/dist/distributeur/Layout/Header/HeaderTitle/HeaderTitle.helpers.d.ts

@@ -0,0 +1 @@
+export declare const getClassModifier: (classModifier?: string, isSticky?: boolean) => string | undefined;

package/dist/distributeur/Layout/Header/HeaderTitle/HeaderTitle.helpers.js

@@ -0,0 +1,6 @@
+export const getClassModifier = (classModifier, isSticky) => {
+    if (isSticky) {
+        return !classModifier ? "sticky" : `${classModifier} sticky`.trim();
+    }
+    return classModifier;
+};

package/dist/distributeur/Layout/Header/HeaderTitle/HeaderTitle.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/HeaderTitle/HeaderTitle.css";
+import classNames from "classnames";
+import { Action } from "../../../Action/Action";
+import { getComponentClassName } from "../../../utilities";
+import { AnchorNavBar } from "../AnchorNavBar/AnchorNavBar";
+import { ToggleButton } from "../ToggleButton/ToggleButton";
+import { getClassModifier } from "./HeaderTitle.helpers";
+const defaultClassName = "af-title-bar";
+const HeaderTitle = ({ children, classModifier, className, isSticky = true, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }) => {
+    const componentClassName = getComponentClassName(className, getClassModifier(classModifier, isSticky), defaultClassName);
+    const isAnchorNavBarPresent = anchorNavBarItems && anchorNavBarItems.length > 0;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames("af-container", componentClassName, {
+                    [`${defaultClassName}__withAnchorNavBar`]: isAnchorNavBarPresent,
+                }), children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("div", { className: `${defaultClassName}__leftSection`, children: [contentLeft, _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle ? (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle })) : null] }), children] }), contentRight ? (_jsx("div", { className: `${defaultClassName}__rightSection`, children: contentRight })) : null] }), isAnchorNavBarPresent ? (_jsx(AnchorNavBar, { items: anchorNavBarItems })) : null] }));
+};
+export { HeaderTitle };

package/dist/distributeur/Layout/Header/Infos/Infos.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Infos/Infos.css";
+export type TInfo = {
+    definition: ReactNode;
+    id?: string;
+    word: ReactNode;
+};
+type InfosProps = {
+    classModifier?: string;
+    className?: string;
+    infos: TInfo[];
+};
+declare const Infos: ({ infos, className, classModifier }: InfosProps) => import("react/jsx-runtime").JSX.Element;
+export { Infos };

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import infoIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
+import { Fragment } from "react";
+import { getComponentClassName } from "../../../utilities";
+import { generateId } from "../../../utilities/helpers/generateId";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Infos/Infos.css";
+import { Svg } from "../../../Svg";
+const defaultClassName = "af-contrat";
+const Infos = ({ infos, className, classModifier }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs("div", { className: componentClassName, children: [_jsx(Svg, { className: "af-contrat__icon", src: infoIcon, "aria-hidden": "true" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => {
+                    const idTerm = info.id ?? `info-${generateId(info)}`;
+                    return (_jsxs(Fragment, { children: [_jsx("dt", { id: idTerm, className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, "aria-labelledby": idTerm, children: info.definition })] }, idTerm));
+                }) })] }));
+};
+export { Infos };

package/dist/distributeur/Layout/Header/MenuTitleWrapper/MenuTitleWrapper.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps } from "react";
+import { NavBar } from "../NavBar";
+type TMenuTitleWrapperProps = {
+    children: React.ReactNode;
+    menuVisible: boolean;
+    subtitle: string;
+    title: string;
+    navBarProps?: Partial<ComponentProps<typeof NavBar>>;
+};
+declare const MenuTitleWrapper: ({ children, menuVisible, subtitle, title, navBarProps, }: TMenuTitleWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuTitleWrapper };

package/dist/distributeur/Layout/Header/MenuTitleWrapper/MenuTitleWrapper.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { HeaderTitle } from "../HeaderTitle/HeaderTitle";
+import { NavBar } from "../NavBar";
+const MenuTitleWrapper = ({ children, menuVisible, subtitle, title, navBarProps, }) => {
+    const [isMenuVisible, setIsMenuVisible] = useState(menuVisible);
+    const handleClick = useCallback(() => {
+        const { body } = document;
+        body.classList.toggle("af-menu-open");
+        setIsMenuVisible((prev) => !prev);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(NavBar, { isVisible: isMenuVisible, onClick: handleClick, ...navBarProps, children: children }), _jsx(HeaderTitle, { title: title, subtitle: subtitle, toggleMenu: handleClick })] }));
+};
+export { MenuTitleWrapper };

package/dist/distributeur/Layout/Header/Name/Name.d.ts

@@ -0,0 +1,16 @@
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Logo/Logo.css";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Name/Name.css";
+import { type MouseEvent } from "react";
+type Props = {
+    alt?: string;
+    classModifier?: string;
+    className?: string;
+    img?: string;
+    onClick?: (action: {
+        event: MouseEvent<HTMLAnchorElement>;
+    }) => void;
+    subtitle?: string;
+    title: string;
+};
+declare const Name: ({ alt, classModifier, className, img, onClick, subtitle, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Name };

package/dist/distributeur/Layout/Header/Name/Name.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Logo/Logo.css";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/Name/Name.css";
+import { getComponentClassName } from "../../../utilities";
+const defaultClassName = "af-header__name";
+const Name = ({ alt = "logo", classModifier, className, img, onClick, subtitle, title, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("a", { className: "af-logo", href: "/", onClick: (event) => onClick && onClick({ event }), children: _jsx("img", { className: "af-logo__brand", src: img, alt: alt }) }), _jsxs("h2", { className: "af-header__title", children: [title, _jsx("span", { className: "af-header__subtitle", children: subtitle })] })] }));
+};
+export { Name };

package/dist/distributeur/Layout/Header/NavBar/NavBar.d.ts

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+type Props = {
+    id?: string;
+    toggleMenuId?: string;
+    positionInit?: number;
+    className?: string;
+    isVisible: boolean;
+    children: ReactNode;
+    onClick: (event: React.MouseEvent) => void;
+};
+declare const NavBar: ({ positionInit, children, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { NavBar };

package/dist/distributeur/Layout/Header/NavBar/NavBar.helpers.d.ts

@@ -0,0 +1 @@
+export declare const getPosition: (max: number, position: number, direction: string) => number;

package/dist/distributeur/Layout/Header/NavBar/NavBar.helpers.js

@@ -0,0 +1,12 @@
+export const getPosition = (max, position, direction) => {
+    switch (direction) {
+        case "ArrowRight":
+        case "ArrowDown":
+            return position + 1 < max ? position + 1 : 0;
+        case "ArrowLeft":
+        case "ArrowUp":
+            return position - 1 < 0 ? max - 1 : position - 1;
+        default:
+            return position;
+    }
+};

package/dist/distributeur/Layout/Header/NavBar/NavBar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { isValidElement, useCallback, useMemo, useState, } from "react";
+import { getPosition } from "./NavBar.helpers";
+import { NavBarBase } from "./NavBarBase";
+const NavBar = ({ positionInit = 0, children, ...otherProps }) => {
+    const [isMenuFocused, setIsMenuFocused] = useState(false);
+    const [position, setPosition] = useState(positionInit);
+    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    const handleKeys = useCallback((key) => {
+        if (key === "Escape") {
+            setIsMenuFocused(false);
+        }
+        if (key === "ArrowRight" || key === "ArrowLeft") {
+            const newPosition = getPosition(validChildren.length, position, key);
+            setPosition(newPosition);
+        }
+    }, [position, validChildren]);
+    return (_jsx(NavBarBase, { ...otherProps, onFocus: () => setIsMenuFocused(true), onBlur: () => setIsMenuFocused(false), handleKeys: handleKeys, isMenuFocused: isMenuFocused, children: React.Children.map(validChildren, (child, index) => {
+            const isCurrent = index === position;
+            return React.cloneElement(child, {
+                key: `NavBarItem`,
+                classModifier: [
+                    child.props.classModifier,
+                    isCurrent ? "active" : undefined,
+                ]
+                    .filter((c) => Boolean(c))
+                    .join(" "),
+                tabIndex: isCurrent ? 0 : -1,
+                index,
+                hasFocus: isMenuFocused && isCurrent,
+                onClick: () => setPosition(index),
+            });
+        }) }));
+};
+export { NavBar };

package/dist/distributeur/Layout/Header/NavBar/NavBarBase.d.ts

@@ -0,0 +1,20 @@
+import { FocusEvent, MouseEvent, ReactNode } from "react";
+type Props = {
+    isVisible: boolean;
+    id?: string;
+    toggleMenuId?: string;
+    isMenuFocused?: boolean;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    classModifier?: string;
+    handleKeys: (key: string) => void;
+    onFocus: (action: {
+        e: FocusEvent<HTMLUListElement>;
+    }) => void;
+    onBlur: (action: {
+        e: FocusEvent<HTMLUListElement>;
+    }) => void;
+    children?: ReactNode;
+};
+declare const NavBarBase: ({ isVisible, onClick, id, toggleMenuId, isMenuFocused, className, classModifier, handleKeys, onFocus, onBlur, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { NavBarBase };

package/dist/distributeur/Layout/Header/NavBar/NavBarBase.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { getComponentClassName } from "../../../utilities";
+const defaultClassName = "af-nav-container";
+const NavBarBase = ({ isVisible = true, onClick, id = "mainmenu", toggleMenuId = "togglemenu", isMenuFocused, className, classModifier, handleKeys, onFocus, onBlur, children, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs("div", { className: classNames("af-container", componentClassName), children: [_jsx("button", { "aria-controls": id, "aria-haspopup": "true", type: "button", onClick: onClick, className: `mask fade ${isVisible ? "show" : ""}`, id: `open-${toggleMenuId}`, "aria-label": "Open Menu" }), _jsxs("nav", { className: `af-nav af-drawer left ${isVisible ? "show" : ""}`, role: "navigation", "aria-label": "Menu principal", children: [_jsxs("div", { className: "af-nav__aside-header", children: [_jsx("h4", { className: "af-nav__aside-title", children: "Menu" }), _jsx("button", { "aria-controls": id, "aria-haspopup": "true", onClick: onClick, type: "button", className: "af-nav__aside-close", id: `close-${toggleMenuId}`, "aria-label": "Close Menu", children: "\u00D7" })] }), _jsx("ul", { onKeyDown: (e) => {
+                            e.preventDefault();
+                            handleKeys(e.key);
+                        }, onFocus: (e) => {
+                            onFocus({ e });
+                        }, onBlur: (e) => {
+                            onBlur({ e });
+                        }, className: `af-nav__list ${isMenuFocused ? "af-nav__list--focused" : ""}`, role: "menubar", id: id, children: children })] })] }));
+};
+export { NavBarBase };

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItem.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactElement } from "react";
+import { NavBarItemBase } from "./NavBarItemBase";
+type ChildrenProps = {
+    classModifier?: string;
+    tabIndex?: number;
+    hasFocus?: boolean;
+    [key: string]: unknown;
+};
+type Props = Omit<ComponentProps<typeof NavBarItemBase>, "handleKeys" | "isMenuOpen" | "position"> & {
+    ariaLabel?: string;
+    children?: ReactElement<ChildrenProps> | ReactElement<ChildrenProps>[];
+};
+declare const NavBarItem: ({ children, hasFocus, actionElt, ariaLabel, tabIndex, role, className, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { NavBarItem };

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItem.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState, } from "react";
+import { getPosition } from "../NavBar.helpers";
+import { NavBarItemBase } from "./NavBarItemBase";
+const defaultClassName = "af-nav__item";
+const NavBarItem = ({ children, hasFocus = false, actionElt, ariaLabel = "", tabIndex = -1, role = "menuitem", className = defaultClassName, ...otherProps }) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [position, setPosition] = useState(0);
+    const moveBykey = useCallback((key) => {
+        const newPosition = getPosition(React.Children.count(children), position, key);
+        setPosition(newPosition);
+    }, [position, children]);
+    const openMenu = useCallback(() => {
+        if (children) {
+            setIsMenuOpen(true);
+        }
+    }, [children]);
+    const closeMenu = useCallback(() => {
+        setIsMenuOpen(false);
+        setPosition(0);
+    }, []);
+    const handleKeys = useCallback(({ key }) => {
+        if (!children) {
+            return;
+        }
+        if (key === "ArrowDown") {
+            if (!isMenuOpen) {
+                openMenu();
+            }
+            else {
+                moveBykey(key);
+            }
+        }
+        if (key === "ArrowUp" && isMenuOpen) {
+            if (position === 0) {
+                closeMenu();
+            }
+            else {
+                moveBykey(key);
+            }
+        }
+        if (key === "ArrowRight" || key === "ArrowLeft" || key === "Escape") {
+            closeMenu();
+        }
+    }, [children, isMenuOpen, position, moveBykey, openMenu, closeMenu]);
+    const renderChild = useCallback((child, childIndex) => React.cloneElement(child, {
+        classModifier: childIndex === position && isMenuOpen ? " active" : undefined,
+        tabIndex: childIndex === position && isMenuOpen ? 0 : -1,
+        key: `child${childIndex}`,
+        hasFocus: hasFocus && position === childIndex && isMenuOpen,
+    }), [position, isMenuOpen, hasFocus]);
+    return (_jsx(NavBarItemBase, { className: className, role: role, hasFocus: hasFocus, tabIndex: tabIndex, isMenuOpen: isMenuOpen, handleKeys: handleKeys, actionElt: actionElt, ...otherProps, children: children ? (_jsxs(_Fragment, { children: [_jsx("i", { className: "glyphicon glyphicon-arrow-xs-down" }, `icon${tabIndex}`), _jsx("ul", { className: "af-nav__list af-nav__list--children", role: "menu", "aria-label": ariaLabel, children: React.Children.map(children, renderChild) }, `list${tabIndex}`)] })) : null }));
+};
+export { NavBarItem };

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItemBase.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, KeyboardEvent, ReactElement } from "react";
+type Props = HTMLAttributes<HTMLLIElement> & {
+    actionElt: ReactElement<HTMLAttributes<HTMLElement>>;
+    handleKeys: (event: KeyboardEvent<HTMLLIElement>) => void;
+    hasFocus?: boolean;
+    isMenuOpen?: boolean;
+    classModifier?: string;
+};
+export declare const NavBarItemBase: ({ tabIndex, role, children, hasFocus, handleKeys, isMenuOpen, className, classModifier, actionElt, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItemBase.helpers.d.ts

@@ -0,0 +1 @@
+export declare const handleLinkFocus: (refToFocusOn: HTMLElement | null, hasFocus?: boolean, isMenuOpen?: boolean) => void;

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItemBase.helpers.js

@@ -0,0 +1,11 @@
+export const handleLinkFocus = (refToFocusOn, hasFocus, isMenuOpen) => {
+    if (!refToFocusOn || isMenuOpen) {
+        return;
+    }
+    if (hasFocus) {
+        refToFocusOn.focus();
+    }
+    else {
+        refToFocusOn.blur();
+    }
+};

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItemBase.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, } from "react";
+import { getComponentClassName } from "../../../../utilities";
+import { handleLinkFocus } from "./NavBarItemBase.helpers";
+export const NavBarItemBase = ({ tabIndex = -1, role = "menuitem", children, hasFocus, handleKeys, isMenuOpen, className, classModifier, actionElt, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-nav__item");
+    const ref = useRef(null);
+    useEffect(() => {
+        handleLinkFocus(ref?.current, hasFocus, isMenuOpen);
+    }, [hasFocus, isMenuOpen]);
+    /* On ajoute la classe permettant définir l'état ouvert sur l'élément
+     * si celui a le focus, si le menu est ouvert et s'il possède des éléments enfants
+     */
+    const openClass = useMemo(() => (hasFocus && isMenuOpen && children ? "af-nav__item--open" : ""), [children, hasFocus, isMenuOpen]);
+    return (_jsxs("li", { className: `${componentClassName} ${openClass}`, role: "none", onKeyDown: (e) => {
+            e.preventDefault();
+            handleKeys(e);
+        }, children: [_jsx(actionElt.type, { ...actionElt.props, ...otherProps, role: role, tabIndex: tabIndex, "aria-expanded": isMenuOpen, ref: ref }, actionElt.key), children] }));
+};

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItemLink.d.ts

@@ -0,0 +1,8 @@
+import { AllHTMLAttributes, RefObject } from "react";
+type Props = AllHTMLAttributes<HTMLAnchorElement> & {
+    handleKeys: () => void;
+    isMenuOpen?: boolean;
+    refCallBackFocus: RefObject<HTMLAnchorElement>;
+};
+declare const NavBarItemLink: ({ className, label, href, tabIndex, role, refCallBackFocus, isMenuOpen, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { NavBarItemLink };

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/NavBarItemLink.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultClassName = "af-nav__link";
+const NavBarItemLink = ({ className = defaultClassName, label, href = "#", tabIndex = -1, role = "menuitem", refCallBackFocus, isMenuOpen = false, ...otherProps }) => (_jsx("a", { className: className, ref: refCallBackFocus, role: role, href: href, tabIndex: tabIndex, "aria-expanded": isMenuOpen, ...otherProps, children: label }));
+export { NavBarItemLink };

package/dist/distributeur/Layout/Header/NavBar/NavBarItem/index.d.ts

@@ -0,0 +1,3 @@
+export { NavBarItem } from "./NavBarItem";
+export { NavBarItemBase } from "./NavBarItemBase";
+export { NavBarItemLink } from "./NavBarItemLink";