jattac.libs.web.zest-button 1.1.0 → 1.1.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import require$$0, { useState, useRef, useEffect } from 'react';
-import { FaSpinner } from 'react-icons/fa';
+import require$$0, { useEffect, useState, useRef } from 'react';
+import { FaSpinner } from 'react-icons/fa6';
 
 var jsxRuntime = {exports: {}};
 
@@ -1394,10 +1394,22 @@ const ZestButton = ({ visualOptions = {}, busyOptions = {}, successOptions = {},
     const { variant = "standard", size = "md", fullWidth = false, iconLeft, iconRight, } = visualOptions;
     const { handleInternally = true, preventRageClick = true, minBusyDurationMs = 500, } = busyOptions;
     const { showCheckmark = true, showFailIcon = true, autoResetAfterMs = 2000, } = successOptions;
+    // Edge Case 4: Add warnings for very short durations in development
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development') {
+            if (minBusyDurationMs > 0 && minBusyDurationMs < 100) {
+                console.warn(`ZestButton: 'minBusyDurationMs' is set to ${minBusyDurationMs}ms. Very short durations can lead to visual flickering and a poor user experience. Consider a value of 100ms or more.`);
+            }
+            if (autoResetAfterMs > 0 && autoResetAfterMs < 100) {
+                console.warn(`ZestButton: 'autoResetAfterMs' is set to ${autoResetAfterMs}ms. Very short durations can make success/fail feedback hard to perceive. Consider a value of 100ms or more.`);
+            }
+        }
+    }, [minBusyDurationMs, autoResetAfterMs]);
     const [internalBusy, setInternalBusy] = useState(false);
     const [wasSuccessful, setWasSuccessful] = useState(false);
     const [wasFailed, setWasFailed] = useState(false);
     const buttonRef = useRef(null);
+    const failTimeoutRef = useRef(null); // Bug 1: Add useRef for failTimeout
     const [currentChildren, setCurrentChildren] = useState(children);
     const [awaitingConfirm, setAwaitingConfirm] = useState(false);
     // ✅ interval ref for confirm countdown
@@ -1416,6 +1428,15 @@ const ZestButton = ({ visualOptions = {}, busyOptions = {}, successOptions = {},
     const isDisabled = disabled ||
         effectiveBusy ||
         (preventRageClick && (wasSuccessful || wasFailed));
+    // Move handleClick, stopWaiting, and handleConfirmClick declarations here
+    const stopWaiting = () => {
+        if (confirmIntervalRef.current) {
+            clearInterval(confirmIntervalRef.current);
+            confirmIntervalRef.current = null;
+        }
+        setCurrentChildren(children);
+        setAwaitingConfirm(false);
+    };
     const handleClick = async (e) => {
         if (preventRageClick && internalBusy)
             return;
@@ -1447,45 +1468,14 @@ const ZestButton = ({ visualOptions = {}, busyOptions = {}, successOptions = {},
             onClick(e);
         }
     };
-    // auto-reset success/failure state
-    useEffect(() => {
-        if ((wasSuccessful || wasFailed) && autoResetAfterMs) {
-            const timeout = setTimeout(() => {
-                setWasSuccessful(false);
-                setWasFailed(false);
-            }, autoResetAfterMs);
-            return () => clearTimeout(timeout);
-        }
-    }, [wasSuccessful, wasFailed, autoResetAfterMs]);
-    // Enter key handler if isDefault
-    useEffect(() => {
-        if (!isDefault || isDisabled)
-            return;
-        const listener = (e) => {
-            const target = e.target;
-            if (e.key === "Enter" &&
-                !e.repeat &&
-                !e.defaultPrevented &&
-                !(target instanceof HTMLTextAreaElement)) {
-                e.preventDefault();
-                buttonRef.current?.click();
-            }
-        };
-        document.addEventListener("keydown", listener);
-        return () => document.removeEventListener("keydown", listener);
-    }, [isDefault, isDisabled]);
-    const stopWaiting = () => {
-        if (confirmIntervalRef.current) {
-            clearInterval(confirmIntervalRef.current);
-            confirmIntervalRef.current = null;
-        }
-        setCurrentChildren(children);
-        setAwaitingConfirm(false);
-    };
     const handleConfirmClick = async (e) => {
         if (!props.confirmOptions) {
             return handleClick(e);
         }
+        // Edge Case 3: Add warning for missing onClick with confirmOptions
+        if (props.confirmOptions && !onClick) { // Use destructured onClick
+            console.warn("ZestButton: 'confirmOptions' are provided but 'onClick' handler is missing. The button will confirm but perform no action.");
+        }
         if (awaitingConfirm) {
             stopWaiting();
             return handleClick(e);
@@ -1500,22 +1490,58 @@ const ZestButton = ({ visualOptions = {}, busyOptions = {}, successOptions = {},
             if (timeRemaining <= 0) {
                 stopWaiting();
                 setWasFailed(true); // Indicate failure for shake animation
-                setTimeout(() => {
+                // Bug 1: Clear any existing timeout before setting a new one
+                if (failTimeoutRef.current) {
+                    clearTimeout(failTimeoutRef.current);
+                }
+                failTimeoutRef.current = setTimeout(() => {
                     setWasFailed(false);
+                    failTimeoutRef.current = null; // Clear ref after timeout fires
                 }, 400); // Shake animation duration
-                // No need to return clearTimeout, as this timeout is for visual feedback only
             }
             else {
                 setCurrentChildren(`${displayLabel} (${timeRemaining}s)`);
             }
         }, 1000); // Update once per second
     };
+    // auto-reset success/failure state
+    useEffect(() => {
+        if ((wasSuccessful || wasFailed) && autoResetAfterMs) {
+            const timeout = setTimeout(() => {
+                setWasSuccessful(false);
+                setWasFailed(false);
+            }, autoResetAfterMs);
+            return () => clearTimeout(timeout);
+        }
+    }, [wasSuccessful, wasFailed, autoResetAfterMs]);
+    // Enter key handler if isDefault
+    useEffect(() => {
+        if (!isDefault || isDisabled)
+            return;
+        const listener = (e) => {
+            const target = e.target;
+            if (e.key === "Enter" &&
+                !e.repeat &&
+                !e.defaultPrevented &&
+                !(target instanceof HTMLTextAreaElement)) {
+                e.preventDefault();
+                // Bug 2: Directly call handleConfirmClick to respect confirmation logic
+                handleConfirmClick(e);
+            }
+        };
+        document.addEventListener("keydown", listener);
+        return () => document.removeEventListener("keydown", listener);
+    }, [isDefault, isDisabled, handleConfirmClick]); // Bug 2: Add handleConfirmClick to dependencies
     // cleanup on unmount
     useEffect(() => {
         return () => {
             if (confirmIntervalRef.current) {
                 clearInterval(confirmIntervalRef.current);
             }
+            // Bug 1: Add cleanup for failTimeoutRef
+            if (failTimeoutRef.current) {
+                clearTimeout(failTimeoutRef.current);
+            }
         };
     }, []);
     const renderLeftIcon = () => {
@@ -1526,7 +1552,7 @@ const ZestButton = ({ visualOptions = {}, busyOptions = {}, successOptions = {},
             return (jsxRuntimeExports.jsx("span", { className: `${styles.icon} ${styles.fadeIn}`, children: jsxRuntimeExports.jsx(AnimatedCheckmark, {}) }));
         }
         else if (wasFailed && showFailIcon) {
-            return (jsxRuntimeExports.jsx("span", { className: `${styles.icon} ${styles.fadeIn} ${styles.shake}`, children: jsxRuntimeExports.jsx(AnimatedX, {}) }));
+            return (jsxRuntimeExports.jsx("span", { className: `${styles.icon} ${styles.fadeIn}`, children: jsxRuntimeExports.jsx(AnimatedX, {}) }));
         }
         else if (iconLeft) {
             return jsxRuntimeExports.jsx("span", { className: styles.icon, children: iconLeft });