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

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/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.30",
   "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.30",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"