allaw-ui 3.1.7 → 3.1.9

package/dist/components/molecules/modal/Modal.d.ts

@@ -8,6 +8,7 @@ export interface ModalProps {
     onConfirm: () => void;
     onCancel: () => void;
     isDanger?: boolean;
+    confirmIconName?: string;
     verticalOffset?: {
         top?: number;
         bottom?: number;

package/dist/components/molecules/modal/Modal.js

@@ -6,16 +6,17 @@ import SecondaryButton from "../../atoms/buttons/SecondaryButton";
 import Heading from "../../atoms/typography/Heading";
 import Paragraph from "../../atoms/typography/Paragraph";
 var Modal = function (_a) {
-    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, verticalOffset = _a.verticalOffset;
-    var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, verticalOffset = _a.verticalOffset;
+    var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
     var portalContainerRef = useRef(null);
     var modalContentRef = useRef(null);
+    var isMouseDownOutsideRef = useRef(false);
     useEffect(function () {
         if (show) {
             var container = document.createElement("div");
             document.body.appendChild(container);
             portalContainerRef.current = container;
-            document.body.classList.add("modal-open");
+            document.body.style.overflow = "hidden";
             setIsVisible(true);
         }
         else {
@@ -23,7 +24,7 @@ var Modal = function (_a) {
             if (portalContainerRef.current &&
                 document.body.contains(portalContainerRef.current)) {
                 document.body.removeChild(portalContainerRef.current);
-                document.body.classList.remove("modal-open");
+                document.body.style.overflow = "";
             }
         }
         return function () {
@@ -31,19 +32,29 @@ var Modal = function (_a) {
             if (portalContainerRef.current &&
                 document.body.contains(portalContainerRef.current)) {
                 document.body.removeChild(portalContainerRef.current);
-                document.body.classList.remove("modal-open");
+                document.body.style.overflow = "";
             }
         };
     }, [show]);
-    var handleOutsideClick = function (e) {
+    var handleMouseDown = function (e) {
         if (modalContentRef.current &&
+            !modalContentRef.current.contains(e.target)) {
+            isMouseDownOutsideRef.current = true;
+        }
+        else {
+            isMouseDownOutsideRef.current = false;
+        }
+    };
+    var handleMouseUp = function (e) {
+        if (isMouseDownOutsideRef.current &&
+            modalContentRef.current &&
             !modalContentRef.current.contains(e.target)) {
             onCancel();
         }
     };
     if (!show || !isVisible || !portalContainerRef.current)
         return null;
-    var modalContent = (React.createElement("div", { className: "".concat(style.modalOverlay, " ").concat(isVisible ? style.visible : "", " ").concat(show ? style.modal : ""), onClick: handleOutsideClick, style: {
+    var modalContent = (React.createElement("div", { className: "".concat(style.modalOverlay, " ").concat(isVisible ? style.visible : "", " ").concat(show ? style.modal : ""), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
             paddingTop: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.top) ? "".concat(verticalOffset.top, "px") : undefined,
             paddingBottom: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.bottom)
                 ? "".concat(verticalOffset.bottom, "px")
@@ -56,7 +67,7 @@ var Modal = function (_a) {
                 React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
             React.createElement("div", { className: style.modalButtons },
                 React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true }),
-                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, endIconName: "allaw-icon-check", endIcon: true })))));
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true })))));
     return ReactDOM.createPortal(modalContent, portalContainerRef.current);
 };
 export default Modal;

package/dist/components/molecules/modal/Modal.module.css

@@ -110,7 +110,7 @@
 }
 
 /* Classe pour bloquer le scroll du body */
-body.stepper-open {
+.modal-open {
   overflow: hidden;
   position: fixed;
   width: 100%;
@@ -290,25 +290,6 @@ body.stepper-open {
   flex: 1;
 }
 
-/* Classe pour bloquer le scroll du body */
-:global(.modal-open) {
-  overflow: hidden;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @media (max-width: 1000px) {
   .modalContent {
     z-index: 5001;

package/dist/components/molecules/stepper/Stepper.css

@@ -14,6 +14,7 @@
   z-index: 1001;
   max-height: 90vh;
   overflow: hidden;
+  animation: fadeIn 0.2s ease-out;
 }
 
 .stepper-content {

package/dist/components/molecules/stepper/Stepper.stories.js

@@ -92,14 +92,20 @@ export default {
 };
 var Template = function (args) {
     var _a = useState(args.currentStep), step = _a[0], setStep = _a[1];
+    var _b = useState(false), showStepper = _b[0], setShowStepper = _b[1];
     useEffect(function () {
         setStep(args.currentStep);
     }, [args.currentStep]);
-    var updatedArgs = __assign(__assign({}, args), { currentStep: step, onClose: function () {
-            action("Stepper closed")();
-            if (args.onClose)
-                args.onClose();
-        }, primaryButton: args.primaryButton.map(function (button) { return (__assign(__assign({}, button), { onPrimaryButtonClick: function (currentStep) {
+    var handleOpenStepper = function () {
+        setShowStepper(true);
+    };
+    var handleCloseStepper = function () {
+        setShowStepper(false);
+        action("Stepper closed")();
+        if (args.onClose)
+            args.onClose();
+    };
+    var updatedArgs = __assign(__assign({}, args), { currentStep: step, onClose: handleCloseStepper, primaryButton: args.primaryButton.map(function (button) { return (__assign(__assign({}, button), { onPrimaryButtonClick: function (currentStep) {
                 action("Primary button clicked on step ".concat(currentStep))();
                 if (currentStep < args.steps) {
                     setStep(currentStep + 1);
@@ -110,7 +116,9 @@ var Template = function (args) {
                     setStep(currentStep - 1);
                 }
             } })); }) });
-    return React.createElement(Stepper, __assign({}, updatedArgs));
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: handleOpenStepper, style: { margin: "20px" } }, "Ouvrir le stepper"),
+        showStepper && React.createElement(Stepper, __assign({}, updatedArgs))));
 };
 export var Default = Template.bind({});
 Default.args = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",