@axa-fr/design-system-look-and-feel-react 0.2.0-beta.335 → 0.2.0-beta.337

package/dist/Form/Text/Text.d.ts

@@ -1,12 +1,11 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
 import { ComponentPropsWithRef, MouseEventHandler } from "react";
-type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
+type Props = ComponentPropsWithRef<"input"> & {
     classModifier?: string;
     helper?: string;
     error?: string;
     description?: string;
     label?: string;
-    required?: boolean;
     buttonLabel?: string;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
 };

package/dist/Form/Text/Text.js

@@ -7,10 +7,10 @@ import { Variants } from "../../Button/Button";
 import { Svg } from "../../Svg";
 import { getComponentClassName } from "../../utilities";
 import { InputError } from "../InputError";
-const Text = forwardRef(({ className, classModifier = "", ...otherProps }, inputRef) => {
+const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, ...otherProps }, inputRef) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
-    const { id, label, required, disabled, description, helper, error, buttonLabel, onButtonClick, } = otherProps;
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, required: required, disabled: disabled, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
+    const { id, required } = otherProps;
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
 });
 Text.displayName = "Text";
 export { Text };

package/dist/ModalClient/Modal.d.ts

@@ -9,6 +9,7 @@ type ModalProps = {
     isOpen: boolean;
     hasCloseBtn?: boolean;
     onClose?: () => void;
+    onClickOutside?: () => void;
     title: string;
     subtitle?: string;
     iconTitle?: ReactNode;
@@ -19,5 +20,5 @@ type ModalProps = {
         tertiary?: ButtonAction;
     };
 };
-export declare const Modal: ({ isOpen, hasCloseBtn, onClose, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ isOpen, hasCloseBtn, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ModalClient/Modal.js

@@ -4,7 +4,7 @@ import close from "@material-symbols/svg-400/outlined/close.svg";
 import { ButtonClient as Button, 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 = ({ isOpen, hasCloseBtn = true, onClose, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
+export const Modal = ({ isOpen, hasCloseBtn = true, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
     const [isModalOpen, setIsModalOpen] = useState(isOpen);
     const modalRef = useRef(null);
     const idTitle = useId();
@@ -35,10 +35,19 @@ export const Modal = ({ isOpen, hasCloseBtn = true, onClose, children, title, su
         onClose?.();
         setIsModalOpen(false);
     };
+    const handleClickOutside = () => {
+        if (onClickOutside) {
+            onClickOutside();
+            setIsModalOpen(false);
+        }
+        else {
+            handleCloseModal();
+        }
+    };
     const handleKeyDown = (event) => {
         if (event.key === "Escape") {
             handleCloseModal();
         }
     };
-    return (_jsxs("dialog", { ref: modalRef, onKeyDown: handleKeyDown, onClick: (e) => e.target === modalRef.current && handleCloseModal(), 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 }))] }), hasCloseBtn && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, 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: actions?.primary.callback, disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: actions?.secondary.callback, disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: actions?.tertiary.callback, disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));
+    return (_jsxs("dialog", { ref: modalRef, onKeyDown: handleKeyDown, onClick: (e) => e.target === modalRef.current && handleClickOutside(), 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 }))] }), hasCloseBtn && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, 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: actions?.primary.callback, disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: actions?.secondary.callback, disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: actions?.tertiary.callback, disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));
 };

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

@@ -1,20 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { ReactNode } from "react";
-import { ButtonAction, Modal } from "./Modal";
+import { Modal } from "./Modal";
 declare const meta: Meta<typeof Modal>;
 export default meta;
-type StoryProps = Omit<React.ComponentProps<typeof Modal>, "isOpen" | "hasCloseBtn" | "onClose" | "title" | "iconTitle" | "fullWidthButtons" | "actions"> & {
-    isOpen: boolean;
-    hasCloseBtn?: boolean;
-    onClose?: () => void;
-    title: string;
-    iconTitle?: ReactNode;
-    fullWidthButtons?: boolean;
-    actions?: {
-        primary?: ButtonAction;
-        secondary?: ButtonAction;
-        tertiary?: ButtonAction;
-    };
-};
+type StoryProps = React.ComponentProps<typeof Modal>;
 type Story = StoryObj<StoryProps>;
 export declare const Playground: Story;

package/dist/ModalClient/Modal.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 const Container = (props) => {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setIsOpen(true), children: "open modal" }), _jsx(Modal, { ...props, isOpen: isOpen, onClose: () => setIsOpen(false), actions: {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setIsOpen(true), children: "open modal" }), _jsx(Modal, { ...props, isOpen: isOpen, onClose: () => setIsOpen(false), onClickOutside: undefined, actions: {
                     primary: { text: "Save", callback: () => setIsOpen(false) },
                     secondary: { text: "Cancel", callback: () => setIsOpen(false) },
                     tertiary: {

package/package.json

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