@formality-ui/react 0.2.4 → 0.3.0

package/dist/index.cjs

@@ -149,6 +149,7 @@ function Form({
   record,
   autoSave = false,
   debounce: debounceMs = 1e3,
+  mode,
   validate
 }) {
   const providerConfig = useConfigContext();
@@ -163,12 +164,18 @@ function Form({
     return result;
   }, [providerConfig.inputs, formConfig.inputs]);
   const defaultValues = react.useMemo(() => {
-    return core.resolveAllInitialValues(config, mergedInputs, record ?? {});
+    const resolved = core.resolveAllInitialValues(config, mergedInputs, record ?? {});
+    const baseline = { ...record ?? {}, ...resolved };
+    for (const fieldName of Object.keys(config)) {
+      if (!(fieldName in baseline)) baseline[fieldName] = void 0;
+    }
+    return baseline;
   }, [config, mergedInputs, record]);
   const methods = reactHookForm.useForm({
-    mode: "onChange",
+    mode: mode ?? "onChange",
     defaultValues,
-    values: record
+    values: defaultValues
+    // was: `record as any` — see baseline comment above
   });
   const fieldRegistry = react.useRef(/* @__PURE__ */ new Set());
   const [registeredFields, setRegisteredFields] = react.useState(
@@ -334,8 +341,10 @@ function Form({
   }, [methods, config, record, defaultValues]);
   const handleSubmit = react.useCallback(
     async (values, overrideOnSubmit) => {
-      for (const [, isValidating] of validatingFields.current) {
-        if (isValidating) return;
+      for (const [fieldName, isValidating] of validatingFields.current) {
+        if (!isValidating) continue;
+        const subscribers = invertedSubscriptions.current.get(fieldName);
+        if (subscribers && subscribers.size > 0) return;
       }
       if (validate) {
         const errors = await validate(values);
@@ -406,9 +415,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;
       }
     }
@@ -922,13 +942,12 @@ function useSubscriptions(fieldName, subscriptions) {
     };
   }, [fieldName, subscriptions, addSubscription, removeSubscription]);
 }
-function Field({
+function useField({
   name,
   type: typeProp,
   disabled: disabledProp,
   hidden: hiddenProp,
   children,
-  shouldRegister = true,
   inputConfig: inputConfigProp,
   ...restProps
 }) {
@@ -936,8 +955,6 @@ function Field({
     config,
     formConfig,
     methods,
-    registerField,
-    unregisterField,
     registerWatcherSetter,
     unregisterWatcherSetter,
     changeField,
@@ -966,12 +983,6 @@ function Field({
     };
     return inputConfigProp ? { ...baseInputConfig, ...inputConfigProp } : baseInputConfig;
   }, [type, providerConfig.inputs, formConfig.inputs, inputConfigProp]);
-  react.useEffect(() => {
-    if (shouldRegister) {
-      registerField(name);
-      return () => unregisterField(name);
-    }
-  }, [name, shouldRegister, registerField, unregisterField]);
   const [watchers, setWatchers] = react.useState({});
   react.useEffect(() => {
     registerWatcherSetter(name, setWatchers);
@@ -1184,10 +1195,14 @@ function Field({
       inputConfig
     ]
   );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const fieldStateRef = react.useRef(
+    {}
+  );
+  const formStateRef = react.useRef(
+    {}
+  );
+  const fieldPropsRef = react.useRef({});
+  const renderedField = isVisible ? /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
       control: methods.control,
@@ -1238,13 +1253,16 @@ function Field({
             ...stateInjection
           }
         });
+        fieldStateRef.current = fieldState;
+        formStateRef.current = formState;
+        fieldPropsRef.current = finalProps;
         const Component = inputConfig.component;
         const isHostComponent = typeof inputConfig.component === "string";
         const template = inputConfig.template ?? providerConfig.inputTemplates[type] ?? providerConfig.defaultInputTemplate;
         const TemplateComponent = template;
-        let renderedField;
+        let renderedFieldEl;
         if (TemplateComponent) {
-          renderedField = /* @__PURE__ */ jsxRuntime.jsx(
+          renderedFieldEl = /* @__PURE__ */ jsxRuntime.jsx(
             TemplateComponent,
             {
               Field: Component,
@@ -1267,27 +1285,64 @@ function Field({
               strippedHostProps[key] = value;
             }
           }
-          renderedField = react.createElement(inputConfig.component, {
+          renderedFieldEl = react.createElement(inputConfig.component, {
             ...strippedHostProps,
             ref: finalProps.forwardRef
           });
         } else {
-          renderedField = /* @__PURE__ */ jsxRuntime.jsx(Component, { ...finalProps });
+          renderedFieldEl = /* @__PURE__ */ jsxRuntime.jsx(Component, { ...finalProps });
         }
         if (typeof children === "function") {
           const result = children({
             fieldState,
-            renderedField,
+            renderedField: renderedFieldEl,
             fieldProps: finalProps,
             watchers,
             formState
           });
           return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: result });
         }
-        return renderedField;
+        return renderedFieldEl;
       }
     }
-  );
+  ) : null;
+  return {
+    fieldState: fieldStateRef.current,
+    renderedField,
+    fieldProps: fieldPropsRef.current,
+    watchers,
+    formState: formStateRef.current
+  };
+}
+
+// src/components/Field.tsx
+function Field({
+  name,
+  type: typeProp,
+  disabled: disabledProp,
+  hidden: hiddenProp,
+  children,
+  shouldRegister = true,
+  inputConfig: inputConfigProp,
+  ...restProps
+}) {
+  const { registerField, unregisterField } = useFormContext();
+  react.useEffect(() => {
+    if (shouldRegister) {
+      registerField(name);
+      return () => unregisterField(name);
+    }
+  }, [name, shouldRegister, registerField, unregisterField]);
+  const { renderedField } = useField({
+    name,
+    type: typeProp,
+    disabled: disabledProp,
+    hidden: hiddenProp,
+    children,
+    inputConfig: inputConfigProp,
+    ...restProps
+  });
+  return renderedField;
 }
 function FieldGroup({ name, children }) {
   const { formConfig } = useFormContext();
@@ -1444,6 +1499,7 @@ exports.makeDeepProxyState = makeDeepProxyState;
 exports.makeProxyState = makeProxyState;
 exports.useConditions = useConditions;
 exports.useConfigContext = useConfigContext;
+exports.useField = useField;
 exports.useFormContext = useFormContext;
 exports.useFormState = useFormState;
 exports.useGroupContext = useGroupContext;