react-f0rm 0.5.1 → 0.6.1

package/dist/index.umd.js

@@ -1282,7 +1282,8 @@
     rules,
     validateDebounce,
     delayError,
-    disabled
+    disabled,
+    mode: modeOption
   }, Context) {
     const contextForm = React.useContext(Context);
     const form = f1 || contextForm;
@@ -1302,6 +1303,7 @@
     const error = errorObject?.message;
     const value = useValueByPath(form, path);
     const formDisabled = useWatch(form.emitter, "disabled", () => form.disabled);
+    const mode = modeOption ?? form.mode;
     React.useEffect(() => {
       if (initialValue === void 0) return;
       if (getValueByPath(form, path) === void 0) {
@@ -1310,12 +1312,12 @@
     }, [form, path, initialValue]);
     const onChange = useStageFn((v) => {
       setValueByPath(form, path, v);
-      if (form.mode === "onChange" || form.mode === "all" || form.mode === "onTouched" && hasTouchedByPath(form, path) || liveErrors.length > 0 && form.reValidateMode === "onChange")
+      if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || liveErrors.length > 0 && form.reValidateMode === "onChange")
         validator();
     });
     const onBlur = useStageFn(() => {
       setTouchedByPath(form, path);
-      if (form.mode === "onBlur" || form.mode === "onTouched" || form.mode === "all" || liveErrors.length > 0 && form.reValidateMode === "onBlur")
+      if (mode === "onBlur" || mode === "onTouched" || mode === "all" || liveErrors.length > 0 && form.reValidateMode === "onBlur")
         validator();
     });
     React.useEffect(
@@ -1515,6 +1517,12 @@
     const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
     return id || "field";
   }
+  function ariaProps(error, fieldKey, props) {
+    return {
+      "aria-invalid": error ? true : props["aria-invalid"],
+      "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"]
+    };
+  }
   function fieldErrorId(name) {
     return errorIdFromKey(create$1(name).key);
   }
@@ -1534,6 +1542,7 @@
       validateDebounce,
       disabled,
       delayError,
+      mode,
       ...props
     }, ref) => {
       const innerRef = React__namespace.useRef(null);
@@ -1562,6 +1571,7 @@
         validateDebounce,
         delayError,
         disabled,
+        mode,
         validate: (...params) => {
           const el = innerRef.current;
           if (el && typeof el.checkValidity === "function") {
@@ -1606,7 +1616,6 @@
       );
       const toValue = eventToValue ?? ((e) => e.target.value);
       const errorId = errorIdFromKey(fieldKey);
-      const describedBy = error ? [props["aria-describedby"], errorId].filter(Boolean).join(" ") : props["aria-describedby"];
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         Component,
         {
@@ -1615,8 +1624,7 @@
           onBlur,
           ...asProps,
           ...valueToProps ? valueToProps(value) : { value },
-          "aria-invalid": error ? true : props["aria-invalid"],
-          "aria-describedby": describedBy,
+          ...ariaProps(error, fieldKey, props),
           disabled: isDisabled,
           onChange: (e) => onChange(toValue(e)),
           ref: mergedRef
@@ -1635,6 +1643,7 @@
       validateDebounce,
       disabled,
       delayError,
+      mode,
       ...props
     }, ref) => {
       const {
@@ -1653,7 +1662,8 @@
         rules,
         validateDebounce,
         delayError,
-        disabled
+        disabled,
+        mode
       });
       return /* @__PURE__ */ React__namespace.createElement(
         "input",
@@ -1663,8 +1673,7 @@
           onBlur,
           type: "checkbox",
           checked: !!value,
-          "aria-invalid": error ? true : props["aria-invalid"],
-          "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"],
+          ...ariaProps(error, fieldKey, props),
           disabled: isDisabled,
           onChange: (e) => onChange(e.target.checked),
           ref
@@ -1689,6 +1698,7 @@
       validateDebounce,
       disabled,
       delayError,
+      mode,
       ...props
     }, ref) => {
       const {
@@ -1707,7 +1717,8 @@
         rules,
         validateDebounce,
         delayError,
-        disabled
+        disabled,
+        mode
       });
       return /* @__PURE__ */ React__namespace.createElement(
         "select",
@@ -1717,8 +1728,7 @@
           onBlur,
           multiple,
           value: toSelectValue(multiple, value),
-          "aria-invalid": error ? true : props["aria-invalid"],
-          "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"],
+          ...ariaProps(error, fieldKey, props),
           disabled: isDisabled,
           onChange: (e) => onChange(
             multiple ? Array.from(e.target.selectedOptions, (option) => option.value) : e.target.value