@formality-ui/react 0.2.3 → 0.2.5

package/dist/index.cjs

@@ -149,6 +149,7 @@ function Form({
   record,
   autoSave = false,
   debounce: debounceMs = 1e3,
+  mode,
   validate
 }) {
   const providerConfig = useConfigContext();
@@ -166,7 +167,7 @@ function Form({
     return core.resolveAllInitialValues(config, mergedInputs, record ?? {});
   }, [config, mergedInputs, record]);
   const methods = reactHookForm.useForm({
-    mode: "onChange",
+    mode: mode ?? "onChange",
     defaultValues,
     values: record
   });
@@ -406,9 +407,20 @@ function Form({
     if (!validationsComplete || executionVersionRef.current !== executionVersion) {
       return;
     }
-    for (const fieldName of changedFields) {
-      const fieldState = methods.getFieldState(fieldName);
-      if (fieldState.error) {
+    const changedArray = [...changedFields];
+    if (changedArray.length > 0) {
+      const changedValid = await methods.trigger(changedArray);
+      if (executionVersionRef.current !== executionVersion) {
+        return;
+      }
+      if (!changedValid) {
+        return;
+      }
+      const changedValidationsComplete = await waitForFieldValidation(
+        changedArray,
+        executionVersion
+      );
+      if (!changedValidationsComplete || executionVersionRef.current !== executionVersion) {
         return;
       }
     }
@@ -1088,6 +1100,40 @@ function Field({
   const label = react.useMemo(() => {
     return core.resolveLabel(name, fieldConfig, fieldSelectProps, restProps);
   }, [name, fieldConfig, fieldSelectProps, restProps]);
+  const passSubscriptionsEnabled = fieldConfig.passSubscriptions === true;
+  const provideStateEnabled = fieldConfig.provideState === true;
+  const subscribedWatchNames = react.useMemo(
+    () => passSubscriptionsEnabled && allSubscriptions.length > 0 ? allSubscriptions : [],
+    [passSubscriptionsEnabled, allSubscriptions]
+  );
+  const subscribedValues = reactHookForm.useWatch({
+    control: methods.control,
+    name: subscribedWatchNames.length > 0 ? subscribedWatchNames : []
+  });
+  const subscribedState = react.useMemo(() => {
+    if (!passSubscriptionsEnabled || subscribedWatchNames.length === 0) {
+      return void 0;
+    }
+    const result = {};
+    const values = Array.isArray(subscribedValues) ? subscribedValues : [subscribedValues];
+    subscribedWatchNames.forEach((fieldName, i) => {
+      const fs = methods.getFieldState(fieldName);
+      result[fieldName] = makeProxyState({
+        value: values[i],
+        isTouched: fs.isTouched,
+        isDirty: fs.isDirty,
+        isValidating: fs.isValidating,
+        error: fs.error,
+        invalid: fs.invalid
+      });
+    });
+    return result;
+  }, [
+    passSubscriptionsEnabled,
+    subscribedWatchNames,
+    subscribedValues,
+    methods
+  ]);
   const validationRules = react.useMemo(() => {
     return {
       ...fieldConfig.rules,
@@ -1165,6 +1211,24 @@ function Field({
           inputConfig.formatter,
           providerConfig.formatters
         );
+        const stateInjection = {};
+        if (provideStateEnabled) {
+          stateInjection[providerConfig.defaultSubscriptionPropName] = makeProxyState({
+            value: field.value,
+            isTouched: fieldState.isTouched,
+            isDirty: fieldState.isDirty,
+            isValidating: fieldState.isValidating,
+            error: fieldState.error,
+            invalid: fieldState.invalid
+          });
+        }
+        if (passSubscriptionsEnabled && subscribedState) {
+          const subsPropName = fieldConfig.passSubscriptionsAs ?? providerConfig.defaultSubscriptionPropName;
+          stateInjection[subsPropName] = subscribedState;
+        }
+        if (provideStateEnabled || passSubscriptionsEnabled) {
+          stateInjection.formState = formState;
+        }
         const finalProps = core.mergeFieldProps({
           providerDefaultFieldProps: providerConfig.defaultFieldProps,
           providerSelectDefaultFieldProps: providerSelectProps,
@@ -1182,7 +1246,8 @@ function Field({
             [inputConfig.inputFieldProp ?? "value"]: formattedValue,
             onChange: handleChange(field.onChange),
             onBlur: field.onBlur,
-            forwardRef: field.ref
+            forwardRef: field.ref,
+            ...stateInjection
           }
         });
         const Component = inputConfig.component;
@@ -1201,10 +1266,22 @@ function Field({
             }
           );
         } else if (isHostComponent) {
-          const { forwardRef: hostRef, ...restHostProps } = finalProps;
+          const subsPropName = fieldConfig.passSubscriptionsAs ?? providerConfig.defaultSubscriptionPropName;
+          const strippedHostProps = {};
+          const nonDomKeys = /* @__PURE__ */ new Set([
+            "forwardRef",
+            "formState",
+            "state",
+            subsPropName
+          ]);
+          for (const [key, value] of Object.entries(finalProps)) {
+            if (!nonDomKeys.has(key)) {
+              strippedHostProps[key] = value;
+            }
+          }
           renderedField = react.createElement(inputConfig.component, {
-            ...restHostProps,
-            ref: hostRef
+            ...strippedHostProps,
+            ref: finalProps.forwardRef
           });
         } else {
           renderedField = /* @__PURE__ */ jsxRuntime.jsx(Component, { ...finalProps });