@axa-fr/canopee-react 1.5.1-alpha.3 → 1.5.1-alpha.31

package/dist/prospect-client/DataAgent/DataAgentCommon.d.ts

@@ -11,11 +11,13 @@ export type DataAgentProps = {
     clickContents?: TupleMax3<ClickItemProps>;
     texteOrias?: string;
     isCompact?: boolean;
+    /** Display the compact layout (header only) regardless of screen size */
+    variant?: "default" | "compact";
 };
 type DataAgentCommonProps = DataAgentProps & {
     DividerComponent: ComponentType<ComponentProps<typeof Divider>>;
     ContentItemMonoComponent: ComponentType<ContentItemProps>;
     ClickItemComponent: ComponentType<ClickItemProps>;
 };
-export declare const DataAgentCommon: ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, isCompact, }: DataAgentCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataAgentCommon: ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, isCompact, variant, }: DataAgentCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/prospect-client/DataAgent/DataAgentCommon.js

@@ -4,7 +4,7 @@ import { Divider } from "../Divider/DividerCommon";
 import { BREAKPOINT } from "../utilities/constants";
 import { getComponentClassName } from "../utilities/getComponentClassName";
 import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
-export const DataAgentCommon = ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, isCompact = true, }) => {
+export const DataAgentCommon = ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, isCompact = true, variant = "default", }) => {
     const componentClassName = useMemo(() => getComponentClassName("af-data-agent", className), [className]);
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     const renderForDefaultLayout = () => (_jsxs(_Fragment, { children: [_jsxs("section", { className: "af-data-agent__intro", children: [_jsx(ContentItemMonoComponent, { ...agentProps, type: "picture" }), agentContractProps ? (_jsx(ContentItemMonoComponent, { ...agentContractProps, type: "stick" })) : null] }), _jsx(DividerComponent, {}), contents && contents?.length > 0 ? (_jsx("section", { className: "af-data-agent__info-content", children: contents.map((content) => (_jsxs(Fragment, { children: [_jsx(ContentItemMonoComponent, { ...content, type: "icon" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `content--${crypto.randomUUID()}`))) })) : null, clickContents && clickContents?.length > 0 ? (_jsx("section", { className: "af-data-agent__info-click-content", children: clickContents.map((clickContent) => (_jsxs(Fragment, { children: [_jsx(ClickItemComponent, { ...clickContent, variant: "small" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `clickContent--${crypto.randomUUID()}`))) })) : null, Boolean(texteOrias) && (_jsx("p", { className: "af-data-agent__text-orias", children: texteOrias }))] }));
@@ -12,7 +12,7 @@ export const DataAgentCommon = ({ className, agentProps, agentContractProps, con
                 src: agentProps.picture,
                 alt: agentProps.title,
             }, variant: "agent" }) }));
-    return (_jsx("section", { className: componentClassName, children: isMobile && isCompact
+    return (_jsx("section", { className: componentClassName, children: (isMobile && isCompact) || variant === "compact"
             ? renderForMobileLayout()
             : renderForDefaultLayout() }));
 };

package/dist/prospect-client/Form/InputDate/InputDateCommon.js

@@ -6,11 +6,6 @@ import { ItemMessage, } from "../ItemMessage/ItemMessageCommon";
 import { InputDateAtom } from "./InputDateAtom";
 import { InputDateTextAtom } from "./InputDateTextAtom";
 const InputDateCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, ItemLabelComponent, ItemMessageComponent, required, hidePicker, max, min, containerProps, ...otherProps }, inputRef) => {
-    const componentClassName = getClassName({
-        baseClassName: "af-form__input-date",
-        modifiers: classModifier.split(" "),
-        className,
-    });
     let inputId = useId();
     inputId = otherProps.id ?? inputId;
     const idMessage = useId();
@@ -26,6 +21,12 @@ const InputDateCommon = forwardRef(({ className, classModifier = "", helper, err
     const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
     const ariaErrormessage = hasError ? idMessage : undefined;
     const ariaInvalid = hasError || undefined;
+    const hasWarning = Boolean(message) && messageType === "warning" && !hasError;
+    const componentClassName = getClassName({
+        baseClassName: "af-form__input-date",
+        modifiers: [...classModifier.split(" "), hasWarning && "warning"],
+        className,
+    });
     return (_jsxs("div", { className: "af-form__input-container", ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, required: required, htmlFor: inputId, children: label }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required, max: max, min: min })), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });
 InputDateCommon.displayName = "InputDate";

package/dist/prospect-client/Form/InputText/InputTextCommon.js

@@ -11,7 +11,7 @@ const InputTextCommon = forwardRef(({ unit, className, classModifier = "", helpe
     const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
     return (_jsxs("div", { className: "af-form__input-container", ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: className, classModifier: classModifier, error: (message && messageType === "error") || Boolean(error)
                     ? messageType || error
-                    : undefined, required: required, idMessage: message || error ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, ...otherProps }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
+                    : undefined, warning: message && messageType === "warning" ? messageType : undefined, required: required, idMessage: message || error ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, ...otherProps }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });
 InputTextCommon.displayName = "InputText";
 export { InputTextCommon };

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomCommon.d.ts

@@ -3,6 +3,7 @@ type InputTextAtomProps = ComponentPropsWithRef<"input"> & {
     unit?: ReactNode;
     classModifier?: string;
     error?: string;
+    warning?: string;
     idMessage?: string;
     idHelp?: string;
 };

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomCommon.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import { getClassName } from "../../utilities/getClassName";
-const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }, inputRef) => {
+const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, warning, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }, inputRef) => {
     const componentClassName = getClassName({
         baseClassName: "af-form__input-text",
-        modifiers: [classModifier, error || ariaErrormessage ? "error" : ""],
+        modifiers: [
+            classModifier,
+            error || ariaErrormessage ? "error" : "",
+            !error && !ariaErrormessage && warning ? "warning" : "",
+        ],
         className,
     });
     let inputId = useId();

package/dist/prospect-client/Heading/HeadingCommon.d.ts

@@ -6,10 +6,11 @@ export type HeadingCommonProps = PropsWithChildren<{
     level?: HeadingLevel;
     icon?: string;
     iconProps?: Omit<IconProps, "src">;
+    iconPosition?: "start" | "top";
     tag?: ReactNode;
     firstSubtitle?: ReactNode;
     secondSubtitle?: ReactNode;
     className?: string;
 }> & JSX.IntrinsicElements["div"];
 export declare const DEFAULT_TAG_PROPS: TagProps;
-export declare const HeadingCommon: ({ children: title, className, firstSubtitle, secondSubtitle, level, icon, iconProps, tag, ...props }: HeadingCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HeadingCommon: ({ children: title, className, firstSubtitle, secondSubtitle, level, icon, iconProps, iconPosition, tag, ...props }: HeadingCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Heading/HeadingCommon.js

@@ -9,10 +9,11 @@ import { getClassName } from "../utilities/getClassName";
 export const DEFAULT_TAG_PROPS = {
     variant: "neutral",
 };
-export const HeadingCommon = ({ children: title, className, firstSubtitle, secondSubtitle, level = 1, icon, iconProps = {}, tag, ...props }) => {
+export const HeadingCommon = ({ children: title, className, firstSubtitle, secondSubtitle, level = 1, icon, iconProps = {}, iconPosition = "start", tag, ...props }) => {
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     return (_jsxs("div", { className: getClassName({
             baseClassName: "af-heading",
+            modifiers: [iconPosition === "top" && "icon-top"],
             className,
         }), ...props, children: [tag && level < 3 ? _jsx("div", { className: "af-heading__label", children: tag }) : null, icon ? (_jsx(Icon, { src: icon, size: isMobile
                     ? headingLevelToIconSizeMobile[level]

package/dist/prospect-client/Modal/ModalApollo.js

@@ -3,11 +3,15 @@ import "@axa-fr/canopee-css/prospect/Modal/ModalApollo.css";
 import { forwardRef } from "react";
 import { Button } from "../Button/ButtonApollo";
 import { Heading } from "../Heading/HeadingApollo";
-import { Icon } from "../Icon/IconApollo";
 import { ModalCommon } from "./ModalCommon";
 export { ModalCore } from "./components/ModalCore";
 export { ModalCoreBody, } from "./components/ModalCoreBody";
 export { ModalCoreFooter } from "./components/ModalCoreFooterApollo";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderApollo";
-export const Modal = forwardRef(({ headingProps = {}, icon, iconProps = {}, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: { ...headingProps, children: props.title }, iconComponent: icon ? Icon : undefined, iconProps: icon ? { src: icon, ...iconProps } : undefined, buttonComponent: Button })));
+export const Modal = forwardRef(({ headingProps = {}, icon, iconProps, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: {
+        ...headingProps,
+        children: props.title,
+        icon: headingProps.icon ?? icon,
+        iconProps: headingProps.iconProps ?? iconProps,
+    }, buttonComponent: Button })));
 Modal.displayName = "Modal";

package/dist/prospect-client/Modal/ModalCommon.js

@@ -4,5 +4,5 @@ import { ModalCore } from "./components/ModalCore";
 import { ModalCoreBody, } from "./components/ModalCoreBody";
 import { ModalCoreFooterCommon, } from "./components/ModalCoreFooterCommon";
 import { ModalCoreHeaderCommon } from "./components/ModalCoreHeaderCommon";
-export const ModalCommon = forwardRef(({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconComponent, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }, ref) => (_jsxs(ModalCore, { onClose: onClose, ref: ref, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, iconComponent: iconComponent, iconProps: iconProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] })));
+export const ModalCommon = forwardRef(({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }, ref) => (_jsxs(ModalCore, { onClose: onClose, ref: ref, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, iconProps: iconProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] })));
 ModalCommon.displayName = "ModalCommon";

package/dist/prospect-client/Modal/ModalLF.js

@@ -3,11 +3,15 @@ import "@axa-fr/canopee-css/client/Modal/ModalLF.css";
 import { forwardRef } from "react";
 import { Button } from "../Button/ButtonLF";
 import { Heading } from "../Heading/HeadingLF";
-import { Icon } from "../Icon/IconLF";
 import { ModalCommon } from "./ModalCommon";
 export { ModalCore } from "./components/ModalCore";
 export { ModalCoreBody, } from "./components/ModalCoreBody";
 export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
-export const Modal = forwardRef(({ headingProps = {}, icon, iconProps = {}, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: { ...headingProps, children: props.title }, iconComponent: icon ? Icon : undefined, iconProps: icon ? { src: icon, ...iconProps } : undefined, buttonComponent: Button })));
+export const Modal = forwardRef(({ headingProps = {}, icon, iconProps, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: {
+        ...headingProps,
+        children: props.title,
+        icon: headingProps.icon ?? icon,
+        iconProps: headingProps.iconProps ?? iconProps,
+    }, buttonComponent: Button })));
 Modal.displayName = "Modal";

package/dist/prospect-client/Modal/components/ModalCoreHeaderApollo.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Heading } from "../../Heading/HeadingApollo";
-import { Icon } from "../../Icon/IconApollo";
 import { ModalCoreHeaderCommon } from "./ModalCoreHeaderCommon";
-export const ModalCoreHeader = (args) => (_jsx(ModalCoreHeaderCommon, { headingComponent: Heading, iconComponent: Icon, ...args }));
+export const ModalCoreHeader = (args) => (_jsx(ModalCoreHeaderCommon, { headingComponent: Heading, ...args }));

package/dist/prospect-client/Modal/components/ModalCoreHeaderCommon.d.ts

@@ -5,9 +5,13 @@ export type ModalCoreHeaderContainerProps = ComponentPropsWithoutRef<"header">;
 export type ModalCoreHeaderCommonProps = ModalCoreHeaderContainerProps & {
     headingComponent: ComponentType<HeadingProps>;
     headingProps: HeadingProps;
-    iconComponent?: ComponentType<IconProps>;
+    /**
+     * @deprecated Pass `icon` and `iconProps` (without `src`) inside
+     * `headingProps` instead. The legacy `iconProps` is forwarded to the
+     * Heading molecule for backward compatibility and will be removed in 2.0.0.
+     */
     iconProps?: IconProps;
     onClose?: VoidFunction;
     closeButtonAriaLabel?: string;
 };
-export declare const ModalCoreHeaderCommon: ({ className, headingComponent: HeadingComponent, headingProps, iconComponent: IconComponent, iconProps, onClose, closeButtonAriaLabel, ...props }: ModalCoreHeaderCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalCoreHeaderCommon: (props: ModalCoreHeaderCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Modal/components/ModalCoreHeaderCommon.js

@@ -1,4 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import close from "@material-symbols/svg-400/rounded/close.svg";
 import { ClickIcon } from "../../ClickIcon/ClickIconCommon";
-export const ModalCoreHeaderCommon = ({ className, headingComponent: HeadingComponent, headingProps, iconComponent: IconComponent, iconProps, onClose, closeButtonAriaLabel = "Fermer la boite de dialogue", ...props }) => (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(ClickIcon, { className: "af-modal__header-close-btn", src: close, onClick: onClose, "aria-label": closeButtonAriaLabel }), _jsxs("div", { className: "af-modal__header-title", children: [IconComponent && iconProps ? (_jsx(IconComponent, { size: "M", ...iconProps })) : null, _jsx(HeadingComponent, { level: 2, ...headingProps })] })] }));
+export const ModalCoreHeaderCommon = (props) => {
+    const { className, headingComponent: HeadingComponent, headingProps, iconProps, onClose, closeButtonAriaLabel = "Fermer la boite de dialogue", ...rest } = props;
+    // Backward-compat: legacy `iconProps` (with `src`) is routed through the
+    // Heading molecule, which already renders the icon and title together.
+    const { src: legacyIconSrc, ...legacyIconRest } = iconProps ?? {};
+    const mergedHeadingProps = legacyIconSrc
+        ? {
+            ...headingProps,
+            icon: headingProps.icon ?? legacyIconSrc,
+            iconProps: { ...legacyIconRest, ...(headingProps.iconProps ?? {}) },
+        }
+        : headingProps;
+    return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...rest, children: [_jsx(ClickIcon, { className: "af-modal__header-close-btn", src: close, onClick: onClose, "aria-label": closeButtonAriaLabel }), _jsx("div", { className: "af-modal__header-title", children: _jsx(HeadingComponent, { level: 2, ...mergedHeadingProps }) })] }));
+};

package/dist/prospect-client/Modal/components/ModalCoreHeaderLF.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Heading } from "../../Heading/HeadingLF";
-import { Icon } from "../../Icon/IconLF";
 import { ModalCoreHeaderCommon } from "./ModalCoreHeaderCommon";
-export const ModalCoreHeader = (args) => (_jsx(ModalCoreHeaderCommon, { headingComponent: Heading, iconComponent: Icon, ...args }));
+export const ModalCoreHeader = (args) => (_jsx(ModalCoreHeaderCommon, { headingComponent: Heading, ...args }));

package/dist/prospect-client/Modal/types.d.ts

@@ -3,10 +3,22 @@ import type { IconProps } from "../Icon/IconCommon";
 import type { ModalCoreFooterCommonProps } from "./components/ModalCoreFooterCommon";
 import type { ModalCoreHeaderCommonProps } from "./components/ModalCoreHeaderCommon";
 import type { ModalCommonProps } from "./ModalCommon";
-export type ModalCoreHeaderProps = Omit<ModalCoreHeaderCommonProps, "headingComponent" | "iconComponent">;
+export type ModalCoreHeaderProps = Omit<ModalCoreHeaderCommonProps, "headingComponent">;
 export type ModalCoreFooterProps = Omit<ModalCoreFooterCommonProps, "buttonComponent">;
-export type ModalProps = Omit<ModalCommonProps, "headingComponent" | "headingProps" | "iconComponent" | "iconProps" | "buttonComponent"> & {
+export type ModalProps = Omit<ModalCommonProps, "headingComponent" | "headingProps" | "iconProps" | "buttonComponent"> & {
     headingProps?: Omit<HeadingProps, "children">;
+    /**
+     * @deprecated Pass `icon` inside `headingProps` instead
+     * (e.g. `headingProps={{ icon }}`). The top-level `icon` prop is
+     * forwarded to the Heading molecule for backward compatibility and will
+     * be removed in 2.0.0.
+     */
     icon?: string;
+    /**
+     * @deprecated Pass `iconProps` inside `headingProps` instead
+     * (e.g. `headingProps={{ iconProps }}`). The top-level `iconProps`
+     * is forwarded to the Heading molecule for backward compatibility and
+     * will be removed in 2.0.0.
+     */
     iconProps?: Omit<IconProps, "src">;
 };

package/dist/prospect-client/TabBar/TabBarCommon.d.ts

@@ -8,6 +8,7 @@ export type TabBarDirection = keyof typeof tabBarDirection;
 export type TabBarProps = {
     items: ({
         content: ReactNode;
+        handleSelectTab?: () => void;
     } & Omit<ItemTabBarProps, "content">)[];
     preSelectedTabIndex?: number;
     direction?: TabBarDirection;

package/dist/prospect-client/TabBar/TabBarCommon.js

@@ -13,11 +13,16 @@ export const TabBarCommon = ({ items, preSelectedTabIndex, direction = "left", I
     const tablistRef = useRef(null);
     const totalTabs = items.length;
     const isActive = (index) => index === selectedTabIndex;
+    const handleClickFn = (index) => {
+        setSelectedTabIndex(index);
+        items[index]?.handleSelectTab?.();
+    };
     const onChangeTab = useCallback((e) => {
         const firstTabIndex = 0;
         const lastTabIndex = totalTabs - 1;
         const goToNextTab = (nextTabIndex) => {
             setSelectedTabIndex(nextTabIndex);
+            items[nextTabIndex]?.handleSelectTab?.();
             buttonRefs.current[nextTabIndex].focus();
             e.stopPropagation();
             e.preventDefault();
@@ -43,7 +48,7 @@ export const TabBarCommon = ({ items, preSelectedTabIndex, direction = "left", I
                 break;
         }
     }, [selectedTabIndex, totalTabs]);
-    return (_jsxs("div", { className: classNames(CLASS_NAME, direction === tabBarDirection.center ? `${CLASS_NAME}--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map(({ title }, index) => (_jsx(ItemTabBarComponent, { id: `tab-${index}`, "aria-selected": isActive(index), "aria-controls": `tabpanel-${index}`, onKeyDown: onChangeTab, onClick: () => setSelectedTabIndex(index), ref: (element) => {
+    return (_jsxs("div", { className: classNames(CLASS_NAME, direction === tabBarDirection.center ? `${CLASS_NAME}--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map(({ title }, index) => (_jsx(ItemTabBarComponent, { id: `tab-${index}`, "aria-selected": isActive(index), "aria-controls": `tabpanel-${index}`, onKeyDown: onChangeTab, onClick: () => handleClickFn(index), ref: (element) => {
                         buttonRefs.current[index] = element;
                     }, tabIndex: isActive(index) ? 0 : -1, title: title }, `tab-${title}`))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", "aria-hidden": !isActive(index), id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, children: item.content }, `tabpanel-${item.title}`)))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.5.1-alpha.3",
+  "version": "1.5.1-alpha.31",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -49,7 +49,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.5.1-alpha.3",
+    "@axa-fr/canopee-css": "1.5.1-alpha.31",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"