@formality-ui/react 0.2.5 → 0.3.1

package/dist/index.cjs

@@ -164,12 +164,25 @@ 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: 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(
@@ -197,11 +210,6 @@ function Form({
       invertedSubscriptions.current.set(target, /* @__PURE__ */ new Set());
     }
     invertedSubscriptions.current.get(target).add(subscriber);
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[Formality Subscription] "${subscriber}" added to watch "${target}"`
-      );
-    }
     const setter = watcherSetters.current.get(target);
     if (setter) {
       setter((prev) => ({ ...prev, [subscriber]: true }));
@@ -214,20 +222,7 @@ function Form({
   }, []);
   const removeSubscription = react.useCallback(
     (target, subscriber) => {
-      const subscribers = invertedSubscriptions.current.get(target);
-      const subscriptionExists = subscribers?.has(subscriber) ?? false;
       invertedSubscriptions.current.get(target)?.delete(subscriber);
-      if (process.env.NODE_ENV !== "production") {
-        if (subscriptionExists) {
-          console.warn(
-            `[Formality Subscription] "${subscriber}" removed from watching "${target}"`
-          );
-        } else {
-          console.warn(
-            `[Formality Subscription] WARNING: Double-cleanup attempt - "${subscriber}" was not watching "${target}"`
-          );
-        }
-      }
       const setter = watcherSetters.current.get(target);
       if (setter) {
         setter((prev) => {
@@ -335,8 +330,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);
@@ -912,20 +909,10 @@ function useSubscriptions(fieldName, subscriptions) {
     runSubscriptionsRef.current.set(currentRunId, [...subscriptions]);
     subscriptions.forEach((target) => {
       addSubscription(target, fieldName);
-      if (process.env.NODE_ENV !== "production") {
-        console.warn(
-          `[Formality Subscription] Run ${currentRunId}: "${fieldName}" subscribing to "${target}"`
-        );
-      }
     });
     return () => {
       const thisRunSubscriptions = runSubscriptionsRef.current.get(currentRunId);
       if (thisRunSubscriptions) {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn(
-            `[Formality Subscription] Run ${currentRunId}: "${fieldName}" cleaning up [${thisRunSubscriptions.join(", ")}]`
-          );
-        }
         [...thisRunSubscriptions].reverse().forEach((target) => {
           removeSubscription(target, fieldName);
         });
@@ -934,13 +921,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
 }) {
@@ -948,8 +934,6 @@ function Field({
     config,
     formConfig,
     methods,
-    registerField,
-    unregisterField,
     registerWatcherSetter,
     unregisterWatcherSetter,
     changeField,
@@ -978,12 +962,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);
@@ -1196,10 +1174,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,
@@ -1250,13 +1232,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,
@@ -1279,27 +1264,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();
@@ -1456,6 +1478,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;