@konoma-development/react-components 0.2.2 → 0.2.4

package/dist/@konoma-development/react-components.js

@@ -2415,6 +2415,7 @@ function Checkbox({
           name,
           className: "h-0 w-0 appearance-none",
           defaultChecked: !!defaultValue,
+          "data-testid": dataTestId,
           onChange: (e) => onChange(e.target.checked, e),
           disabled
         }
@@ -2434,6 +2435,7 @@ function Checkbox({
           value: 0,
           className: "h-0 w-0 appearance-none",
           defaultChecked: !!defaultValue,
+          "data-testid": dataTestId,
           onChange: (e) => onChange(e.target.checked, e),
           disabled
         }
@@ -2522,28 +2524,31 @@ function Form({
 }) {
   const [errors, setErrors] = useState({});
   const [submitAttempted, setSubmitAttempted] = useState(false);
-  const validate = useCallback(async () => {
-    let invalid = false;
-    const newErrors = {};
-    Object.entries(data).forEach(([name, value]) => {
-      if (!validators[name]) {
-        return;
-      }
-      newErrors[name] = validators[name].map((validator) => {
-        const validation = validator(value);
-        if (validation) {
-          invalid = true;
+  const validate = useCallback(
+    async (triggeredBySubmit) => {
+      let invalid = false;
+      const newErrors = {};
+      Object.entries(data).forEach(([name, value]) => {
+        if (!validators[name]) {
+          return;
         }
-        return validation;
-      }).filter((v) => v);
-    });
-    setErrors(newErrors);
-    onValidation(newErrors);
-    if (process.env.NODE_ENV === "development") {
-      console.info("Form errors", newErrors);
-    }
-    return invalid;
-  }, [data]);
+        newErrors[name] = validators[name].map((validator) => {
+          const validation = validator(value);
+          if (validation) {
+            invalid = true;
+          }
+          return validation;
+        }).filter((v) => v);
+      });
+      setErrors(newErrors);
+      onValidation(newErrors, triggeredBySubmit);
+      if (process.env.NODE_ENV === "development") {
+        console.info("Form errors", newErrors);
+      }
+      return invalid;
+    },
+    [data]
+  );
   useEffect(() => {
     if (submitAttempted) {
       validate();
@@ -2551,7 +2556,7 @@ function Form({
   }, [validate, submitAttempted]);
   async function submit(event) {
     event.preventDefault();
-    const invalid = await validate();
+    const invalid = await validate(true);
     if (invalid) {
       setSubmitAttempted(true);
       return;