@axa-fr/design-system-look-and-feel-react 1.0.5-ci.28 → 1.0.5-ci.29

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type ModalCoreProps } from "./ModalCore";
+import { type ModalCoreHeaderProps } from "./components/ModalCoreHeader";
+export type ModalProps = Omit<ModalCoreProps, "onOutsideTap" | "title"> & ModalCoreHeaderProps & {
+    onSubmit?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    submitTitle?: string;
+    cancelTitle?: string;
+    submitDisabled?: boolean;
+    cancelDisabled?: boolean;
+};
+declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+export { Modal };

package/dist/Modal/Modal.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ModalCore } from "./ModalCore";
+import { ButtonClient, Variants as ButtonVariants } from "../Button/Button";
+import { ModalCoreHeader, } from "./components/ModalCoreHeader";
+import { ModalCoreBody } from "./components/ModalCoreBody";
+import { ModalCoreFooter } from "./components/ModalCoreFooter";
+const Modal = forwardRef(({ children, title, submitTitle, cancelTitle, className, onCancel, onSubmit, closeButtonAriaLabel, cancelDisabled, submitDisabled, subtitle, iconTitle, levelTitle, ...props }, ref) => (_jsxs(ModalCore, { className: className, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(ModalCoreHeader, { title: title, subtitle: subtitle, iconTitle: iconTitle, levelTitle: levelTitle, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(ModalCoreBody, { children: children }), _jsxs(ModalCoreFooter, { children: [onCancel && cancelTitle && (_jsx(ButtonClient, { variant: ButtonVariants.secondary, onClick: onCancel, disabled: cancelDisabled, children: cancelTitle })), onSubmit && submitTitle && (_jsx(ButtonClient, { variant: ButtonVariants.primary, onClick: onSubmit, disabled: submitDisabled, children: submitTitle }))] })] })));
+Modal.displayName = "Modal";
+export { Modal };

package/dist/Modal/ModalCore.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+export type ModalCoreProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & {
+    className?: string;
+    title: string;
+    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    children: ReactNode;
+    ref?: React.Ref<HTMLDialogElement>;
+};
+declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export { ModalCore };

package/dist/Modal/ModalCore.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+const ModalCore = forwardRef(({ className, title = "", onOutsideTap, children, ...props }, ref) => (_jsx("dialog", { "aria-describedby": title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) })));
+ModalCore.displayName = "ModalCore";
+export { ModalCore };

package/dist/Modal/components/ModalCoreBody.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreBody: ({ children, className, ...otherProps }: ModalCoreBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreBody.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreBody = ({ children, className, ...otherProps }) => (_jsx("section", { className: ["af-modal__body", className].filter(Boolean).join(" "), ...otherProps, children: children }));

package/dist/Modal/components/ModalCoreFooter.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreFooter: ({ className, ...rest }: ModalCoreFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreFooter.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreFooter = ({ className, ...rest }) => (_jsx("footer", { className: ["af-modal__footer", className].filter(Boolean).join(" "), ...rest }));

package/dist/Modal/components/ModalCoreHeader.d.ts

@@ -0,0 +1,11 @@
+import type { TitleLevel } from "../../Title";
+export type ModalCoreHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    title: string;
+    subtitle?: string;
+    iconTitle?: string;
+    levelTitle?: TitleLevel;
+    onCancel: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    closeButtonAriaLabel?: string;
+};
+export declare const ModalCoreHeader: ({ className, title, subtitle, iconTitle, levelTitle, onCancel, closeButtonAriaLabel, ...props }: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import closeSmall from "@material-symbols/svg-400/outlined/close.svg";
+import { ButtonClient, Variants } from "../../Button/Button";
+import { Svg } from "../../Svg";
+export const ModalCoreHeader = ({ className, title, subtitle, iconTitle, levelTitle = 2, onCancel, closeButtonAriaLabel = "Fermer la boite de dialogue", ...props }) => {
+    const HLevel = `h${levelTitle}`;
+    return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(ButtonClient, { variant: Variants.ghost, iconLeft: _jsx(Svg, { src: closeSmall, width: 32, height: 32, role: "graphics-document" }), "aria-label": closeButtonAriaLabel, onClick: onCancel }), _jsxs("div", { className: "af-modal__header-title", children: [iconTitle && (_jsx(Svg, { src: iconTitle, width: 32, height: 32, role: "graphics-document" })), _jsx(HLevel, { className: "af-modal__header-title-heading", children: title }), subtitle && (_jsx("span", { className: "af-modal__header-title-subtitle", children: subtitle }))] })] }));
+};

package/dist/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export { Modal, type ModalProps } from "./Modal";
+export { ModalCore, type ModalCoreProps } from "./ModalCore";
+export { ModalCoreFooter, type ModalCoreFooterProps, } from "./components/ModalCoreFooter";
+export { ModalCoreHeader, type ModalCoreHeaderProps, } from "./components/ModalCoreHeader";
+export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreBody";

package/dist/Modal/index.js

@@ -0,0 +1,5 @@
+export { Modal } from "./Modal";
+export { ModalCore } from "./ModalCore";
+export { ModalCoreFooter, } from "./components/ModalCoreFooter";
+export { ModalCoreHeader, } from "./components/ModalCoreHeader";
+export { ModalCoreBody, } from "./components/ModalCoreBody";

package/dist/index.d.ts

@@ -22,8 +22,6 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
-export type { ButtonAction as ModalButtonAction } from "./ModalClient/type";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -34,3 +32,5 @@ export { Tag } from "./Tag";
 export { Title, TitleSize, type TitleLevel } from "./Title";
 export { DebugGrid } from "./Grid/DebugGrid";
 export { Divider } from "./Divider";
+export { Modal, ModalCore, ModalCoreHeader, ModalCoreFooter, ModalCoreBody, } from "./Modal";
+export type { ModalProps, ModalCoreProps, ModalCoreHeaderProps, ModalCoreFooterProps, ModalCoreBodyProps, } from "./Modal";

package/dist/index.js

@@ -21,7 +21,6 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -32,3 +31,4 @@ export { Tag } from "./Tag";
 export { Title, TitleSize } from "./Title";
 export { DebugGrid } from "./Grid/DebugGrid";
 export { Divider } from "./Divider";
+export { Modal, ModalCore, ModalCoreHeader, ModalCoreFooter, ModalCoreBody, } from "./Modal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.28",
+  "version": "1.0.5-ci.29",
   "description": "",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.28",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.29",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },

package/dist/ModalClient/Modal.container.d.ts

@@ -1,4 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { PropsWithChildren } from "react";
-import { ModalProps } from "./type";
-export declare const ModalContainer: ({ open, setIsOpen, hasCloseButton, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react").ReactPortal;

package/dist/ModalClient/Modal.container.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { useEffect, useId, useRef } from "react";
-import { createPortal } from "react-dom";
-import { Modal } from "./Modal";
-import { useModal } from "./Modal.hook";
-export const ModalContainer = ({ open, setIsOpen, hasCloseButton = true, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
-    const { handleClickOutside, handleKeyDown, handleCloseModal } = useModal({
-        setIsOpen,
-        onClose,
-        onClickOutside,
-    });
-    const modalRef = useRef(null);
-    const idTitle = useId();
-    const idContent = useId();
-    const actionCallback = (callback) => {
-        callback?.();
-        setIsOpen(false);
-    };
-    useEffect(() => {
-        const modalElement = modalRef.current;
-        if (modalElement) {
-            if (open) {
-                document.body.style.overflow = "hidden";
-                modalElement.showModal?.();
-            }
-            else {
-                document.body.style.overflow = "inherit";
-                modalElement.close?.();
-            }
-        }
-        return () => {
-            document.body.style.overflow = "inherit";
-        };
-    }, [open]);
-    useEffect(() => {
-        document.body.addEventListener("keydown", handleKeyDown);
-        document.body.addEventListener("click", handleClickOutside);
-        return () => {
-            document.body.removeEventListener("keydown", handleKeyDown);
-            document.body.removeEventListener("click", handleClickOutside);
-        };
-    }, [handleClickOutside, handleKeyDown]);
-    return createPortal(_jsx(Modal, { modalRef: modalRef, idTitle: idTitle, idContent: idContent, iconTitle: iconTitle, title: title, subtitle: subtitle, hasCloseButton: hasCloseButton, handleCloseModal: handleCloseModal, actionCallback: actionCallback, actions: actions, fullWidthButtons: fullWidthButtons, children: children }), document.body);
-};

package/dist/ModalClient/Modal.d.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { TModalType } from "./type";
-export declare const Modal: ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }: PropsWithChildren<TModalType>) => import("react/jsx-runtime").JSX.Element;

package/dist/ModalClient/Modal.hook.d.ts

@@ -1,6 +0,0 @@
-import { TModalHook } from "./type";
-export declare const useModal: ({ setIsOpen, onClose, onClickOutside, }: TModalHook) => {
-    handleClickOutside: (event: MouseEvent) => void;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    handleCloseModal: () => void;
-};

package/dist/ModalClient/Modal.hook.js

@@ -1,25 +0,0 @@
-import { useCallback } from "react";
-export const useModal = ({ setIsOpen, onClose, onClickOutside, }) => {
-    const handleCloseModal = useCallback(() => {
-        onClose?.();
-        setIsOpen(false);
-    }, [onClose, setIsOpen]);
-    const handleClickOutside = useCallback((event) => {
-        if (event.target.tagName !== "DIALOG") {
-            return;
-        }
-        if (onClickOutside) {
-            onClickOutside();
-            setIsOpen(false);
-        }
-        else {
-            handleCloseModal();
-        }
-    }, [handleCloseModal, onClickOutside, setIsOpen]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === "Escape") {
-            handleCloseModal();
-        }
-    }, [handleCloseModal]);
-    return { handleClickOutside, handleKeyDown, handleCloseModal };
-};

package/dist/ModalClient/Modal.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import close from "@material-symbols/svg-400/outlined/close.svg";
-import { ButtonClient as Button, Variants, Variants as ButtonVariants, } from "../Button/Button";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { Svg } from "../Svg";
-export const Modal = ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }) => (_jsxs("dialog", { ref: modalRef, className: "af-modal", "aria-labelledby": idTitle, "aria-describedby": idContent, children: [_jsxs("div", { id: idTitle, className: "af-modal__top", children: [iconTitle, _jsxs("h2", { className: "af-modal__top-title", children: [_jsxs("div", { children: [_jsx("div", { className: "af-modal__top-title-text", children: title }), subtitle && (_jsx("span", { className: "af-modal__top-title-subtitle", children: subtitle }))] }), hasCloseButton && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, variant: Variants.ghost, type: "button", "aria-label": "close", children: _jsx(Svg, { src: close, width: 32, height: 32 }) }))] })] }), _jsxs("div", { id: idContent, className: "af-modal__content", children: [children, actions && (_jsxs("div", { className: `af-modal__actions${fullWidthButtons ? " af-modal__actions--fullWidth" : ""} `, children: [actions?.primary && (_jsx(Button, { variant: ButtonVariants.primary, onClick: () => actionCallback(actions?.primary?.callback), disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: () => actionCallback(actions?.secondary?.callback), disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: () => actionCallback(actions?.tertiary?.callback), disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));

package/dist/ModalClient/index.d.ts

@@ -1 +0,0 @@
-export { ModalContainer as Modal } from "./Modal.container";

package/dist/ModalClient/index.js

@@ -1 +0,0 @@
-export { ModalContainer as Modal } from "./Modal.container";

package/dist/ModalClient/type.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode, RefObject } from "react";
-export type ButtonAction = {
-    text: string;
-    disabled?: boolean;
-    callback: () => void;
-};
-export type TActionButton = {
-    primary?: ButtonAction;
-    secondary?: ButtonAction;
-    tertiary?: ButtonAction;
-};
-export type TModalHook = {
-    setIsOpen: (value: boolean) => void;
-    onClose?: () => void;
-    onClickOutside?: () => void;
-};
-export type ModalProps = TModalHook & {
-    open: boolean;
-    hasCloseButton?: boolean;
-    title: string;
-    subtitle?: string;
-    iconTitle?: ReactNode;
-    fullWidthButtons?: boolean;
-    actions?: TActionButton;
-};
-export type TModalType = {
-    modalRef: RefObject<HTMLDialogElement>;
-    idTitle: string;
-    idContent: string;
-    iconTitle: ReactNode;
-    title: string;
-    subtitle?: string;
-    hasCloseButton: boolean;
-    handleCloseModal: () => void;
-    actionCallback: (callback?: () => void) => void;
-    actions?: TActionButton;
-    fullWidthButtons?: boolean;
-};

package/dist/ModalClient/type.js

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