@dynamic-field-kit/react 1.5.1 → 1.6.0

package/dist/index.js

@@ -32,24 +32,29 @@ var index_exports = {};
 __export(index_exports, {
   DynamicFormDevTools: () => DynamicFormDevTools,
   DynamicInput: () => DynamicInput_default,
+  FIELD_RENDERER_PROP_KEYS: () => import_core7.FIELD_RENDERER_PROP_KEYS,
   FieldInput: () => FieldInput_default,
   FieldRegistry: () => import_core6.FieldRegistry,
   FieldRegistryProvider: () => FieldRegistryProvider,
   MultiFieldInput: () => MultiFieldInput_default,
+  buildFieldRendererProps: () => import_core7.buildFieldRendererProps,
+  collectFieldPaths: () => import_core8.collectFieldPaths,
   defaultRenderersMap: () => defaultRenderersMap,
   fieldRegistry: () => fieldRegistry,
   getDefaultRenderer: () => getDefaultRenderer,
+  indexGroupPathMap: () => import_core8.indexGroupPathMap,
   layoutRegistry: () => layoutRegistry,
-  resolveDisabled: () => import_core7.resolveDisabled,
-  resolveOptions: () => import_core7.resolveOptions,
-  resolveReadOnly: () => import_core7.resolveReadOnly,
+  makeFieldId: () => import_core7.makeFieldId,
+  resolveDisabled: () => import_core8.resolveDisabled,
+  resolveOptions: () => import_core8.resolveOptions,
+  resolveReadOnly: () => import_core8.resolveReadOnly,
   useDynamicForm: () => useDynamicForm,
   useFieldRegistry: () => useFieldRegistry,
-  validateField: () => import_core7.validateField,
-  validateFieldAsync: () => import_core7.validateFieldAsync,
-  validateFields: () => import_core7.validateFields,
-  validateFieldsAsync: () => import_core7.validateFieldsAsync,
-  validators: () => import_core7.validators
+  validateField: () => import_core8.validateField,
+  validateFieldAsync: () => import_core8.validateFieldAsync,
+  validateFields: () => import_core8.validateFields,
+  validateFieldsAsync: () => import_core8.validateFieldsAsync,
+  validators: () => import_core8.validators
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -491,24 +496,10 @@ function useFieldRegistry() {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DynamicInputInner = ({
   type,
-  value,
   onChange,
   onBlur,
-  label,
-  options,
-  className,
-  description,
-  disabled,
-  readOnly,
-  required,
-  touched,
-  dirty,
-  error,
-  id,
-  ariaInvalid,
-  ariaDescribedBy,
-  ariaRequired,
-  extraProps
+  extraProps,
+  ...rendererProps
 }) => {
   const registry = useFieldRegistry();
   const Renderer = (0, import_react3.useMemo)(
@@ -523,23 +514,9 @@ var DynamicInputInner = ({
   }
   return import_react3.default.createElement(Renderer, {
     ...extraProps,
-    value,
+    ...rendererProps,
     onValueChange: onChange,
-    onBlur,
-    label,
-    options,
-    className,
-    description,
-    disabled,
-    readOnly,
-    required,
-    touched,
-    dirty,
-    error,
-    id,
-    ariaInvalid,
-    ariaDescribedBy,
-    ariaRequired
+    onBlur
   });
 };
 var DynamicInput = /* @__PURE__ */ import_react3.default.memo(
@@ -557,7 +534,7 @@ var import_react5 = require("react");
 
 // src/components/MultiFieldInput.tsx
 var import_core2 = require("@dynamic-field-kit/core");
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function resolveLayout(layout) {
   if (!layout) {
@@ -568,25 +545,39 @@ function resolveLayout(layout) {
   }
   return { type: layout.type, config: layout };
 }
-var MultiFieldInput = ({
+var MultiFieldInputInner = ({
   fieldDescriptions,
   properties,
   onChange,
   layout,
+  idPrefix,
   rootData,
   onValidityChange,
-  onBlurField
-}) => {
+  onBlurField,
+  touched: touchedProp,
+  errors: errorsProp,
+  onTouchedChange,
+  form
+}, ref) => {
+  const effectiveProperties = properties ?? form?.data;
+  const effectiveOnChange = onChange ?? form?.handleChange;
+  const effectiveOnBlurField = onBlurField ?? form?.handleBlur;
+  const controlledTouched = touchedProp ?? form?.touched;
+  const effectiveErrors = errorsProp ?? form?.errors;
   const [data, setData] = (0, import_react4.useState)({});
-  const [touchedFields, setTouchedFields] = (0, import_react4.useState)(
-    {}
-  );
-  const initialPropertiesRef = (0, import_react4.useRef)(properties ?? {});
+  const [internalTouched, setInternalTouched] = (0, import_react4.useState)({});
+  const initialPropertiesRef = (0, import_react4.useRef)(effectiveProperties ?? {});
+  const autoId = (0, import_react4.useId)().replace(/[^a-zA-Z0-9]/g, "");
+  const effectiveIdPrefix = idPrefix ?? `dfk-${autoId}`;
+  const isTouchedControlled = controlledTouched !== void 0;
+  const effectiveTouched = controlledTouched ?? internalTouched;
   (0, import_react4.useEffect)(() => {
-    if (properties) {
-      setData((0, import_core2.applyComputedValues)(fieldDescriptions, properties, rootData));
+    if (effectiveProperties) {
+      setData(
+        (0, import_core2.applyComputedValues)(fieldDescriptions, effectiveProperties, rootData)
+      );
     }
-  }, [properties]);
+  }, [effectiveProperties]);
   const effectiveRoot = rootData ?? data;
   const visibleFields = (0, import_react4.useMemo)(
     () => fieldDescriptions.filter(
@@ -596,16 +587,22 @@ var MultiFieldInput = ({
   );
   const dataRef = (0, import_react4.useRef)(data);
   dataRef.current = data;
-  const onChangeRef = (0, import_react4.useRef)(onChange);
-  onChangeRef.current = onChange;
+  const onChangeRef = (0, import_react4.useRef)(effectiveOnChange);
+  onChangeRef.current = effectiveOnChange;
   const fieldDescriptionsRef = (0, import_react4.useRef)(fieldDescriptions);
   fieldDescriptionsRef.current = fieldDescriptions;
   const rootDataRef = (0, import_react4.useRef)(rootData);
   rootDataRef.current = rootData;
   const onValidityChangeRef = (0, import_react4.useRef)(onValidityChange);
   onValidityChangeRef.current = onValidityChange;
-  const onBlurFieldRef = (0, import_react4.useRef)(onBlurField);
-  onBlurFieldRef.current = onBlurField;
+  const onBlurFieldRef = (0, import_react4.useRef)(effectiveOnBlurField);
+  onBlurFieldRef.current = effectiveOnBlurField;
+  const onTouchedChangeRef = (0, import_react4.useRef)(onTouchedChange);
+  onTouchedChangeRef.current = onTouchedChange;
+  const isTouchedControlledRef = (0, import_react4.useRef)(isTouchedControlled);
+  isTouchedControlledRef.current = isTouchedControlled;
+  const effectiveTouchedRef = (0, import_react4.useRef)(effectiveTouched);
+  effectiveTouchedRef.current = effectiveTouched;
   (0, import_react4.useEffect)(() => {
     onValidityChangeRef.current?.(
       (0, import_core2.validateFields)(fieldDescriptions, data, rootData)
@@ -622,10 +619,39 @@ var MultiFieldInput = ({
     setData(next);
     onChangeRef.current?.(next);
   }, []);
-  const handleBlurField = (0, import_react4.useCallback)((key) => {
-    setTouchedFields((prev) => prev[key] ? prev : { ...prev, [key]: true });
-    onBlurFieldRef.current?.(key);
+  const markTouched = (0, import_react4.useCallback)((key, isTouched) => {
+    const current = effectiveTouchedRef.current;
+    if (Boolean(current[key]) === isTouched) {
+      return;
+    }
+    const next = { ...current, [key]: isTouched };
+    if (!isTouchedControlledRef.current) {
+      effectiveTouchedRef.current = next;
+      setInternalTouched(next);
+    }
+    onTouchedChangeRef.current?.(next);
   }, []);
+  const handleBlurField = (0, import_react4.useCallback)(
+    (key) => {
+      markTouched(key, true);
+      onBlurFieldRef.current?.(key);
+    },
+    [markTouched]
+  );
+  (0, import_react4.useImperativeHandle)(
+    ref,
+    () => ({
+      resetTouched: () => {
+        if (!isTouchedControlledRef.current) {
+          effectiveTouchedRef.current = {};
+        }
+        setInternalTouched({});
+      },
+      setFieldTouched: (fieldName, isTouched = true) => markTouched(fieldName, isTouched),
+      getTouched: () => effectiveTouchedRef.current
+    }),
+    [markTouched]
+  );
   const { type, config } = resolveLayout(layout);
   const Layout = layoutRegistry.get(type);
   if (!Layout) {
@@ -637,7 +663,10 @@ var MultiFieldInput = ({
       fieldDescription: f,
       renderInfos: data,
       rootData: effectiveRoot,
-      touched: Boolean(touchedFields[f.name]),
+      idPrefix: effectiveIdPrefix,
+      touched: Boolean(effectiveTouched[f.name]),
+      touchedMap: (0, import_core2.isFieldGroup)(f) ? effectiveTouched : void 0,
+      errors: effectiveErrors,
       dirty: data[f.name] !== initialPropertiesRef.current[f.name],
       onBlurField: handleBlurField,
       onValueChangeField: handleValueChangeField
@@ -645,14 +674,20 @@ var MultiFieldInput = ({
     f.name
   )) });
 };
+var MultiFieldInput = /* @__PURE__ */ import_react4.default.forwardRef(MultiFieldInputInner);
+MultiFieldInput.displayName = "MultiFieldInput";
 var MultiFieldInput_default = MultiFieldInput;
 
 // src/components/FieldGroupInput.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var EMPTY_TOUCHED = Object.freeze({});
 var FieldGroupInput = ({
   fieldDescription,
   items,
   rootData,
+  errors,
+  touched,
+  onBlurField,
   onChange
 }) => {
   const {
@@ -666,6 +701,14 @@ var FieldGroupInput = ({
   const addText = addLabel ?? "Add";
   const removeText = removeLabel ?? "Remove";
   const groupName = label ?? fieldDescription.name;
+  const errorsByItem = (0, import_react5.useMemo)(
+    () => (0, import_core3.indexGroupPathMap)(errors, fieldDescription.name),
+    [errors, fieldDescription.name]
+  );
+  const touchedByItem = (0, import_react5.useMemo)(
+    () => (0, import_core3.indexGroupPathMap)(touched, fieldDescription.name),
+    [touched, fieldDescription.name]
+  );
   const handleItemChange = (0, import_react5.useCallback)(
     (index, next) => {
       const nextItems = items.slice();
@@ -702,6 +745,9 @@ var FieldGroupInput = ({
               fieldDescriptions: fields,
               properties: item,
               rootData,
+              errors: errorsByItem?.[index],
+              touched: touched === void 0 ? void 0 : touchedByItem?.[index] ?? EMPTY_TOUCHED,
+              onBlurField: (key) => onBlurField?.(`${fieldDescription.name}[${index}].${key}`),
               onChange: (next) => handleItemChange(index, next)
             }
           ) }),
@@ -739,12 +785,15 @@ var FieldInputInner = ({
   fieldDescription,
   renderInfos,
   rootData,
+  idPrefix = "dfk-field",
   touched,
+  touchedMap,
   dirty,
+  errors,
   onBlurField,
   onValueChangeField
 }) => {
-  const { name, type, label, className, description, props, fields, required } = fieldDescription;
+  const { name, fields } = fieldDescription;
   const handleChange = (0, import_react6.useCallback)(
     (v) => onValueChangeField(v, name),
     [onValueChangeField, name]
@@ -761,43 +810,27 @@ var FieldInputInner = ({
         fieldDescription,
         items,
         rootData,
+        errors,
+        touched: touchedMap,
+        onBlurField,
         onChange: handleChange
       }
     );
   }
-  const effectiveDisabled = (0, import_core4.resolveDisabled)(
+  const rendererProps = (0, import_core4.buildFieldRendererProps)({
     fieldDescription,
-    renderInfos,
-    rootData
-  );
-  const readOnly = (0, import_core4.resolveReadOnly)(fieldDescription, renderInfos, rootData);
-  const resolvedOptionsList = (0, import_core4.resolveOptions)(
-    fieldDescription,
-    renderInfos,
-    rootData
-  );
-  const errors = effectiveDisabled ? [] : (0, import_core4.validateField)(fieldDescription, renderInfos[name], renderInfos, rootData);
-  const error = errors.length > 0 ? errors : void 0;
-  const fieldId = `dfk-field-${name}`;
+    data: renderInfos,
+    rootData,
+    id: (0, import_core4.makeFieldId)(fieldDescription, idPrefix),
+    touched,
+    dirty,
+    validationErrors: errors === void 0 ? void 0 : errors[name] ?? []
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DynamicInput_default,
     {
-      id: fieldId,
-      type,
-      label,
-      value: renderInfos[name],
-      options: resolvedOptionsList,
-      className,
-      description,
-      disabled: effectiveDisabled,
-      readOnly,
-      required,
-      touched,
-      dirty,
-      error,
-      ariaInvalid: Boolean(error),
-      ariaRequired: Boolean(required),
-      extraProps: props,
+      ...rendererProps,
+      description: rendererProps.description,
       onChange: handleChange,
       onBlur: handleBlur
     }
@@ -805,7 +838,7 @@ var FieldInputInner = ({
 };
 var FieldInput = /* @__PURE__ */ import_react6.default.memo(FieldInputInner, (prev, next) => {
   const name = prev.fieldDescription.name;
-  return prev.fieldDescription === next.fieldDescription && prev.onValueChangeField === next.onValueChangeField && prev.onBlurField === next.onBlurField && prev.rootData === next.rootData && prev.touched === next.touched && prev.dirty === next.dirty && prev.renderInfos[name] === next.renderInfos[name];
+  return prev.fieldDescription === next.fieldDescription && prev.onValueChangeField === next.onValueChangeField && prev.onBlurField === next.onBlurField && prev.rootData === next.rootData && prev.idPrefix === next.idPrefix && prev.touched === next.touched && prev.touchedMap === next.touchedMap && prev.dirty === next.dirty && prev.errors === next.errors && prev.renderInfos[name] === next.renderInfos[name];
 });
 var FieldInput_default = FieldInput;
 
@@ -1012,6 +1045,15 @@ var DynamicFormDevTools = ({
 // src/useDynamicForm.ts
 var import_core5 = require("@dynamic-field-kit/core");
 var import_react8 = require("react");
+function sameStringMap(left, right) {
+  const keys = Object.keys(left);
+  return keys.length === Object.keys(right).length && keys.every(
+    (key) => left[key]?.length === right[key]?.length && left[key]?.every((value, index) => value === right[key]?.[index])
+  );
+}
+function sameValidationResult(left, right) {
+  return left.valid === right.valid && left.complete === right.complete && left.status === right.status && (left.pending ?? []).join("\0") === (right.pending ?? []).join("\0") && sameStringMap(left.errors, right.errors);
+}
 function useDynamicForm({
   fields,
   initialValues = {},
@@ -1026,22 +1068,76 @@ function useDynamicForm({
   const [touched, setTouched] = (0, import_react8.useState)({});
   const [isSubmitting, setIsSubmitting] = (0, import_react8.useState)(false);
   const [isSubmitted, setIsSubmitted] = (0, import_react8.useState)(false);
+  const [validationResult, setValidationResult] = (0, import_react8.useState)(
+    () => (0, import_core5.validateFields)(fields, data)
+  );
+  const [isValidating, setIsValidating] = (0, import_react8.useState)(false);
+  const validationRunRef = (0, import_react8.useRef)(0);
+  const validationAbortRef = (0, import_react8.useRef)(void 0);
+  const submitRunRef = (0, import_react8.useRef)(0);
+  const submitAbortRef = (0, import_react8.useRef)(void 0);
+  const dataRef = (0, import_react8.useRef)(data);
+  dataRef.current = data;
+  const commitSyncResult = (0, import_react8.useCallback)((res) => {
+    setValidationResult(
+      (previous) => sameValidationResult(previous, res) ? previous : res
+    );
+    return res.valid;
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    commitSyncResult((0, import_core5.validateFields)(fields, data));
+  }, [fields, data, commitSyncResult]);
+  (0, import_react8.useEffect)(
+    () => () => {
+      validationAbortRef.current?.abort();
+      submitAbortRef.current?.abort();
+    },
+    []
+  );
   const validate = (0, import_react8.useCallback)(() => {
     const res = (0, import_core5.validateFields)(fields, data);
     setErrors(res.errors);
-    return res.valid;
+    return commitSyncResult(res);
+  }, [fields, data, commitSyncResult]);
+  const validateAsync = (0, import_react8.useCallback)(async () => {
+    const run = ++validationRunRef.current;
+    validationAbortRef.current?.abort();
+    const controller = new AbortController();
+    validationAbortRef.current = controller;
+    const snapshot = data;
+    setIsValidating(true);
+    try {
+      const res = await (0, import_core5.validateFieldsAsync)(fields, snapshot, snapshot, {
+        signal: controller.signal
+      });
+      if (run !== validationRunRef.current || dataRef.current !== snapshot) {
+        return res.valid;
+      }
+      setErrors(res.errors);
+      setValidationResult(res);
+      return res.valid;
+    } finally {
+      if (run === validationRunRef.current) {
+        setIsValidating(false);
+      }
+    }
   }, [fields, data]);
   const handleChange = (0, import_react8.useCallback)(
     (newData) => {
       const next = (0, import_core5.applyComputedValues)(fields, newData);
       setData(next);
+      dataRef.current = next;
       setIsDirty(true);
+      validationAbortRef.current?.abort();
+      validationRunRef.current += 1;
+      setIsValidating(false);
+      const res = (0, import_core5.validateFields)(fields, next);
+      commitSyncResult(res);
       if (validateOnChange) {
-        const res = (0, import_core5.validateFields)(fields, next);
         setErrors(res.errors);
       }
     },
-    [fields, validateOnChange]
+    [fields, validateOnChange, commitSyncResult]
   );
   const setFieldValue = (0, import_react8.useCallback)(
     (name, value) => {
@@ -1052,26 +1148,39 @@ function useDynamicForm({
   const setFieldTouched = (0, import_react8.useCallback)((name, isTouched = true) => {
     setTouched((prev) => ({ ...prev, [name]: isTouched }));
   }, []);
+  const touchAll = (0, import_react8.useCallback)(() => {
+    setTouched(
+      Object.fromEntries(
+        (0, import_core5.collectFieldPaths)(fields, data).map((path) => [path, true])
+      )
+    );
+  }, [fields, data]);
+  const resetTouched = (0, import_react8.useCallback)(() => setTouched({}), []);
   const handleBlur = (0, import_react8.useCallback)(
     (fieldName) => {
       setFieldTouched(fieldName, true);
       if (validateOnBlur) {
         const res = (0, import_core5.validateFields)(fields, data);
         setErrors(res.errors);
+        commitSyncResult(res);
       }
     },
-    [fields, data, validateOnBlur, setFieldTouched]
+    [fields, data, validateOnBlur, setFieldTouched, commitSyncResult]
   );
   const reset = (0, import_react8.useCallback)(
     (newValues) => {
       const seed = newValues ?? initialValues;
       const next = (0, import_core5.applyComputedValues)(fields, seed);
       setData(next);
+      dataRef.current = next;
       setErrors({});
       setIsDirty(false);
       setTouched({});
       setIsSubmitting(false);
       setIsSubmitted(false);
+      validationAbortRef.current?.abort();
+      validationRunRef.current += 1;
+      setIsValidating(false);
     },
     [fields, initialValues]
   );
@@ -1081,26 +1190,54 @@ function useDynamicForm({
         e.preventDefault();
       }
       setIsSubmitting(true);
+      const submitRun = ++submitRunRef.current;
       try {
-        const res = (0, import_core5.validateFields)(fields, data);
-        setErrors(res.errors);
+        touchAll();
+        const run = ++validationRunRef.current;
+        validationAbortRef.current?.abort();
+        submitAbortRef.current?.abort();
+        const controller = new AbortController();
+        submitAbortRef.current = controller;
+        const snapshot = data;
+        setIsValidating(true);
+        const res = await (0, import_core5.validateFieldsAsync)(fields, snapshot, snapshot, {
+          signal: controller.signal
+        });
+        if (submitRun !== submitRunRef.current) {
+          return;
+        }
+        if (dataRef.current === snapshot && run === validationRunRef.current) {
+          setErrors(res.errors);
+          setValidationResult(res);
+        } else {
+          const live = (0, import_core5.validateFields)(fields, dataRef.current);
+          setErrors(live.errors);
+          commitSyncResult(live);
+        }
         setIsSubmitted(true);
         if (res.valid) {
-          await onValid(data);
+          await onValid(snapshot);
         } else if (onInvalid) {
           onInvalid(res.errors);
         }
       } finally {
+        if (submitRun === submitRunRef.current) {
+          setIsValidating(false);
+        }
         setIsSubmitting(false);
       }
     },
-    [fields, data]
+    [fields, data, touchAll, commitSyncResult]
   );
-  const isValid = Object.keys(errors).length === 0;
   return {
     data,
     errors,
-    isValid,
+    isValid: validationResult.valid,
+    isValidating,
+    // Matches Vue and Angular: a run still in flight is not complete, whatever
+    // the last finished pass concluded.
+    isValidationComplete: validationResult.complete && !isValidating,
+    validationStatus: isValidating ? "pending" : validationResult.status,
     isDirty,
     isSubmitting,
     isSubmitted,
@@ -1108,10 +1245,14 @@ function useDynamicForm({
     setData,
     setFieldValue,
     setFieldTouched,
+    setTouched,
+    touchAll,
+    resetTouched,
     handleChange,
     handleBlur,
     reset,
     validate,
+    validateAsync,
     handleSubmit
   };
 }
@@ -1119,18 +1260,24 @@ function useDynamicForm({
 // src/index.ts
 var import_core6 = require("@dynamic-field-kit/core");
 var import_core7 = require("@dynamic-field-kit/core");
+var import_core8 = require("@dynamic-field-kit/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DynamicFormDevTools,
   DynamicInput,
+  FIELD_RENDERER_PROP_KEYS,
   FieldInput,
   FieldRegistry,
   FieldRegistryProvider,
   MultiFieldInput,
+  buildFieldRendererProps,
+  collectFieldPaths,
   defaultRenderersMap,
   fieldRegistry,
   getDefaultRenderer,
+  indexGroupPathMap,
   layoutRegistry,
+  makeFieldId,
   resolveDisabled,
   resolveOptions,
   resolveReadOnly,