@axa-fr/design-system-look-and-feel-react 1.0.4 → 1.0.5-alpha.244

package/dist/Loader/Loader.d.ts

@@ -1,12 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
-type LoaderProps = {
-    border?: number;
-    size?: number;
-    variant?: "blue" | "gray" | "white";
-    text?: string;
-};
-declare const Loader: {
-    ({ border, size, variant, text, }: LoaderProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Loader };

package/dist/Loader/Loader.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
-import classNames from "classnames";
-const Loader = ({ border = 5, size = 60, variant = "blue", text = "Chargement en cours", }) => (_jsx("div", { role: "alert", "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: classNames("af-loader__container", `af-loader__container--${variant}`), style: {
-        width: `${size}px`,
-        height: `${size}px`,
-        borderWidth: `${border}px`,
-        borderTopWidth: `${border}px`,
-    }, children: _jsx("div", { className: "af-loader__container-spin", "aria-hidden": "true" }) }));
-Loader.displayName = "Loader";
-export { Loader };

package/dist/Loader/index.d.ts

@@ -1 +0,0 @@
-export { Loader } from "./Loader";

package/dist/Loader/index.js

@@ -1 +0,0 @@
-export { Loader } from "./Loader";

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 {};

package/dist/Tag/index.d.ts

@@ -1,2 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Tag/Tag.scss";
-export { Tag } from "./Tag";

package/dist/Tag/index.js

@@ -1,2 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Tag/Tag.scss";
-export { Tag } from "./Tag";