@axa-fr/design-system-apollo-react 1.0.5-alpha.330 → 1.0.5-alpha.331

package/dist/Modal/ModalApollo.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-apollo-css/dist/Modal/ModalApollo.scss";
+import type { ModalProps } from "./types";
+export { ModalCore, type ModalCoreProps } from "./components/ModalCore";
+export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreBody";
+export { ModalCoreFooter } from "./components/ModalCoreFooterApollo";
+export { ModalCoreHeader } from "./components/ModalCoreHeaderApollo";
+export type { ModalCoreFooterProps, ModalCoreHeaderProps, ModalProps, } from "./types";
+export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/Modal/ModalApollo.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Modal/ModalApollo.scss";
+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 })));
+Modal.displayName = "Modal";

package/dist/Modal/ModalCommon.d.ts

@@ -0,0 +1,10 @@
+import { type ModalCoreProps } from "./components/ModalCore";
+import { type ModalCoreBodyProps } from "./components/ModalCoreBody";
+import { type ModalCoreFooterCommonProps, type ModalCoreFooterContainerProps } from "./components/ModalCoreFooterCommon";
+import type { ModalCoreHeaderCommonProps, ModalCoreHeaderContainerProps } from "./components/ModalCoreHeaderCommon";
+export type ModalCommonProps = ModalCoreProps & Omit<ModalCoreHeaderCommonProps, Extract<keyof ModalCoreProps, keyof ModalCoreHeaderCommonProps>> & Omit<ModalCoreFooterCommonProps, Extract<keyof ModalCoreProps, keyof ModalCoreFooterCommonProps>> & {
+    modalCoreBodyProps?: ModalCoreBodyProps;
+    modalCoreFooterProps?: ModalCoreFooterContainerProps;
+    modalCoreHeaderProps?: ModalCoreHeaderContainerProps;
+};
+export declare const ModalCommon: import("react").ForwardRefExoticComponent<Omit<ModalCommonProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/Modal/ModalCommon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+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 })] })));
+ModalCommon.displayName = "ModalCommon";

package/dist/Modal/ModalLF.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-apollo-css/dist/Modal/ModalLF.scss";
+import type { ModalProps } from "./types";
+export { ModalCore, type ModalCoreProps } from "./components/ModalCore";
+export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreBody";
+export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
+export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
+export type { ModalCoreFooterProps, ModalCoreHeaderProps, ModalProps, } from "./types";
+export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/Modal/ModalLF.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Modal/ModalLF.scss";
+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 })));
+Modal.displayName = "Modal";

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

@@ -0,0 +1,6 @@
+import { type ComponentPropsWithRef } from "react";
+export type ModalCoreProps = Omit<ComponentPropsWithRef<"dialog">, "title" | "onClose"> & Required<Pick<ComponentPropsWithRef<"dialog">, "title">> & {
+    onClose?: VoidFunction;
+};
+declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export { ModalCore };

package/dist/Modal/components/ModalCore.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const ModalCore = forwardRef(({ className, children, ...props }, ref) => (
+// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+_jsx("dialog", { "aria-label": props["aria-label"] ?? props.title, className: ["af-apollo-modal", className].filter(Boolean).join(" "), onClick: props.onClose, ref: ref, ...props, children: _jsx("section", { className: "af-apollo-modal__content", onClick: (e) => e.stopPropagation(), children: children }) })));
+ModalCore.displayName = "ModalCore";
+export { ModalCore };

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

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

package/dist/Modal/components/ModalCoreBody.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useHasScroll } from "../../utilities/hook/useHasScroll";
+export const ModalCoreBody = ({ children, className, ...otherProps }) => {
+    const bodyRef = useRef(null);
+    const { vertical: hasVerticalScroll } = useHasScroll(bodyRef);
+    return (_jsx("main", { className: [
+            "af-apollo-modal__body",
+            hasVerticalScroll ? "af-apollo-modal__body-vertical-scroll" : undefined,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), ...otherProps, ref: bodyRef, children: children }));
+};

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

@@ -0,0 +1,2 @@
+import type { ModalCoreFooterProps } from "../types";
+export declare const ModalCoreFooter: (args: ModalCoreFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreFooterApollo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../../Button/ButtonApollo";
+import { ModalCoreFooterCommon } from "./ModalCoreFooterCommon";
+export const ModalCoreFooter = (args) => (_jsx(ModalCoreFooterCommon, { buttonComponent: Button, ...args }));

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, ComponentType } from "react";
+import type { ButtonProps } from "../../Button/ButtonCommon";
+export type ModalCoreFooterContainerProps = ComponentPropsWithoutRef<"footer">;
+export type ModalCoreFooterCommonProps = ModalCoreFooterContainerProps & {
+    buttonComponent: ComponentType<ButtonProps>;
+    primaryButtonProps?: Partial<ButtonProps>;
+    secondaryButtonProps?: Partial<ButtonProps>;
+    tertiaryButtonProps?: Partial<ButtonProps>;
+};
+export declare const ModalCoreFooterCommon: ({ className, buttonComponent: ButtonComponent, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, ...rest }: ModalCoreFooterCommonProps) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/Modal/components/ModalCoreFooterCommon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderFooterButtons = (ButtonComponent, buttons) => ButtonComponent &&
+    buttons.map(([variant, props]) => Boolean(props) && (_jsx(ButtonComponent, { variant: variant, ...props, className: [props?.className, "af-apollo-modal__footer-button"]
+            .filter(Boolean)
+            .join(" ") }, variant)));
+export const ModalCoreFooterCommon = ({ className, buttonComponent: ButtonComponent, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, ...rest }) => (primaryButtonProps || secondaryButtonProps || tertiaryButtonProps) && (_jsx("footer", { className: ["af-apollo-modal__footer", className]
+        .filter(Boolean)
+        .join(" "), ...rest, children: renderFooterButtons(ButtonComponent, [
+        ["tertiary", tertiaryButtonProps],
+        ["secondary", secondaryButtonProps],
+        ["primary", primaryButtonProps],
+    ]) }));

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

@@ -0,0 +1,2 @@
+import type { ModalCoreFooterProps } from "../types";
+export declare const ModalCoreFooter: (args: ModalCoreFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreFooterLF.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../../Button/ButtonLF";
+import { ModalCoreFooterCommon } from "./ModalCoreFooterCommon";
+export const ModalCoreFooter = (args) => (_jsx(ModalCoreFooterCommon, { buttonComponent: Button, ...args }));

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

@@ -0,0 +1,2 @@
+import type { ModalCoreHeaderProps } from "../types";
+export declare const ModalCoreHeader: (args: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreHeaderApollo.js

@@ -0,0 +1,5 @@
+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 }));

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

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, ComponentType } from "react";
+import type { HeadingProps } from "../../Heading/types";
+import type { IconProps } from "../../Icon/IconCommon";
+export type ModalCoreHeaderContainerProps = ComponentPropsWithoutRef<"header">;
+export type ModalCoreHeaderCommonProps = ModalCoreHeaderContainerProps & {
+    headingComponent: ComponentType<HeadingProps>;
+    headingProps: HeadingProps;
+    iconComponent?: ComponentType<IconProps>;
+    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;

package/dist/Modal/components/ModalCoreHeaderCommon.js

@@ -0,0 +1,4 @@
+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-apollo-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(ClickIcon, { className: "af-apollo-modal__header-close-btn", src: close, onClick: onClose, "aria-label": closeButtonAriaLabel }), _jsxs("div", { className: "af-apollo-modal__header-title", children: [IconComponent && iconProps && _jsx(IconComponent, { size: "M", ...iconProps }), _jsx(HeadingComponent, { level: 2, ...headingProps })] })] }));

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

@@ -0,0 +1,2 @@
+import type { ModalCoreHeaderProps } from "../types";
+export declare const ModalCoreHeader: (args: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreHeaderLF.js

@@ -0,0 +1,5 @@
+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 }));

package/dist/Modal/types.d.ts

@@ -0,0 +1,12 @@
+import type { HeadingProps } from "../Heading/types";
+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 ModalCoreFooterProps = Omit<ModalCoreFooterCommonProps, "buttonComponent">;
+export type ModalProps = Omit<ModalCommonProps, "headingComponent" | "headingProps" | "iconComponent" | "iconProps" | "buttonComponent"> & {
+    headingProps?: Omit<HeadingProps, "children">;
+    icon?: string;
+    iconProps?: Omit<IconProps, "src">;
+};

package/dist/Modal/types.js

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

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { ItemTabBar, itemTabBarVariants, type ItemTabBarVariants, } from "./Item
 export { Link, linkVariants, type LinkVariants } from "./Link/LinkApollo";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoApollo";
 export { Message, messageVariants, type MessageVariants, } from "./Message/MessageApollo";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalApollo";
 export { ProgressBar } from "./ProgressBar/ProgressBarApollo";
 export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupApollo";
 export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/SpinnerApollo";

package/dist/index.js

@@ -28,6 +28,7 @@ export { ItemTabBar, itemTabBarVariants, } from "./ItemTabBar/ItemTabBarApollo";
 export { Link, linkVariants } from "./Link/LinkApollo";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoApollo";
 export { Message, messageVariants, } from "./Message/MessageApollo";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalApollo";
 export { ProgressBar } from "./ProgressBar/ProgressBarApollo";
 export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupApollo";
 export { Spinner, spinnerVariants, } from "./Spinner/SpinnerApollo";

package/dist/indexLF.d.ts

@@ -33,6 +33,7 @@ export { ItemTabBar, itemTabBarVariants, type ItemTabBarVariants, } from "./Item
 export { Link, linkVariants, type LinkVariants } from "./Link/LinkLF";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoLF";
 export { Message, messageVariants, type MessageVariants, } from "./Message/MessageLF";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalLF";
 export { ProgressBar } from "./ProgressBar/ProgressBarLF";
 export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupLF";
 export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/SpinnerLF";

package/dist/indexLF.js

@@ -33,6 +33,7 @@ export { ItemTabBar, itemTabBarVariants, } from "./ItemTabBar/ItemTabBarLF";
 export { Link, linkVariants } from "./Link/LinkLF";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoLF";
 export { Message, messageVariants, } from "./Message/MessageLF";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalLF";
 export { ProgressBar } from "./ProgressBar/ProgressBarLF";
 export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupLF";
 export { Spinner, spinnerVariants, } from "./Spinner/SpinnerLF";

package/dist/utilities/hook/useHasScroll.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from "react";
+export type HasScrollState = {
+    horizontal: boolean;
+    vertical: boolean;
+};
+export declare const useHasScroll: (ref: RefObject<HTMLElement | null>) => HasScrollState;

package/dist/utilities/hook/useHasScroll.js

@@ -0,0 +1,30 @@
+import { useState, useLayoutEffect } from "react";
+const defaultHasScrollState = {
+    horizontal: false,
+    vertical: false,
+};
+export const useHasScroll = (ref) => {
+    const [hasScroll, setHasScroll] = useState(defaultHasScrollState);
+    useLayoutEffect(() => {
+        const htmlElement = ref.current;
+        const updateHasScrollState = () => {
+            if (htmlElement === null) {
+                setHasScroll(defaultHasScrollState);
+                return;
+            }
+            setHasScroll({
+                horizontal: htmlElement.scrollWidth > htmlElement.clientWidth,
+                vertical: htmlElement.scrollHeight > htmlElement.clientHeight,
+            });
+        };
+        updateHasScrollState();
+        const observer = new ResizeObserver(updateHasScrollState);
+        if (htmlElement) {
+            observer.observe(htmlElement, {
+                box: "content-box",
+            });
+        }
+        return () => observer.disconnect();
+    }, [ref]);
+    return hasScroll;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.330",
+  "version": "1.0.5-alpha.331",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.330",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.330",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.331",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.331",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },