@formality-ui/react 0.3.0 → 0.4.0

package/README.md

@@ -67,8 +67,8 @@ function App() {
   return (
     <FormalityProvider inputs={inputs}>
       <Form config={config} onSubmit={(values) => console.log(values)}>
-        {({ methods }) => (
-          <form onSubmit={methods.handleSubmit(console.log)}>
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit(console.log)}>
             <Field name="name" />
             <Field name="email" />
             <Field name="subscribed" />

package/dist/index.cjs

@@ -164,8 +164,15 @@ function Form({
     return result;
   }, [providerConfig.inputs, formConfig.inputs]);
   const defaultValues = react.useMemo(() => {
-    const resolved = core.resolveAllInitialValues(config, mergedInputs, record ?? {});
-    const baseline = { ...record ?? {}, ...resolved };
+    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;
     }
@@ -203,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 }));
@@ -220,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) => {
@@ -290,7 +279,11 @@ function Form({
         for (const field of affected) {
           pendingAffectedFields.current.add(field);
         }
-        const fieldDebounce = inputConfig?.debounce;
+        const fieldConfig = config[name];
+        const fieldDebounce = core.resolveFieldOverType(
+          fieldConfig?.debounce,
+          inputConfig?.debounce
+        );
         if (fieldDebounce === false) {
           executeAutoSaveRef.current?.();
         } else if (typeof fieldDebounce === "number") {
@@ -300,7 +293,7 @@ function Form({
         }
       }
     },
-    [autoSave, getAffectedFields]
+    [autoSave, getAffectedFields, config]
   );
   const setFieldValidating = react.useCallback(
     (name, isValidating) => {
@@ -604,13 +597,17 @@ function transformValuesForSubmit(values, config, inputs) {
     const fieldConfig = config[name];
     const type = fieldConfig?.type ?? "textField";
     const inputConfig = inputs[type];
-    if (inputConfig) {
-      const submitName = core.transformFieldName(name, inputConfig.getSubmitField);
-      const submitValue = core.extractValueField(value, inputConfig.valueField);
-      result[submitName] = submitValue;
-    } else {
-      result[name] = value;
-    }
+    const effectiveGetSubmitField = core.resolveFieldOverType(
+      fieldConfig?.getSubmitField,
+      inputConfig?.getSubmitField
+    );
+    const effectiveValueField = core.resolveFieldOverType(
+      fieldConfig?.valueField,
+      inputConfig?.valueField
+    );
+    const submitName = core.transformFieldName(name, effectiveGetSubmitField);
+    const submitValue = core.extractValueField(value, effectiveValueField);
+    result[submitName] = submitValue;
   }
   return result;
 }
@@ -920,20 +917,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);
         });
@@ -1097,8 +1084,22 @@ function useField({
     groupContext.state.isVisible
   ]);
   const label = react.useMemo(() => {
-    return core.resolveLabel(name, fieldConfig, fieldSelectProps, restProps);
-  }, [name, fieldConfig, fieldSelectProps, restProps]);
+    return core.resolveLabel(
+      name,
+      fieldConfig,
+      fieldSelectProps,
+      restProps,
+      providerSelectProps,
+      formSelectProps
+    );
+  }, [
+    name,
+    fieldConfig,
+    fieldSelectProps,
+    restProps,
+    providerSelectProps,
+    formSelectProps
+  ]);
   const passSubscriptionsEnabled = fieldConfig.passSubscriptions === true;
   const provideStateEnabled = fieldConfig.provideState === true;
   const subscribedWatchNames = react.useMemo(
@@ -1177,23 +1178,25 @@ function useField({
     name,
     setFieldValidating
   ]);
+  const effectiveParser = react.useMemo(
+    () => core.resolveFieldOverType(fieldConfig.parser, inputConfig.parser),
+    [fieldConfig.parser, inputConfig.parser]
+  );
+  const effectiveFormatter = react.useMemo(
+    () => core.resolveFieldOverType(fieldConfig.formatter, inputConfig.formatter),
+    [fieldConfig.formatter, inputConfig.formatter]
+  );
   const handleChange = react.useCallback(
     (onChange) => (newValue) => {
       const parsedValue = core.parse(
         newValue,
-        inputConfig.parser,
+        effectiveParser,
         providerConfig.parsers
       );
       onChange(parsedValue);
       changeField(name, parsedValue, inputConfig);
     },
-    [
-      inputConfig.parser,
-      providerConfig.parsers,
-      changeField,
-      name,
-      inputConfig
-    ]
+    [effectiveParser, providerConfig.parsers, changeField, name, inputConfig]
   );
   const fieldStateRef = react.useRef(
     {}
@@ -1211,7 +1214,7 @@ function useField({
       render: ({ field, fieldState, formState }) => {
         const formattedValue = core.format(
           field.value,
-          inputConfig.formatter,
+          effectiveFormatter,
           providerConfig.formatters
         );
         const stateInjection = {};