dhre-component-lib 0.7.8 → 0.8.0

package/dist/index.js

@@ -21617,7 +21617,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
     }
 };
 
-var css$e = ".otpMainContainer {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin: 10px;\n  width: 343px;\n}\n\n.otpInputDiv {\n  flex-direction: row;\n  gap: 12px;\n  display: flex;\n}\n\n.otpInput {\n  width: calc(25% - 9px);\n  height: 48px;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 400;\n  border-radius: 8px;\n}\n@media (max-width: 600px) {\n  .otpInput {\n    height: 40px;\n  }\n}\n\n.resendContainer {\n  display: flex;\n  flex-direction: row;\n  margin-top: 10px;\n  justify-content: space-between;\n}\n\n.errorText {\n  color: #EB0542;\n  font-weight: 400;\n  font-size: 14px;\n}\n\n.timerText {\n  color: #0569C2;\n  font-weight: 400;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n}\n\n.resendText {\n  color: #A7A7A7;\n  font-weight: 700;\n  font-size: 14px;\n}\n\n.enabledResendText {\n  color: #000000;\n  font-weight: 700;\n  font-size: 14px;\n}";
+var css$e = ".otpMainContainer {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin: 10px 0;\n  width: 343px;\n}\n\n.otpInputDiv {\n  flex-direction: row;\n  gap: 12px;\n  display: flex;\n}\n\n.otpInput {\n  width: calc(25% - 9px);\n  height: 48px;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 400;\n  border-radius: 8px;\n}\n@media (max-width: 600px) {\n  .otpInput {\n    height: 40px;\n  }\n}\n\n.otpInput::-webkit-inner-spin-button {\n  display: none;\n}\n\n.resendContainer {\n  display: flex;\n  flex-direction: row;\n  margin-top: 10px;\n  justify-content: space-between;\n}\n\n.errorText {\n  color: #EB0542;\n  font-weight: 400;\n  font-size: 14px;\n}\n\n.timerText {\n  color: #0569C2;\n  font-weight: 400;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n}\n\n.resendText {\n  color: #A7A7A7;\n  font-weight: 700;\n  font-size: 14px;\n}\n\n.enabledResendText {\n  color: #000000;\n  font-weight: 700;\n  font-size: 14px;\n}";
 n(css$e,{});
 
 const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText }) => {
@@ -21631,7 +21631,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
         return () => clearInterval(countdown);
     }, []);
     const handleChange = (value, index) => {
-        if (isNaN(Number(value)))
+        if (isNaN(Number(value)) || Number(value) > 9)
             return;
         const newOtp = [...otp];
         newOtp[index] = value;
@@ -21652,11 +21652,12 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
             }
         }
     };
-    const handleResendClick = () => {
-        onResend();
-        setOtp(Array(length).fill(""));
-        setTimer(resendDelay);
-        setIsComplete(false);
+    const handleResendClick = async () => {
+        onResend(() => {
+            setOtp(Array(length).fill(""));
+            setTimer(resendDelay);
+            setIsComplete(false);
+        });
     };
     React$1.useEffect(() => {
         setIsComplete(otp.every((digit) => digit !== ""));
@@ -21676,11 +21677,11 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
     return (React__namespace.default.createElement("div", { className: `${'otpMainContainer'} ${className ? className : ''}` },
         React__namespace.default.createElement("div", { className: "otpInputDiv" }, Array(length)
             .fill("")
-            .map((_, index) => (React__namespace.default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index), maxLength: 1, style: { border: `1px solid ${getReadableStatus()}` }, className: `${'otpInput'} ${inputClassName ? inputClassName : ''}`, autoFocus: autoFocus && index === 0 })))),
+            .map((_, index) => (React__namespace.default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index), style: { border: `1px solid ${getReadableStatus()}` }, className: `${'otpInput'} ${inputClassName ? inputClassName : ''}`, autoFocus: autoFocus && index === 0 })))),
         React__namespace.default.createElement("div", { className: "resendContainer" },
             error && (React__namespace.default.createElement("div", { className: "errorText" }, errorText)),
             !showResendButton && !error && React__namespace.default.createElement("div", { className: "errorText" }, noResendButtonText),
-            (showResendButton && !error) && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
+            showResendButton && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 React__namespace.default.createElement("div", { className: "timerText" },
                     timer ? icon : "",
                     timer > 0 ? `00:${timer} secs` : ""),