allaw-ui 3.1.8 → 3.2.0

package/dist/components/molecules/billingCount/BillingCount.d.ts

@@ -5,6 +5,7 @@ export type BillingCountProps = {
     setIsStarted?: (value: boolean) => void;
     resetTimer?: boolean;
     pauseTimer?: boolean;
+    responsiveSize?: number;
 };
-declare const BillingCount: ({ onEnd, setIsStarted, resetTimer, pauseTimer, }: BillingCountProps) => React.JSX.Element;
+declare const BillingCount: ({ onEnd, setIsStarted, resetTimer, pauseTimer, responsiveSize, }: BillingCountProps) => React.JSX.Element;
 export default BillingCount;

package/dist/components/molecules/billingCount/BillingCount.js

@@ -7,10 +7,11 @@ var LOCAL_STORAGE_KEYS = {
     HAS_STARTED_BEFORE: "hasStartedBefore",
 };
 var BillingCount = function (_a) {
-    var onEnd = _a.onEnd, setIsStarted = _a.setIsStarted, resetTimer = _a.resetTimer, pauseTimer = _a.pauseTimer;
+    var onEnd = _a.onEnd, setIsStarted = _a.setIsStarted, resetTimer = _a.resetTimer, pauseTimer = _a.pauseTimer, responsiveSize = _a.responsiveSize;
     var _b = useState(0), elapsedSeconds = _b[0], setElapsedSeconds = _b[1];
     var _c = useState(false), isRunning = _c[0], setIsRunning = _c[1];
     var intervalRef = useRef(null);
+    var _d = useState(true), isVisible = _d[0], setIsVisible = _d[1];
     // --- Au premier render, on relit le localStorage
     useEffect(function () {
         var savedAccumulated = getAccumulatedTime();
@@ -69,6 +70,17 @@ var BillingCount = function (_a) {
             }
         }
     }, [resetTimer, pauseTimer]);
+    useEffect(function () {
+        var handleResize = function () {
+            if (responsiveSize !== undefined) {
+                var width = window.innerWidth;
+                setIsVisible(width >= responsiveSize);
+            }
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, [responsiveSize]);
     // --- Fonctions utilitaires ---
     // Calcule la différence en s'appuyant sur:
     //   accumulatedTime (secondes) + (Date.now() - startTime) / 1000
@@ -151,7 +163,7 @@ var BillingCount = function (_a) {
     };
     return (React.createElement("button", { onClick: handleButtonClick, className: "billing-button-wrapper ".concat(isRunning ? "isRunning" : "") },
         React.createElement("i", { className: "allaw-icon-clock" }),
-        React.createElement("span", { className: "billing-time" }, formatTime(elapsedSeconds)),
+        isVisible && (React.createElement("span", { className: "billing-time" }, formatTime(elapsedSeconds))),
         React.createElement("i", { className: isRunning ? "allaw-icon-pause" : "allaw-icon-play", style: { fontSize: "12px", color: "#25BEEB", fontWeight: 800 } })));
 };
 export default BillingCount;

package/dist/components/molecules/billingCount/BillingCount.stories.d.ts

@@ -17,5 +17,6 @@ export namespace WithStartedState {
         }
     }
 }
+export const WithResponsiveSize: any;
 import BillingCount from "./BillingCount";
 import React from "react";

package/dist/components/molecules/billingCount/BillingCount.stories.js

@@ -42,3 +42,8 @@ WithStartedState.story = {
         },
     },
 };
+export var WithResponsiveSize = Template.bind({});
+WithResponsiveSize.args = {
+    onEnd: onEnd,
+    responsiveSize: 600,
+};

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,10 +6,11 @@ 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");
@@ -35,15 +36,25 @@ var Modal = function (_a) {
             }
         };
     }, [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/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.8",
+  "version": "3.2.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",