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

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/Toggle/ToggleApollo.d.ts

@@ -1,2 +1,3 @@
 import "@axa-fr/canopee-css/prospect/Toggle/ToggleApollo.css";
-export { Toggle } from "./ToggleCommon";
+import { type ToggleProps } from "./ToggleCommon";
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/prospect-client/Toggle/ToggleApollo.js

@@ -1,2 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/prospect/Toggle/ToggleApollo.css";
-export { Toggle } from "./ToggleCommon";
+import { forwardRef } from "react";
+import { Icon } from "../Icon/IconApollo";
+import { ToggleCommon } from "./ToggleCommon";
+export const Toggle = forwardRef((props, ref) => _jsx(ToggleCommon, { IconComponent: Icon, ...props, ref: ref }));
+Toggle.displayName = "Toggle";

package/dist/prospect-client/Toggle/ToggleCommon.d.ts

@@ -1,3 +1,9 @@
-import { type InputHTMLAttributes } from "react";
+import { type ComponentType, type InputHTMLAttributes } from "react";
+import type { IconProps } from "../Icon/IconCommon";
 export type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, "style" | "type">;
-export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export type ToggleCommonProps = ToggleProps & {
+    IconComponent: ComponentType<IconProps>;
+};
+export declare const ToggleCommon: import("react").ForwardRefExoticComponent<ToggleProps & {
+    IconComponent: ComponentType<IconProps>;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/prospect-client/Toggle/ToggleCommon.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import check from "@material-symbols/svg-400/rounded/check.svg";
+import close from "@material-symbols/svg-400/rounded/close.svg";
+import { forwardRef, useId, } from "react";
 import { getComponentClassName } from "../utilities/getComponentClassName";
-export const Toggle = forwardRef(({ className, ...inputProps }, ref) => {
+export const ToggleCommon = forwardRef(({ className, IconComponent, ...inputProps }, ref) => {
     let inputId = useId();
     inputId = inputProps.id ?? inputId;
-    return (_jsxs("label", { className: getComponentClassName("af-toggle", className), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsx("span", { className: "af-toggle__handle" }) }), _jsx("input", { ...inputProps, ref: ref, type: "checkbox", id: inputId })] }));
+    return (_jsxs("label", { className: getComponentClassName("af-toggle", className), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsxs("span", { className: "af-toggle__handle", children: [_jsx(IconComponent, { src: check, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--check", size: "XS" }), _jsx(IconComponent, { src: close, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--close", size: "XS" })] }) }), _jsx("input", { ...inputProps, ref: ref, type: "checkbox", id: inputId })] }));
 });
-Toggle.displayName = "Toggle";
+ToggleCommon.displayName = "ToggleCommon";

package/dist/prospect-client/Toggle/ToggleLF.d.ts

@@ -1,2 +1,3 @@
 import "@axa-fr/canopee-css/client/Toggle/ToggleLF.css";
-export { Toggle } from "./ToggleCommon";
+import { type ToggleProps } from "./ToggleCommon";
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/prospect-client/Toggle/ToggleLF.js

@@ -1,2 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Toggle/ToggleLF.css";
-export { Toggle } from "./ToggleCommon";
+import { forwardRef } from "react";
+import { Icon } from "../Icon/IconLF";
+import { ToggleCommon } from "./ToggleCommon";
+export const Toggle = forwardRef((props, ref) => _jsx(ToggleCommon, { IconComponent: Icon, ...props, ref: ref }));
+Toggle.displayName = "Toggle";

package/package.json

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