@formality-ui/react 0.0.0 → 0.1.0

package/dist/index.cjs

@@ -25,7 +25,9 @@ function useConfigContext() {
 var FormContext = react.createContext(null);
 FormContext.displayName = "FormalityFormContext";
 function useFormContext() {
-  const context = react.useContext(FormContext);
+  const context = react.useContext(
+    FormContext
+  );
   if (!context) {
     throw new Error(
       "useFormContext must be used within a Form component. Make sure your component is wrapped in a <Form> component."
@@ -111,7 +113,6 @@ function makeDeepProxyState(source) {
   const result = {};
   for (const key in source) {
     if (Object.prototype.hasOwnProperty.call(source, key)) {
-      source[key];
       Object.defineProperty(result, key, {
         get: () => {
           const currentValue = source[key];
@@ -193,6 +194,11 @@ 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 }));
@@ -205,7 +211,20 @@ 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) => {
@@ -255,14 +274,18 @@ function Form({
     return affected;
   }, []);
   const changeField = react.useCallback(
-    (name, value) => {
+    (name, value, inputConfig) => {
       if (autoSave) {
         pendingChangedFields.current.add(name);
         const affected = getAffectedFields(name);
         for (const field of affected) {
           pendingAffectedFields.current.add(field);
         }
-        debouncedSubmit();
+        if (inputConfig?.debounce === false) {
+          executeAutoSaveRef.current?.();
+        } else {
+          debouncedSubmitRef.current?.();
+        }
       }
     },
     [autoSave, getAffectedFields]
@@ -305,7 +328,7 @@ function Form({
     };
   }, [methods, config, record, defaultValues]);
   const handleSubmit = react.useCallback(
-    async (values) => {
+    async (values, overrideOnSubmit) => {
       for (const [, isValidating] of validatingFields.current) {
         if (isValidating) return;
       }
@@ -318,12 +341,26 @@ function Form({
           return;
         }
       }
-      const submitValues = transformValuesForSubmit(values, config, mergedInputs);
-      await onSubmit?.(submitValues);
+      const submitValues = transformValuesForSubmit(
+        values,
+        config,
+        mergedInputs
+      );
+      const sink = overrideOnSubmit ?? onSubmit;
+      await sink?.(submitValues);
     },
     [validate, methods, onSubmit, config, mergedInputs]
   );
+  const handleRenderSubmit = react.useCallback(
+    (userOnSubmit) => {
+      return methods.handleSubmit(async (values) => {
+        await handleSubmit(values, userOnSubmit);
+      });
+    },
+    [methods, handleSubmit]
+  );
   const debouncedSubmitRef = react.useRef();
+  const executeAutoSaveRef = react.useRef();
   const waitForFieldValidation = react.useCallback(
     async (fields, version) => {
       const maxWaitMs = 1e4;
@@ -355,29 +392,36 @@ function Form({
     if (changedFields.size === 0) {
       return;
     }
-    const fieldsToValidate = [...changedFields, ...affectedFields];
+    const fieldsToWaitFor = [...changedFields, ...affectedFields];
+    const fieldsToTrigger = [...affectedFields];
     const validationsComplete = await waitForFieldValidation(
-      fieldsToValidate,
+      fieldsToWaitFor,
       executionVersion
     );
     if (!validationsComplete || executionVersionRef.current !== executionVersion) {
       return;
     }
-    if (fieldsToValidate.length > 0) {
-      const isValid = await methods.trigger(fieldsToValidate);
+    for (const fieldName of changedFields) {
+      const fieldState = methods.getFieldState(fieldName);
+      if (fieldState.error) {
+        return;
+      }
+    }
+    if (fieldsToTrigger.length > 0) {
+      const isValid = await methods.trigger(fieldsToTrigger);
       if (executionVersionRef.current !== executionVersion) {
         return;
       }
       if (!isValid) {
         return;
       }
-    }
-    const postTriggerComplete = await waitForFieldValidation(
-      fieldsToValidate,
-      executionVersion
-    );
-    if (!postTriggerComplete || executionVersionRef.current !== executionVersion) {
-      return;
+      const postTriggerComplete = await waitForFieldValidation(
+        fieldsToTrigger,
+        executionVersion
+      );
+      if (!postTriggerComplete || executionVersionRef.current !== executionVersion) {
+        return;
+      }
     }
     const formState = methods.formState;
     if (Object.keys(formState.errors).length > 0) {
@@ -386,7 +430,27 @@ function Form({
     const values = methods.getValues();
     await handleSubmit(values);
   }, [methods, handleSubmit, waitForFieldValidation]);
+  executeAutoSaveRef.current = executeAutoSave;
   react.useEffect(() => {
+    if (debounceMs === false) {
+      const immediateFn = Object.assign(
+        () => {
+          executeAutoSave();
+        },
+        {
+          cancel: () => {
+          },
+          // No-op for immediate function
+          flush: () => executeAutoSave(),
+          // Execute immediately on flush
+          pending: () => false
+          // Never pending when immediate
+        }
+      );
+      debouncedSubmitRef.current = immediateFn;
+      return () => {
+      };
+    }
     const debouncedFn = lodashEs.debounce(() => {
       executeAutoSave();
     }, debounceMs);
@@ -399,12 +463,13 @@ function Form({
       debouncedFn.cancel();
     };
   }, [executeAutoSave, debounceMs]);
-  const debouncedSubmit = react.useCallback(() => {
-    debouncedSubmitRef.current?.();
-  }, []);
   const submitImmediate = react.useCallback(() => {
-    debouncedSubmitRef.current?.flush();
-  }, []);
+    if (debouncedSubmitRef.current?.flush) {
+      debouncedSubmitRef.current.flush();
+    } else {
+      executeAutoSave();
+    }
+  }, [executeAutoSave]);
   const unusedFields = react.useMemo(() => {
     const allFields = Object.keys(config);
     return allFields.filter((name) => !registeredFields.has(name));
@@ -472,6 +537,7 @@ function Form({
     unusedFields,
     formState: methods.formState,
     methods,
+    handleSubmit: handleRenderSubmit,
     resolvedTitle
   }) : children }) }) });
 }
@@ -492,9 +558,21 @@ function transformValuesForSubmit(values, config, inputs) {
   return result;
 }
 function useInferredInputs(options) {
-  const { selectProps, conditions = [], subscribesTo = [] } = options;
+  const {
+    selectProps,
+    formDefaultFieldProps,
+    providerDefaultFieldProps,
+    conditions = [],
+    subscribesTo = []
+  } = options;
   return react.useMemo(() => {
     const inferred = [...subscribesTo];
+    if (providerDefaultFieldProps) {
+      inferred.push(...core.inferFieldsFromDescriptor(providerDefaultFieldProps));
+    }
+    if (formDefaultFieldProps) {
+      inferred.push(...core.inferFieldsFromDescriptor(formDefaultFieldProps));
+    }
     if (selectProps) {
       inferred.push(...core.inferFieldsFromDescriptor(selectProps));
     }
@@ -502,12 +580,18 @@ function useInferredInputs(options) {
       inferred.push(...core.inferFieldsFromConditions(conditions));
     }
     return [...new Set(inferred)];
-  }, [selectProps, conditions, subscribesTo]);
+  }, [
+    providerDefaultFieldProps,
+    formDefaultFieldProps,
+    selectProps,
+    conditions,
+    subscribesTo
+  ]);
 }
 
 // src/hooks/useConditions.ts
 function useConditions(options) {
-  const { conditions, subscribesTo, props } = options;
+  const { conditions, subscribesTo, props, allFieldsConfig } = options;
   const { record, methods } = useFormContext();
   const watchFields = useInferredInputs({
     conditions,
@@ -531,12 +615,14 @@ function useConditions(options) {
     }
     return values;
   }, [watchFields, watchedValues]);
-  const fieldStates = react.useMemo(() => {
+  const baseFieldStates = react.useMemo(() => {
     const states = {};
-    if (watchFields.length === 0) {
+    const currentFieldName = props?.name;
+    const allFieldsForPass1 = currentFieldName ? [.../* @__PURE__ */ new Set([...watchFields, currentFieldName])] : watchFields;
+    if (allFieldsForPass1.length === 0) {
       return states;
     }
-    watchFields.forEach((fieldName) => {
+    allFieldsForPass1.forEach((fieldName) => {
       const fieldState = methods.getFieldState(fieldName);
       states[fieldName] = {
         value: fieldValues[fieldName],
@@ -546,10 +632,112 @@ function useConditions(options) {
         invalid: fieldState.invalid,
         isValidating: false
         // Not easily available per-field
+        // ❌ NO disabled property - this is critical for Pass 1 to prevent circular dependency
       };
     });
     return states;
-  }, [watchFields, fieldValues, methods]);
+  }, [watchFields, fieldValues, methods, props]);
+  const disabledStates = react.useMemo(() => {
+    const disabled = {};
+    const currentFieldName = props?.name;
+    const configFields = allFieldsConfig ? Object.keys(allFieldsConfig) : [];
+    const allFieldsForPass2 = [.../* @__PURE__ */ new Set([...watchFields, ...configFields])];
+    if (currentFieldName && !allFieldsForPass2.includes(currentFieldName)) {
+      allFieldsForPass2.push(currentFieldName);
+    }
+    if (allFieldsForPass2.length === 0) {
+      return disabled;
+    }
+    const allBaseStates = {};
+    for (const fieldName of allFieldsForPass2) {
+      if (baseFieldStates[fieldName]) {
+        allBaseStates[fieldName] = baseFieldStates[fieldName];
+      } else {
+        const fieldState = methods.getFieldState(fieldName);
+        allBaseStates[fieldName] = {
+          value: fieldValues[fieldName],
+          isTouched: fieldState.isTouched,
+          isDirty: fieldState.isDirty,
+          error: fieldState.error,
+          invalid: fieldState.invalid,
+          isValidating: false
+        };
+      }
+    }
+    let currentStates = allBaseStates;
+    let hasChanged = true;
+    let iteration = 0;
+    const maxIterations = 10;
+    while (hasChanged && iteration < maxIterations) {
+      hasChanged = false;
+      iteration++;
+      const newDisabled = {};
+      for (const fieldName of allFieldsForPass2) {
+        const fieldConfig = allFieldsConfig?.[fieldName];
+        const fieldConditions = fieldConfig?.conditions ?? [];
+        const configDisabled = fieldConfig?.disabled;
+        const result = core.evaluateConditions({
+          conditions: fieldConditions,
+          fieldValues,
+          fieldStates: currentStates,
+          record,
+          props: { name: fieldName }
+        });
+        newDisabled[fieldName] = configDisabled ?? result.disabled ?? false;
+      }
+      const newStates = {};
+      for (const fieldName of allFieldsForPass2) {
+        const baseState = allBaseStates[fieldName];
+        if (baseState) {
+          newStates[fieldName] = {
+            ...baseState,
+            disabled: newDisabled[fieldName]
+          };
+        }
+      }
+      for (const fieldName of allFieldsForPass2) {
+        const oldDisabled = disabled[fieldName];
+        const newDisabledValue = newDisabled[fieldName];
+        if (oldDisabled !== newDisabledValue) {
+          hasChanged = true;
+          disabled[fieldName] = newDisabledValue;
+        }
+      }
+      currentStates = newStates;
+    }
+    return disabled;
+  }, [
+    watchFields,
+    allFieldsConfig,
+    fieldValues,
+    baseFieldStates,
+    record,
+    props,
+    methods
+  ]);
+  const fieldStates = react.useMemo(() => {
+    const states = { ...baseFieldStates };
+    Object.entries(disabledStates).forEach(([fieldName, disabled]) => {
+      if (states[fieldName]) {
+        states[fieldName] = {
+          ...states[fieldName],
+          disabled
+        };
+      } else {
+        const fieldState = methods.getFieldState(fieldName);
+        states[fieldName] = {
+          value: fieldValues[fieldName],
+          isTouched: fieldState.isTouched,
+          isDirty: fieldState.isDirty,
+          error: fieldState.error,
+          invalid: fieldState.invalid,
+          isValidating: false,
+          disabled
+        };
+      }
+    });
+    return states;
+  }, [baseFieldStates, disabledStates, fieldValues, methods]);
   return react.useMemo(() => {
     if (conditions.length === 0) {
       return {
@@ -571,9 +759,17 @@ function useConditions(options) {
   }, [conditions, fieldValues, fieldStates, record, props]);
 }
 function usePropsEvaluation(options) {
-  const { selectProps, subscribesTo, fieldName } = options;
+  const {
+    selectProps,
+    formDefaultFieldProps,
+    providerDefaultFieldProps,
+    subscribesTo,
+    fieldName
+  } = options;
   const { record, methods } = useFormContext();
   const watchFields = useInferredInputs({
+    providerDefaultFieldProps,
+    formDefaultFieldProps,
     selectProps,
     subscribesTo
   });
@@ -584,10 +780,13 @@ function usePropsEvaluation(options) {
   const formState = react.useMemo(() => {
     const fields = {};
     if (watchFields.length > 0) {
-      const values = watchFields.length === 1 ? { [watchFields[0]]: watchedValues } : watchFields.reduce((acc, field, i) => {
-        acc[field] = watchedValues[i];
-        return acc;
-      }, {});
+      const values = Array.isArray(watchedValues) ? watchFields.reduce(
+        (acc, field, i) => {
+          acc[field] = watchedValues[i];
+          return acc;
+        },
+        {}
+      ) : watchedValues;
       watchFields.forEach((name) => {
         fields[name] = makeProxyState({
           value: values[name],
@@ -613,40 +812,75 @@ function usePropsEvaluation(options) {
     };
   }, [watchFields, watchedValues, record]);
   return react.useMemo(() => {
-    if (!selectProps) {
-      return {};
+    let providerResult = {};
+    if (providerDefaultFieldProps) {
+      if (typeof providerDefaultFieldProps === "function") {
+        providerResult = providerDefaultFieldProps(formState, methods) ?? {};
+      } else {
+        const context = core.buildFieldContext(formState, fieldName);
+        providerResult = core.evaluateDescriptor(providerDefaultFieldProps, context) ?? {};
+      }
+    }
+    let formResult = {};
+    if (formDefaultFieldProps) {
+      if (typeof formDefaultFieldProps === "function") {
+        formResult = formDefaultFieldProps(formState, methods) ?? {};
+      } else {
+        const context = core.buildFieldContext(formState, fieldName);
+        formResult = core.evaluateDescriptor(formDefaultFieldProps, context) ?? {};
+      }
     }
-    if (typeof selectProps === "function") {
-      const result2 = selectProps(formState, methods);
-      return result2 ?? {};
+    let fieldResult = {};
+    if (selectProps) {
+      if (typeof selectProps === "function") {
+        fieldResult = selectProps(formState, methods) ?? {};
+      } else {
+        const context = core.buildFieldContext(formState, fieldName);
+        fieldResult = core.evaluateDescriptor(selectProps, context) ?? {};
+      }
     }
-    const context = core.buildFieldContext(formState, fieldName);
-    const result = core.evaluateDescriptor(selectProps, context);
-    return result ?? {};
-  }, [selectProps, formState, methods, fieldName]);
+    return {
+      providerSelectProps: providerResult,
+      formSelectProps: formResult,
+      fieldSelectProps: fieldResult
+    };
+  }, [
+    providerDefaultFieldProps,
+    formDefaultFieldProps,
+    selectProps,
+    formState,
+    methods,
+    fieldName
+  ]);
 }
 function useSubscriptions(fieldName, subscriptions) {
   const { addSubscription, removeSubscription } = useFormContext();
-  const prevSubscriptionsRef = react.useRef([]);
+  const runIdRef = react.useRef(0);
+  const runSubscriptionsRef = react.useRef(/* @__PURE__ */ new Map());
   react.useEffect(() => {
-    const prevSubscriptions = prevSubscriptionsRef.current;
-    const toRemove = prevSubscriptions.filter(
-      (target) => !subscriptions.includes(target)
-    );
-    const toAdd = subscriptions.filter(
-      (target) => !prevSubscriptions.includes(target)
-    );
-    toRemove.forEach((target) => {
-      removeSubscription(target, fieldName);
-    });
-    toAdd.forEach((target) => {
+    const currentRunId = ++runIdRef.current;
+    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}"`
+        );
+      }
     });
-    prevSubscriptionsRef.current = subscriptions;
     return () => {
-      subscriptions.forEach((target) => {
-        removeSubscription(target, fieldName);
-      });
+      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);
+        });
+        runSubscriptionsRef.current.delete(currentRunId);
+      }
     };
   }, [fieldName, subscriptions, addSubscription, removeSubscription]);
 }
@@ -657,6 +891,7 @@ function Field({
   hidden: hiddenProp,
   children,
   shouldRegister = true,
+  inputConfig: inputConfigProp,
   ...restProps
 }) {
   const {
@@ -676,14 +911,23 @@ function Field({
   const type = typeProp ?? fieldConfig.type ?? "textField";
   const inputConfig = react.useMemo(() => {
     const formInputs = typeof formConfig.inputs === "function" ? formConfig.inputs(providerConfig.inputs) : formConfig.inputs ?? {};
-    const mergedInputs = { ...providerConfig.inputs };
+    const mergedInputs = {
+      ...providerConfig.inputs
+    };
     for (const [key, override] of Object.entries(formInputs)) {
       if (mergedInputs[key]) {
-        mergedInputs[key] = { ...mergedInputs[key], ...override };
+        mergedInputs[key] = {
+          ...mergedInputs[key],
+          ...override
+        };
       }
     }
-    return core.resolveInputConfig(type, mergedInputs) ?? { component: "input", defaultValue: "" };
-  }, [type, providerConfig.inputs, formConfig.inputs]);
+    const baseInputConfig = core.resolveInputConfig(type, mergedInputs) ?? {
+      component: "input",
+      defaultValue: ""
+    };
+    return inputConfigProp ? { ...baseInputConfig, ...inputConfigProp } : baseInputConfig;
+  }, [type, providerConfig.inputs, formConfig.inputs, inputConfigProp]);
   react.useEffect(() => {
     if (shouldRegister) {
       registerField(name);
@@ -701,13 +945,17 @@ function Field({
     subscribesTo: fieldConfig.subscribesTo
   });
   const allSubscriptions = react.useMemo(() => {
-    return [.../* @__PURE__ */ new Set([...inferredSubscriptions, ...groupContext.subscriptions])];
+    return [
+      .../* @__PURE__ */ new Set([...inferredSubscriptions, ...groupContext.subscriptions])
+    ];
   }, [inferredSubscriptions, groupContext.subscriptions]);
   useSubscriptions(name, allSubscriptions);
   const conditionResult = useConditions({
     conditions: fieldConfig.conditions ?? [],
     subscribesTo: fieldConfig.subscribesTo,
-    props: { name }
+    props: { name },
+    allFieldsConfig: config
+    // Pass all field configs for two-pass evaluation of disabled states
   });
   const setValueRef = react.useRef(methods.setValue);
   setValueRef.current = methods.setValue;
@@ -759,15 +1007,22 @@ function Field({
       return conditionResult.visible ?? true;
     if (!groupContext.state.isVisible) return false;
     return true;
-  }, [hiddenProp, fieldConfig.hidden, conditionResult, groupContext.state.isVisible]);
-  const evaluatedSelectProps = usePropsEvaluation({
+  }, [
+    hiddenProp,
+    fieldConfig.hidden,
+    conditionResult,
+    groupContext.state.isVisible
+  ]);
+  const { providerSelectProps, formSelectProps, fieldSelectProps } = usePropsEvaluation({
     selectProps: fieldConfig.selectProps,
+    formDefaultFieldProps: formConfig.selectDefaultFieldProps,
+    providerDefaultFieldProps: providerConfig.selectDefaultFieldProps,
     subscribesTo: fieldConfig.subscribesTo,
     fieldName: name
   });
   const label = react.useMemo(() => {
-    return core.resolveLabel(name, fieldConfig, evaluatedSelectProps, restProps);
-  }, [name, fieldConfig, evaluatedSelectProps, restProps]);
+    return core.resolveLabel(name, fieldConfig, fieldSelectProps, restProps);
+  }, [name, fieldConfig, fieldSelectProps, restProps]);
   const validationRules = react.useMemo(() => {
     return {
       ...fieldConfig.rules,
@@ -820,9 +1075,15 @@ function Field({
         providerConfig.parsers
       );
       onChange(parsedValue);
-      changeField(name, parsedValue);
+      changeField(name, parsedValue, inputConfig);
     },
-    [inputConfig.parser, providerConfig.parsers, changeField, name]
+    [
+      inputConfig.parser,
+      providerConfig.parsers,
+      changeField,
+      name,
+      inputConfig
+    ]
   );
   if (!isVisible) {
     return null;
@@ -841,14 +1102,12 @@ function Field({
         );
         const finalProps = core.mergeFieldProps({
           providerDefaultFieldProps: providerConfig.defaultFieldProps,
-          providerSelectDefaultFieldProps: {},
-          // Evaluated at provider level if needed
+          providerSelectDefaultFieldProps: providerSelectProps,
           formDefaultFieldProps: formConfig.defaultFieldProps,
-          formSelectDefaultFieldProps: {},
-          // Evaluated at form level if needed
+          formSelectDefaultFieldProps: formSelectProps,
           inputProps: inputConfig.props,
           fieldConfigProps: fieldConfig.props,
-          selectProps: evaluatedSelectProps,
+          selectProps: fieldSelectProps,
           componentProps: restProps,
           coreProps: {
             name,
@@ -1025,6 +1284,11 @@ function useFormState(options) {
   return result;
 }
 
+// src/overlays.ts
+function defineInputs(inputs) {
+  return inputs;
+}
+
 exports.ConfigContext = ConfigContext;
 exports.Field = Field;
 exports.FieldGroup = FieldGroup;
@@ -1033,6 +1297,7 @@ exports.FormContext = FormContext;
 exports.FormalityProvider = FormalityProvider;
 exports.GroupContext = GroupContext;
 exports.UnusedFields = UnusedFields;
+exports.defineInputs = defineInputs;
 exports.makeDeepProxyState = makeDeepProxyState;
 exports.makeProxyState = makeProxyState;
 exports.useConditions = useConditions;