@axa-fr/canopee-react 1.8.1-alpha.1 → 2.0.0-RC.1

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

@@ -1,37 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { useId } from "react";
-import { FieldError, FormClassManager, HelpMessage, MessageTypes, useInputClassModifier, } from ".";
-import { getComponentClassName } from "../../utilities";
+import { FieldError, FormClassManager, HelpMessage, MessageTypes } from ".";
+import { getClassName } from "../../utilities";
 import { useAriaInvalid } from "./useAriaInvalid";
 function isIdDefined(id) {
     return typeof id === "string" && id.length > 0;
 }
-export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", className, label, forceDisplayMessage, message, messageType, required, classModifier = "", disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, labelPosition = "center", classNameSuffix = "text", renderInput, appendChildren, ...otherProps }) => {
+export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", className, label, forceDisplayMessage, message, messageType, required, disabled = false, hasInfobulle, helpMessage, id, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, labelPosition = "center", fieldClassNameSuffix = "text", renderInput, appendChildren, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = isIdDefined(id) ? id : inputUseId;
-    const actualRequired = required || classModifier.includes("required");
     const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
     const errorId = forceDisplayMessage || helpMessage ? `${inputId}-description` : undefined;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, false, actualRequired);
     const labelId = useId();
-    if (!isVisible) {
-        return null;
-    }
     const isGroup = roleContainer === "radiogroup" || roleContainer === "group";
     const LabelElement = isGroup ? "div" : "label";
-    const modifiers = forceDisplayMessage
-        ? `${inputFieldClassModifier} ${FormClassManager.getModifier(messageType)}`
-        : inputFieldClassModifier;
-    const fieldContainerClassName = getComponentClassName(`af-form__${classNameSuffix}`, modifiers);
-    const groupClassName = getComponentClassName(className, classModifier, "af-form__group");
+    const fieldModifiers = [
+        disabled && "disabled",
+        required && "required",
+        forceDisplayMessage && FormClassManager.getModifier(messageType),
+    ];
+    const inputClassName = getClassName({
+        baseClassName: `af-form__input-${fieldClassNameSuffix}`,
+        modifiers: [...fieldModifiers, hasInfobulle && `hasinfobulle`],
+    });
+    const fieldContainerClassName = getClassName({
+        baseClassName: `af-form__${fieldClassNameSuffix}`,
+        modifiers: fieldModifiers,
+    });
+    const groupClassName = getClassName({
+        baseClassName: "af-form__group",
+        className,
+    });
     return (_jsxs("div", { className: classNames("row", groupClassName, {
-            "af-form__group--required": actualRequired,
+            "af-form__group--required": required,
             "af-form__group--label-top": labelPosition === "top",
         }), role: roleContainer, "aria-invalid": isGroup ? isInvalid : undefined, "aria-required": isGroup ? required : undefined, "aria-label": ariaLabelContainer, "aria-labelledby": isGroup ? labelId : undefined, "aria-errormessage": isGroup && isInvalid ? errorId : undefined, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx(LabelElement, { className: classNames("af-form__group-label", {
-                        "af-form__group-label--required": actualRequired,
+                        "af-form__group-label--required": required,
                     }), htmlFor: isLabelContainerLinkedToInput ? inputId : undefined, id: labelId, children: label }) }), _jsxs("div", { className: classNameContainerInput, children: [_jsx("div", { className: fieldContainerClassName, children: renderInput({
-                            classModifier: `${inputClassModifier} ${modifiers}`,
+                            inputClassName,
                             id: inputId,
                             errorId,
                             disabled,

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities";
 import { MessageTypes } from "./MessageTypes";
 const DEFAULT_CLASS_NAME = "af-form__message";
 export const FieldError = ({ message = null, messageType = MessageTypes.error, errorId = undefined, }) => {
-    const className = getComponentClassName(DEFAULT_CLASS_NAME, messageType, DEFAULT_CLASS_NAME);
+    const className = getClassName({
+        baseClassName: DEFAULT_CLASS_NAME,
+        modifiers: [messageType],
+    });
     return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { id: errorId, role: "alert", className: `af-form__${messageType}-text`, children: message })] })));
 };

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

@@ -1 +1 @@
-export declare function getOptionClassName(className: string, classModifier: string, defaultClassName: string, disabled: boolean, variant?: string): string;
+export declare function getOptionClassName(className: string, defaultClassName: string, disabled: boolean, variant?: string): string;

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

@@ -1,12 +1,8 @@
 import { getClassName } from "../../utilities/helpers/getClassName";
-export function getOptionClassName(className, classModifier, defaultClassName, disabled, variant) {
+export function getOptionClassName(className, defaultClassName, disabled, variant) {
     return getClassName({
         baseClassName: className || defaultClassName,
-        modifiers: [
-            variant,
-            ...(classModifier?.split(" ") ?? []),
-            disabled && "disabled",
-        ],
+        modifiers: [variant, disabled && "disabled"],
         className,
     });
 }

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

@@ -1,7 +1,4 @@
 import type { 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";
@@ -11,16 +8,11 @@ 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 = {

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

@@ -1,6 +1,3 @@
-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";
@@ -9,5 +6,4 @@ 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/HelpButton/index.d.ts

@@ -5,5 +5,5 @@ type HelpProps = Omit<ComponentPropsWithoutRef<typeof Popover>, "popoverElement"
     helpButtonContent?: ReactNode;
     variant?: "default" | "inverse";
 };
-export declare const HelpButton: ({ className, classModifier, children, mode, placement, variant, helpButtonContent, }: HelpProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HelpButton: ({ className, children, mode, placement, variant, helpButtonContent, }: HelpProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/distributeur/HelpButton/index.js

@@ -5,13 +5,11 @@ import info from "@material-symbols/svg-400/rounded/info_i-fill.svg";
 import { Popover } from "../Popover";
 import { getClassName } from "../utilities/helpers/getClassName";
 import { Svg } from "../Svg";
-export const HelpButton = ({ className, classModifier, children, mode = "click", placement = "right", variant = "default", helpButtonContent = _jsx(Svg, { src: info, alt: "Help" }), }) => {
+export const HelpButton = ({ className, children, mode = "click", placement = "right", variant = "default", helpButtonContent = _jsx(Svg, { src: info, alt: "Help" }), }) => {
     const buttonClassName = classNames("btn", getClassName({
         baseClassName: "af-btn--circle",
-        modifiers: [
-            ...(classModifier?.split(" ") ?? []),
-            ...(variant === "inverse" ? ["inverse"] : []),
-        ],
+        modifiers: [variant === "inverse" && "inverse"],
+        className,
     }));
-    return (_jsx(Popover, { className: classNames("af-help-button", className), classModifier: classModifier, placement: placement, mode: mode, popoverElement: children, children: _jsx("div", { className: buttonClassName, children: helpButtonContent }) }));
+    return (_jsx(Popover, { className: classNames("af-help-button", className), placement: placement, mode: mode, popoverElement: children, children: _jsx("div", { className: buttonClassName, children: helpButtonContent }) }));
 };

package/dist/distributeur/ItemFormHelper/ItemFormHelper.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/canopee-css/distributeur/ItemFormHelper/ItemFormHelper.css";
+export type ItemFormHelperVariant = "todo" | "inprogress" | "validated";
+export type ItemFormHelperProps = {
+    variant: ItemFormHelperVariant;
+    label?: string;
+    className?: string;
+};
+export declare const ItemFormHelper: ({ variant, label, className, }: ItemFormHelperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/ItemFormHelper/ItemFormHelper.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/ItemFormHelper/ItemFormHelper.css";
+import checkSvg from "@material-symbols/svg-400/outlined/check.svg";
+import toDoSvg from "@material-symbols/svg-400/outlined/circle.svg";
+import wipSvg from "@material-symbols/svg-400/outlined/circle-fill.svg";
+import { Svg } from "../Svg";
+import { getClassName } from "../utilities/helpers/getClassName";
+const variants = {
+    todo: {
+        icon: toDoSvg,
+        defaultLabel: "à compléter",
+    },
+    inprogress: {
+        icon: wipSvg,
+        defaultLabel: "en cours",
+    },
+    validated: {
+        icon: checkSvg,
+        defaultLabel: "validé",
+    },
+};
+export const ItemFormHelper = ({ variant, label, className, }) => {
+    const { icon, defaultLabel } = variants[variant];
+    const displayLabel = label ?? defaultLabel;
+    const componentClassName = getClassName({
+        baseClassName: "af-item-form-helper",
+        modifiers: [variant],
+        className,
+    });
+    return (_jsxs("div", { className: componentClassName, children: [_jsx(Svg, { src: icon, width: 12, height: 12 }), _jsx("span", { children: displayLabel })] }));
+};

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

@@ -1,5 +1,6 @@
 import "@axa-fr/canopee-css/distributeur/Layout/Footer/Footer.css";
 import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+import { type PropsWithChildren } from "react";
 type FooterProps = {
     href?: string;
     title?: string;
@@ -8,7 +9,8 @@ type FooterProps = {
     className?: string;
     version?: string;
 };
-export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Footer: {
+    ({ className, href, title, icon, alt, version, children, ...props }: PropsWithChildren<FooterProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

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

@@ -3,6 +3,6 @@ import "@axa-fr/canopee-css/distributeur/Layout/Footer/Footer.css";
 import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
 import logo from "@axa-fr/canopee-css/logo-axa.svg";
 import classNames from "classnames";
-import { forwardRef } from "react";
-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] })));
+import {} from "react";
+export const Footer = ({ 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 }) => (_jsxs("footer", { 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/Header/Header.d.ts

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

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

@@ -4,10 +4,9 @@ import classNames from "classnames";
 import {} from "react";
 import { getClassName } from "../../utilities/helpers/getClassName";
 const defaultClassName = "af-header";
-const Header = ({ classModifier, className, children }) => {
+const Header = ({ className, children }) => {
     const componentClassName = getClassName({
         baseClassName: defaultClassName,
-        modifiers: classModifier?.split(" "),
         className,
     });
     return (_jsx("div", { className: classNames("af-container", componentClassName), children: _jsx("header", { className: `${defaultClassName}__content`, role: "banner", children: children }) }));

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

@@ -3,7 +3,6 @@ import type { ReactNode } from "react";
 import { type AnchorNavBarItem } from "../AnchorNavBar/AnchorNavBar";
 type Props = {
     children?: ReactNode;
-    classModifier?: string;
     className?: string;
     isSticky?: boolean;
     contentLeft?: ReactNode;
@@ -13,5 +12,5 @@ type Props = {
     toggleMenu?: () => void;
     anchorNavBarItems?: AnchorNavBarItem[];
 };
-declare const HeaderTitle: ({ children, classModifier, className, isSticky, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const HeaderTitle: ({ children, className, isSticky, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { HeaderTitle };

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

@@ -2,13 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { getClassName } 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 HeaderTitle = ({ children, className, isSticky = true, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }) => {
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: [isSticky && "sticky"],
+        className,
+    });
     const isAnchorNavBarPresent = anchorNavBarItems && anchorNavBarItems.length > 0;
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames("af-container", componentClassName), 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] }));
 };

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

@@ -6,10 +6,8 @@ export type TInfo = {
     word: ReactNode;
 };
 type InfosProps = {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     className?: string;
     infos: TInfo[];
 };
-declare const Infos: ({ infos, className, classModifier }: InfosProps) => import("react/jsx-runtime").JSX.Element;
+declare const Infos: ({ infos, className }: InfosProps) => import("react/jsx-runtime").JSX.Element;
 export { Infos };

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

@@ -6,10 +6,9 @@ import { getClassName } from "../../../utilities/helpers/getClassName";
 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 Infos = ({ infos, className }) => {
     const componentClassName = getClassName({
         baseClassName: defaultClassName,
-        modifiers: classModifier?.split(" "),
         className,
     });
     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) => {

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

@@ -3,8 +3,6 @@ import "@axa-fr/canopee-css/distributeur/Layout/Header/Name/Name.css";
 import { type MouseEvent } from "react";
 type Props = {
     alt?: string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     className?: string;
     img?: string;
     onClick?: (action: {
@@ -13,5 +11,5 @@ type Props = {
     subtitle?: string;
     title: string;
 };
-declare const Name: ({ alt, classModifier, className, img, onClick, subtitle, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Name: ({ alt, className, img, onClick, subtitle, title, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Name };

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

@@ -4,12 +4,11 @@ import "@axa-fr/canopee-css/distributeur/Layout/Header/Name/Name.css";
 import {} from "react";
 import { getClassName } from "../../../utilities/helpers/getClassName";
 const defaultClassName = "af-header__name";
-const Name = ({ alt = "logo", classModifier, className, img, onClick, subtitle, title, }) => {
+const Name = ({ alt = "logo", className, img, onClick, subtitle, title, }) => {
     const componentClassName = getClassName({
         baseClassName: defaultClassName,
-        modifiers: classModifier?.split(" "),
         className,
     });
-    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 })] })] }));
+    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("p", { className: "af-header__title", children: [title, _jsx("span", { className: "af-header__subtitle", children: subtitle })] })] }));
 };
 export { Name };

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

@@ -19,12 +19,7 @@ const NavBar = ({ positionInit = 0, children, ...otherProps }) => {
             const isCurrent = index === position;
             return React.cloneElement(child, {
                 key: `NavBarItem`,
-                classModifier: [
-                    child.props.classModifier,
-                    isCurrent ? "active" : undefined,
-                ]
-                    .filter((c) => Boolean(c))
-                    .join(" "),
+                active: isCurrent,
                 tabIndex: isCurrent ? 0 : -1,
                 index,
                 hasFocus: isMenuFocused && isCurrent,

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

@@ -6,8 +6,6 @@ type Props = {
     isMenuFocused?: boolean;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     handleKeys: (key: string) => void;
     onFocus: (action: {
         e: FocusEvent<HTMLUListElement>;
@@ -17,5 +15,5 @@ type Props = {
     }) => void;
     children?: ReactNode;
 };
-declare const NavBarBase: ({ isVisible, onClick, id, toggleMenuId, isMenuFocused, className, classModifier, handleKeys, onFocus, onBlur, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const NavBarBase: ({ onClick, id, toggleMenuId, isMenuFocused, className, handleKeys, onFocus, onBlur, children, isVisible, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { NavBarBase };

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

@@ -2,13 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { getClassName } from "../../../utilities/helpers/getClassName";
 const defaultClassName = "af-nav-container";
-const NavBarBase = ({ isVisible = true, onClick, id = "mainmenu", toggleMenuId = "togglemenu", isMenuFocused, className, classModifier, handleKeys, onFocus, onBlur, children, }) => {
+const NavBarBase = ({ onClick, id = "mainmenu", toggleMenuId = "togglemenu", isMenuFocused, className, handleKeys, onFocus, onBlur, children, isVisible, }) => {
     const componentClassName = getClassName({
         baseClassName: defaultClassName,
-        modifiers: classModifier?.split(" "),
         className,
     });
-    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) => {
+    const navClassName = getClassName({
+        baseClassName: "af-nav",
+        modifiers: [isVisible && "open"],
+        className: "af-drawer left",
+    });
+    return (_jsxs("div", { className: classNames("af-container", componentClassName), children: [isVisible ? (_jsx("button", { "aria-controls": id, "aria-haspopup": "true", type: "button", onClick: onClick, className: "mask fade", id: `open-${toggleMenuId}`, "aria-label": "Close Menu" })) : null, _jsxs("nav", { className: navClassName, 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) => {

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

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

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

@@ -2,8 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useCallback, useState, } from "react";
 import { getPosition } from "../NavBar.helpers";
 import { NavBarItemBase } from "./NavBarItemBase";
+import { getClassName } from "../../../../utilities";
 const defaultClassName = "af-nav__item";
-const NavBarItem = ({ children, hasFocus = false, actionElt, ariaLabel = "", tabIndex = -1, role = "menuitem", className = defaultClassName, ...otherProps }) => {
+const NavBarItem = ({ children, hasFocus = false, actionElt, ariaLabel = "", tabIndex = -1, role = "menuitem", className, active = false, ...otherProps }) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [position, setPosition] = useState(0);
     const moveBykey = useCallback((key) => {
@@ -44,11 +45,17 @@ const NavBarItem = ({ children, hasFocus = false, actionElt, ariaLabel = "", tab
         }
     }, [children, isMenuOpen, position, moveBykey, openMenu, closeMenu]);
     const renderChild = useCallback((child, childIndex) => React.cloneElement(child, {
-        classModifier: childIndex === position && isMenuOpen ? " active" : undefined,
+        className: child.props.className,
+        "aria-current": childIndex === position && isMenuOpen ? "page" : 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 }));
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: [active ? "active" : ""],
+        className,
+    });
+    return (_jsx(NavBarItemBase, { className: componentClassName, 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

@@ -4,7 +4,6 @@ type Props = HTMLAttributes<HTMLLIElement> & {
     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 declare const NavBarItemBase: ({ tabIndex, role, children, hasFocus, handleKeys, isMenuOpen, className, actionElt, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, } from "react";
-import { getComponentClassName } from "../../../../utilities";
+import { getClassName } 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");
+export const NavBarItemBase = ({ tabIndex = -1, role = "menuitem", children, hasFocus, handleKeys, isMenuOpen, className, actionElt, ...otherProps }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-nav__item",
+        className,
+    });
     const ref = useRef(null);
     useEffect(() => {
         handleLinkFocus(ref?.current, hasFocus, isMenuOpen);
@@ -15,5 +18,5 @@ export const NavBarItemBase = ({ tabIndex = -1, role = "menuitem", children, has
     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] }));
+        }, children: [_jsx(actionElt.type, { ...actionElt.props, ...otherProps, role: role, tabIndex: tabIndex, "aria-expanded": isMenuOpen }, actionElt.key), children] }));
 };

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

@@ -13,16 +13,6 @@ type Props = {
      * Children elements to be rendered next to the user's name and role
      */
     children?: ReactNode;
-    /**
-     * Class modifier to apply additional styles\
-     * @example
-     * ```tsx
-     * <User classModifier="custom-class" />
-     * ```
-     * This will apply the class `af-info-user--custom-class` to the component.
-     * @deprecated Use `className` instead.
-     */
-    classModifier?: string;
     /**
      * classNames to override completely the component's style
      */
@@ -57,5 +47,5 @@ type Props = {
      */
     title?: string;
 };
-declare const User: ({ children, classModifier, className, href, name, path, profile, onClick, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const User: ({ children, className, href, name, path, profile, onClick, title, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { User };

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

@@ -3,10 +3,9 @@ import "@axa-fr/canopee-css/distributeur/Layout/Header/User/User.css";
 import { getClassName } from "../../../utilities/helpers/getClassName";
 import { InnerUser } from "./InnerUser";
 const defaultClassName = "af-info-user";
-const User = ({ children, classModifier, className, href, name, path, profile, onClick, title = "Voir mon profil", }) => {
+const User = ({ children, className, href, name, path, profile, onClick, title = "Voir mon profil", }) => {
     const componentClassName = getClassName({
         baseClassName: defaultClassName,
-        modifiers: classModifier?.split(" "),
         className,
     });
     return (_jsxs("div", { className: componentClassName, children: [href ? (_jsx("a", { "aria-label": "user info link", className: `${defaultClassName}__link`, href: href, title: title, onClick: (event) => onClick && onClick({ path, event }), children: _jsx(InnerUser, { name: name, profile: profile }) })) : (_jsx(InnerUser, { name: name, profile: profile })), children] }));

package/dist/distributeur/Link/Link.d.ts

@@ -2,4 +2,7 @@ import "@axa-fr/canopee-css/distributeur/Link/Link.css";
 import { type CustomLinkProps } from "./CustomLink";
 import { type LinkComponentProps } from "./LinkAnchor";
 export type LinkProps = LinkComponentProps | CustomLinkProps;
-export declare const Link: import("react").ForwardRefExoticComponent<(CustomLinkProps | Omit<LinkComponentProps, "ref">) & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const Link: {
+    ({ ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/distributeur/Link/Link.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Link/Link.css";
-import { forwardRef } from "react";
 import { CustomLink } from "./CustomLink";
 import { LinkAnchor } from "./LinkAnchor";
-export const Link = forwardRef((props, ref) => {
+export const Link = ({ ...props }) => {
     if ("render" in props) {
         return _jsx(CustomLink, { ...props });
     }
-    return _jsx(LinkAnchor, { ...props, ref: ref });
-});
+    return _jsx(LinkAnchor, { ...props });
+};
 Link.displayName = "Link";

package/dist/distributeur/Link/LinkAnchor.d.ts

@@ -1,12 +1,13 @@
-import { type ComponentPropsWithRef, type ReactElement } from "react";
-import { Svg } from "../Svg";
-type AnchorLinkProps = {
-    leftIcon?: ReactElement<typeof Svg>;
-    rightIcon?: ReactElement<typeof Svg>;
+import { type AnchorHTMLAttributes } from "react";
+import { type ClickableComponentProps } from "../ClickableGhost";
+type AnchorLinkProps = ClickableComponentProps & {
     className?: string;
     disabled?: boolean;
     variant?: "default" | "reverse";
 };
-type LinkComponentProps = ComponentPropsWithRef<"a"> & AnchorLinkProps;
-declare const LinkAnchor: import("react").ForwardRefExoticComponent<Omit<LinkComponentProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & AnchorLinkProps;
+declare const LinkAnchor: {
+    ({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }: LinkComponentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { LinkAnchor, type LinkComponentProps };

package/dist/distributeur/Link/LinkAnchor.js

@@ -1,13 +1,13 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { forwardRef, } from "react";
-import { Svg } from "../Svg";
+import {} from "react";
 import { linkClassName } from "./linkClassName";
-const LinkAnchor = forwardRef(({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }, ref) => {
+import { ClickableGhost, } from "../ClickableGhost";
+const LinkAnchor = ({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }) => {
     const finalClassName = classnames(linkClassName, className, {
         [`${linkClassName}--reverse`]: variant === "reverse",
     });
-    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
-});
+    return (_jsxs(ClickableGhost, { component: "a", className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
+};
 LinkAnchor.displayName = "LinkAnchor";
 export { LinkAnchor };