@axa-fr/canopee-react 1.7.1-alpha.18 → 1.7.1-alpha.20

package/dist/client.d.ts

@@ -53,6 +53,7 @@ export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, ty
 export { ContentItemDuo } from "./prospect-client/List/ContentItemDuo/ContentItemDuoLF";
 export { List, type ListProps } from "./prospect-client/List/List/ListLF";
 export { Message, messageVariants, type MessageVariants, } from "./prospect-client/Message/MessageLF";
+export { MultiMessage, type MultiMessageItem, type MultiMessageProps, } from "./prospect-client/MultiMessage/MultiMessageLF";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./prospect-client/Modal/ModalLF";
 export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";

package/dist/client.js

@@ -53,6 +53,7 @@ export { ClickItem, clickItemStates, clickItemVariants, } from "./prospect-clien
 export { ContentItemDuo } from "./prospect-client/List/ContentItemDuo/ContentItemDuoLF";
 export { List } from "./prospect-client/List/List/ListLF";
 export { Message, messageVariants, } from "./prospect-client/Message/MessageLF";
+export { MultiMessage, } from "./prospect-client/MultiMessage/MultiMessageLF";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./prospect-client/Modal/ModalLF";
 export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";

package/dist/prospect-client/Form/TextArea/TextAreaCommon.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
+import { getClassName } from "../../utilities/getClassName";
 import { ItemLabelCommon, } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage, } from "../ItemMessage/ItemMessageCommon";
 const TextAreaCommon = forwardRef(({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", containerProps, ...inputProps }, inputRef) => {
@@ -8,9 +9,14 @@ const TextAreaCommon = forwardRef(({ id, className, label, description, helper,
     const helperId = `${inputId}-helper`;
     const messageId = `${inputId}-error`;
     const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
+    const hasWarning = Boolean(message) && messageType === "warning" && !hasError;
+    const textareaClassName = getClassName({
+        baseClassName: "af-form__textarea",
+        modifiers: [hasWarning && "warning"],
+    });
     return (_jsxs("div", { className: ["af-form__input-container", className]
             .filter(Boolean)
-            .join(" "), ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: "af-form__textarea", ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
+            .join(" "), ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: textareaClassName, ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
 });
 TextAreaCommon.displayName = "TextArea";
 export { TextAreaCommon };

package/dist/prospect-client/MultiMessage/MultiMessage.helpers.d.ts

@@ -0,0 +1 @@
+export declare const clampIndex: (index: number, total: number) => number;

package/dist/prospect-client/MultiMessage/MultiMessage.helpers.js

@@ -0,0 +1,7 @@
+export const clampIndex = (index, total) => {
+    if (total <= 0 || index < 0)
+        return 0;
+    if (index >= total)
+        return total - 1;
+    return index;
+};

package/dist/prospect-client/MultiMessage/MultiMessageApollo.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/canopee-css/prospect/MultiMessage/MultiMessageApollo.css";
+import { type MultiMessageProps } from "./MultiMessageCommon";
+export { messageVariants, type MessageVariants, } from "../Message/MessageApollo";
+export type { MultiMessageProps } from "./MultiMessageCommon";
+export type { MultiMessageItem } from "./types";
+export declare const MultiMessage: (props: MultiMessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/MultiMessage/MultiMessageApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/MultiMessage/MultiMessageApollo.css";
+import { Message } from "../Message/MessageApollo";
+import { Pagination } from "../Pagination/PaginationApollo";
+import { MultiMessageCommon, } from "./MultiMessageCommon";
+export { messageVariants, } from "../Message/MessageApollo";
+export const MultiMessage = (props) => (_jsx(MultiMessageCommon, { ...props, MessageComponent: Message, PaginationComponent: Pagination }));

package/dist/prospect-client/MultiMessage/MultiMessageCommon.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentType } from "react";
+import type { MessageProps } from "../Message/MessageCommon";
+import type { PaginationProps } from "../Pagination/PaginationCommon";
+import type { MultiMessageItem } from "./types";
+type Headings = "h2" | "h3" | "h4" | "h5" | "h6";
+export type MultiMessageProps = {
+    /** Messages displayed inside the carousel */
+    items: MultiMessageItem[];
+    /** Controlled active index (zero-based) */
+    activeIndex?: number;
+    /** Default active index (zero-based) when uncontrolled */
+    defaultActiveIndex?: number;
+    /** Called when the user navigates between messages */
+    onChangeActive?: (index: number) => void;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** HTML heading level used for each message title */
+    heading?: Headings;
+    /** ARIA label for the previous button */
+    prevLabel?: string;
+    /** ARIA label for the next button */
+    nextLabel?: string;
+    /** Optional override for the previous button props */
+    prevButtonProps?: PaginationProps["prevButtonProps"];
+    /** Optional override for the next button props */
+    nextButtonProps?: PaginationProps["nextButtonProps"];
+} & Omit<MessageProps, "action" | "children" | "heading" | "iconSize" | "title" | "variant">;
+type MultiMessageCommonProps = MultiMessageProps & {
+    MessageComponent: ComponentType<MessageProps>;
+    PaginationComponent: ComponentType<PaginationProps>;
+};
+export declare const MultiMessageCommon: ({ items, activeIndex, defaultActiveIndex, onChangeActive, iconSize, heading: Heading, prevLabel, nextLabel, prevButtonProps, nextButtonProps, className, MessageComponent, PaginationComponent, ...sectionProps }: MultiMessageCommonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/prospect-client/MultiMessage/MultiMessageCommon.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getClassName } from "../utilities/getClassName";
+import { MultiMessageFooter } from "./MultiMessageFooter";
+import { clampIndex } from "./MultiMessage.helpers";
+const baseClassName = "af-multi-message";
+export const MultiMessageCommon = ({ items, activeIndex, defaultActiveIndex = 0, onChangeActive, iconSize = 24, heading: Heading = "h4", prevLabel = "Message précédent", nextLabel = "Message suivant", prevButtonProps, nextButtonProps, className, MessageComponent, PaginationComponent, ...sectionProps }) => {
+    const total = items.length;
+    const isControlled = activeIndex !== undefined;
+    const [internalIndex, setInternalIndex] = useState(clampIndex(defaultActiveIndex, total));
+    const currentIndex = clampIndex(isControlled ? activeIndex : internalIndex, total);
+    if (total === 0)
+        return null;
+    const item = items[currentIndex];
+    const hasMultiple = total > 1;
+    const goTo = (next) => {
+        const clamped = clampIndex(next, total);
+        if (clamped === currentIndex)
+            return;
+        if (!isControlled)
+            setInternalIndex(clamped);
+        onChangeActive?.(clamped);
+    };
+    return (_jsxs(MessageComponent, { className: getClassName({
+            baseClassName,
+            className,
+        }), variant: item.variant, title: item.title, iconSize: iconSize, heading: Heading, ...sectionProps, children: [item.children, _jsx(MultiMessageFooter, { action: item.action, currentIndex: currentIndex, hasMultiple: hasMultiple, nextButtonProps: nextButtonProps, nextLabel: nextLabel, onChangePage: goTo, PaginationComponent: PaginationComponent, prevButtonProps: prevButtonProps, prevLabel: prevLabel, total: total })] }));
+};

package/dist/prospect-client/MultiMessage/MultiMessageFooter.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from "react";
+import type { PaginationProps } from "../Pagination/PaginationCommon";
+import type { MultiMessageItem } from "./types";
+type MultiMessageFooterProps = {
+    action: MultiMessageItem["action"];
+    currentIndex: number;
+    hasMultiple: boolean;
+    nextButtonProps: PaginationProps["nextButtonProps"];
+    nextLabel: string;
+    onChangePage: (page: number) => void;
+    PaginationComponent: ComponentType<PaginationProps>;
+    prevButtonProps: PaginationProps["prevButtonProps"];
+    prevLabel: string;
+    total: number;
+};
+export declare const MultiMessageFooter: ({ action, currentIndex, hasMultiple, nextButtonProps, nextLabel, onChangePage, PaginationComponent, prevButtonProps, prevLabel, total, }: MultiMessageFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/prospect-client/MultiMessage/MultiMessageFooter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseClassName = "af-multi-message";
+export const MultiMessageFooter = ({ action, currentIndex, hasMultiple, nextButtonProps, nextLabel, onChangePage, PaginationComponent, prevButtonProps, prevLabel, total, }) => {
+    if (!hasMultiple && !action)
+        return null;
+    return (_jsxs("div", { className: `${baseClassName}__footer`, children: [hasMultiple ? (_jsx(PaginationComponent, { className: `${baseClassName}__pagination`, numberPages: total, currentPage: currentIndex + 1, onChangePage: (page) => onChangePage(page - 1), asItem: "button", "aria-label": "Pagination des messages", prevButtonProps: {
+                    "aria-label": prevLabel,
+                    ...prevButtonProps,
+                }, nextButtonProps: {
+                    "aria-label": nextLabel,
+                    ...nextButtonProps,
+                } })) : null, action ? (_jsx("div", { className: `${baseClassName}__action`, children: action })) : null] }));
+};

package/dist/prospect-client/MultiMessage/MultiMessageLF.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/canopee-css/client/MultiMessage/MultiMessageLF.css";
+import { type MultiMessageProps } from "./MultiMessageCommon";
+export { messageVariants, type MessageVariants } from "../Message/MessageLF";
+export type { MultiMessageProps } from "./MultiMessageCommon";
+export type { MultiMessageItem } from "./types";
+export declare const MultiMessage: (props: MultiMessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/MultiMessage/MultiMessageLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/MultiMessage/MultiMessageLF.css";
+import { Message } from "../Message/MessageLF";
+import { Pagination } from "../Pagination/PaginationLF";
+import { MultiMessageCommon, } from "./MultiMessageCommon";
+export { messageVariants } from "../Message/MessageLF";
+export const MultiMessage = (props) => (_jsx(MultiMessageCommon, { ...props, MessageComponent: Message, PaginationComponent: Pagination }));

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

@@ -0,0 +1,14 @@
+import type { ReactElement, ReactNode, ComponentType } from "react";
+import type { ButtonProps } from "../Button/ButtonCommon";
+import type { Link } from "../Link/LinkCommon";
+import type { MessageVariants } from "../Message/types";
+export type MultiMessageItem = {
+    /** Variant of the individual message */
+    variant: MessageVariants;
+    /** Title of the message */
+    title?: string;
+    /** Body content of the message */
+    children?: ReactNode;
+    /** Action (link or button) shown alongside the message body */
+    action?: ReactElement<typeof Link | ComponentType<ButtonProps>>;
+};

package/dist/prospect-client/MultiMessage/types.js

@@ -0,0 +1 @@
+export {};

package/dist/prospect-client/Pagination/PaginationCommon.d.ts

@@ -4,8 +4,8 @@ import { ItemPaginationCommon } from "./ItemPagination/ItemPaginationCommon";
 import { type getItemsProps } from "./Pagination.helper";
 export type PaginationProps = getItemsProps & ComponentPropsWithoutRef<"nav"> & {
     hidePrevNext?: boolean;
-    prevButtonProps?: ComponentProps<typeof ClickIcon>;
-    nextButtonProps?: ComponentProps<typeof ClickIcon>;
+    prevButtonProps?: Partial<ComponentProps<typeof ClickIcon>>;
+    nextButtonProps?: Partial<ComponentProps<typeof ClickIcon>>;
 };
 type PaginationCommonProps = PaginationProps & {
     ItemPaginationComponent: ComponentType<ComponentProps<typeof ItemPaginationCommon>>;

package/dist/prospect.d.ts

@@ -49,6 +49,7 @@ export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, ty
 export { ContentItemDuo } from "./prospect-client/List/ContentItemDuo/ContentItemDuoApollo";
 export { List, type ListProps } from "./prospect-client/List/List/ListApollo";
 export { Message, messageVariants, type MessageVariants, } from "./prospect-client/Message/MessageApollo";
+export { MultiMessage, type MultiMessageItem, type MultiMessageProps, } from "./prospect-client/MultiMessage/MultiMessageApollo";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./prospect-client/Modal/ModalApollo";
 export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationApollo";
 export { Pagination } from "./prospect-client/Pagination/PaginationApollo";

package/dist/prospect.js

@@ -49,6 +49,7 @@ export { ClickItem, clickItemStates, clickItemVariants, } from "./prospect-clien
 export { ContentItemDuo } from "./prospect-client/List/ContentItemDuo/ContentItemDuoApollo";
 export { List } from "./prospect-client/List/List/ListApollo";
 export { Message, messageVariants, } from "./prospect-client/Message/MessageApollo";
+export { MultiMessage, } from "./prospect-client/MultiMessage/MultiMessageApollo";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./prospect-client/Modal/ModalApollo";
 export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationApollo";
 export { Pagination } from "./prospect-client/Pagination/PaginationApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.7.1-alpha.18",
+  "version": "1.7.1-alpha.20",
   "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.7.1-alpha.18",
+    "@axa-fr/canopee-css": "1.7.1-alpha.20",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"