@dynamic-field-kit/react 1.6.0 → 1.7.0

package/dist/index.js

@@ -32,29 +32,30 @@ var index_exports = {};
 __export(index_exports, {
   DynamicFormDevTools: () => DynamicFormDevTools,
   DynamicInput: () => DynamicInput_default,
-  FIELD_RENDERER_PROP_KEYS: () => import_core7.FIELD_RENDERER_PROP_KEYS,
+  FIELD_RENDERER_PROP_KEYS: () => import_core8.FIELD_RENDERER_PROP_KEYS,
   FieldInput: () => FieldInput_default,
-  FieldRegistry: () => import_core6.FieldRegistry,
+  FieldRegistry: () => import_core7.FieldRegistry,
   FieldRegistryProvider: () => FieldRegistryProvider,
   MultiFieldInput: () => MultiFieldInput_default,
-  buildFieldRendererProps: () => import_core7.buildFieldRendererProps,
-  collectFieldPaths: () => import_core8.collectFieldPaths,
+  buildFieldRendererProps: () => import_core8.buildFieldRendererProps,
+  collectFieldPaths: () => import_core9.collectFieldPaths,
   defaultRenderersMap: () => defaultRenderersMap,
   fieldRegistry: () => fieldRegistry,
   getDefaultRenderer: () => getDefaultRenderer,
-  indexGroupPathMap: () => import_core8.indexGroupPathMap,
+  indexGroupPathMap: () => import_core9.indexGroupPathMap,
   layoutRegistry: () => layoutRegistry,
-  makeFieldId: () => import_core7.makeFieldId,
-  resolveDisabled: () => import_core8.resolveDisabled,
-  resolveOptions: () => import_core8.resolveOptions,
-  resolveReadOnly: () => import_core8.resolveReadOnly,
+  makeErrorId: () => import_core8.makeErrorId,
+  makeFieldId: () => import_core8.makeFieldId,
+  resolveDisabled: () => import_core9.resolveDisabled,
+  resolveOptions: () => import_core9.resolveOptions,
+  resolveReadOnly: () => import_core9.resolveReadOnly,
   useDynamicForm: () => useDynamicForm,
   useFieldRegistry: () => useFieldRegistry,
-  validateField: () => import_core8.validateField,
-  validateFieldAsync: () => import_core8.validateFieldAsync,
-  validateFields: () => import_core8.validateFields,
-  validateFieldsAsync: () => import_core8.validateFieldsAsync,
-  validators: () => import_core8.validators
+  validateField: () => import_core9.validateField,
+  validateFieldAsync: () => import_core9.validateFieldAsync,
+  validateFields: () => import_core9.validateFields,
+  validateFieldsAsync: () => import_core9.validateFieldsAsync,
+  validators: () => import_core9.validators
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -171,6 +172,7 @@ layoutRegistry.register("responsive", ({ children, config }) => {
 });
 
 // src/components/DynamicInput.tsx
+var import_core2 = require("@dynamic-field-kit/core");
 var import_react3 = __toESM(require("react"));
 
 // src/defaultRenderers.tsx
@@ -499,25 +501,39 @@ var DynamicInputInner = ({
   onChange,
   onBlur,
   extraProps,
+  onOptionsQuery,
   ...rendererProps
 }) => {
   const registry = useFieldRegistry();
-  const Renderer = (0, import_react3.useMemo)(
-    () => registry.get(type) || getDefaultRenderer(type),
-    [registry, type]
-  );
+  const { Renderer, isDefault } = (0, import_react3.useMemo)(() => {
+    const registered = registry.get(type);
+    return {
+      Renderer: registered ?? getDefaultRenderer(type),
+      isDefault: !registered
+    };
+  }, [registry, type]);
   if (!Renderer) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
       "Unknown field type: ",
       type
     ] });
   }
-  return import_react3.default.createElement(Renderer, {
+  const { error, id } = rendererProps;
+  const control = import_react3.default.createElement(Renderer, {
     ...extraProps,
     ...rendererProps,
     onValueChange: onChange,
-    onBlur
+    onBlur,
+    onOptionsQuery
   });
+  const firstError = Array.isArray(error) ? error[0] : error;
+  if (!isDefault || !firstError || !id) {
+    return control;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    control,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { id: (0, import_core2.makeErrorId)(id), className: "dfk-field-error", role: "alert", children: firstError })
+  ] });
 };
 var DynamicInput = /* @__PURE__ */ import_react3.default.memo(
   DynamicInputInner
@@ -525,15 +541,15 @@ var DynamicInput = /* @__PURE__ */ import_react3.default.memo(
 var DynamicInput_default = DynamicInput;
 
 // src/components/FieldInput.tsx
-var import_core4 = require("@dynamic-field-kit/core");
+var import_core5 = require("@dynamic-field-kit/core");
 var import_react6 = __toESM(require("react"));
 
 // src/components/FieldGroupInput.tsx
-var import_core3 = require("@dynamic-field-kit/core");
+var import_core4 = require("@dynamic-field-kit/core");
 var import_react5 = require("react");
 
 // src/components/MultiFieldInput.tsx
-var import_core2 = require("@dynamic-field-kit/core");
+var import_core3 = require("@dynamic-field-kit/core");
 var import_react4 = __toESM(require("react"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function resolveLayout(layout) {
@@ -551,6 +567,7 @@ var MultiFieldInputInner = ({
   onChange,
   layout,
   idPrefix,
+  initialProperties,
   rootData,
   onValidityChange,
   onBlurField,
@@ -566,7 +583,13 @@ var MultiFieldInputInner = ({
   const effectiveErrors = errorsProp ?? form?.errors;
   const [data, setData] = (0, import_react4.useState)({});
   const [internalTouched, setInternalTouched] = (0, import_react4.useState)({});
-  const initialPropertiesRef = (0, import_react4.useRef)(effectiveProperties ?? {});
+  const fallbackBaselineRef = (0, import_react4.useRef)(
+    effectiveProperties
+  );
+  if (fallbackBaselineRef.current === void 0) {
+    fallbackBaselineRef.current = effectiveProperties;
+  }
+  const baseline = initialProperties ?? form?.baselineValues ?? fallbackBaselineRef.current ?? {};
   const autoId = (0, import_react4.useId)().replace(/[^a-zA-Z0-9]/g, "");
   const effectiveIdPrefix = idPrefix ?? `dfk-${autoId}`;
   const isTouchedControlled = controlledTouched !== void 0;
@@ -574,7 +597,7 @@ var MultiFieldInputInner = ({
   (0, import_react4.useEffect)(() => {
     if (effectiveProperties) {
       setData(
-        (0, import_core2.applyComputedValues)(fieldDescriptions, effectiveProperties, rootData)
+        (0, import_core3.applyComputedValues)(fieldDescriptions, effectiveProperties, rootData)
       );
     }
   }, [effectiveProperties]);
@@ -605,12 +628,12 @@ var MultiFieldInputInner = ({
   effectiveTouchedRef.current = effectiveTouched;
   (0, import_react4.useEffect)(() => {
     onValidityChangeRef.current?.(
-      (0, import_core2.validateFields)(fieldDescriptions, data, rootData)
+      (0, import_core3.validateFields)(fieldDescriptions, data, rootData)
     );
   }, [data, fieldDescriptions, rootData]);
   const handleValueChangeField = (0, import_react4.useCallback)((value, key) => {
     const merged = { ...dataRef.current, [key]: value };
-    const next = (0, import_core2.applyComputedValues)(
+    const next = (0, import_core3.applyComputedValues)(
       fieldDescriptionsRef.current,
       merged,
       rootDataRef.current
@@ -665,9 +688,9 @@ var MultiFieldInputInner = ({
       rootData: effectiveRoot,
       idPrefix: effectiveIdPrefix,
       touched: Boolean(effectiveTouched[f.name]),
-      touchedMap: (0, import_core2.isFieldGroup)(f) ? effectiveTouched : void 0,
+      touchedMap: (0, import_core3.isFieldGroup)(f) ? effectiveTouched : void 0,
       errors: effectiveErrors,
-      dirty: data[f.name] !== initialPropertiesRef.current[f.name],
+      dirty: !Object.is(data[f.name], baseline[f.name]),
       onBlurField: handleBlurField,
       onValueChangeField: handleValueChangeField
     },
@@ -702,11 +725,11 @@ var FieldGroupInput = ({
   const removeText = removeLabel ?? "Remove";
   const groupName = label ?? fieldDescription.name;
   const errorsByItem = (0, import_react5.useMemo)(
-    () => (0, import_core3.indexGroupPathMap)(errors, fieldDescription.name),
+    () => (0, import_core4.indexGroupPathMap)(errors, fieldDescription.name),
     [errors, fieldDescription.name]
   );
   const touchedByItem = (0, import_react5.useMemo)(
-    () => (0, import_core3.indexGroupPathMap)(touched, fieldDescription.name),
+    () => (0, import_core4.indexGroupPathMap)(touched, fieldDescription.name),
     [touched, fieldDescription.name]
   );
   const handleItemChange = (0, import_react5.useCallback)(
@@ -718,14 +741,14 @@ var FieldGroupInput = ({
     [items, onChange]
   );
   const handleAdd = (0, import_react5.useCallback)(() => {
-    if (!(0, import_core3.canAddGroupItem)(fieldDescription, items)) {
+    if (!(0, import_core4.canAddGroupItem)(fieldDescription, items)) {
       return;
     }
-    onChange([...items, (0, import_core3.createGroupItem)(fieldDescription)]);
+    onChange([...items, (0, import_core4.createGroupItem)(fieldDescription)]);
   }, [fieldDescription, items, onChange]);
   const handleRemove = (0, import_react5.useCallback)(
     (index) => {
-      if (!(0, import_core3.canRemoveGroupItem)(fieldDescription, items)) {
+      if (!(0, import_core4.canRemoveGroupItem)(fieldDescription, items)) {
         return;
       }
       onChange(items.filter((_, i) => i !== index));
@@ -757,7 +780,7 @@ var FieldGroupInput = ({
               type: "button",
               "aria-label": `${removeText} ${groupName} ${index + 1}`,
               onClick: () => handleRemove(index),
-              disabled: !(0, import_core3.canRemoveGroupItem)(fieldDescription, items),
+              disabled: !(0, import_core4.canRemoveGroupItem)(fieldDescription, items),
               children: removeText
             }
           )
@@ -771,7 +794,7 @@ var FieldGroupInput = ({
         type: "button",
         "aria-label": `${addText} ${groupName}`,
         onClick: handleAdd,
-        disabled: !(0, import_core3.canAddGroupItem)(fieldDescription, items),
+        disabled: !(0, import_core4.canAddGroupItem)(fieldDescription, items),
         children: addText
       }
     )
@@ -794,6 +817,41 @@ var FieldInputInner = ({
   onValueChangeField
 }) => {
   const { name, fields } = fieldDescription;
+  const isAsync = (0, import_core5.isAsyncOptions)(fieldDescription);
+  const [optionsState, setOptionsState] = (0, import_react6.useState)(
+    isAsync ? { status: "idle" } : void 0
+  );
+  const loaderRef = (0, import_react6.useRef)(void 0);
+  const fieldRef = (0, import_react6.useRef)(fieldDescription);
+  fieldRef.current = fieldDescription;
+  const ensureLoader = (0, import_react6.useCallback)(() => {
+    if (!(0, import_core5.isAsyncOptions)(fieldRef.current)) {
+      return void 0;
+    }
+    if (!loaderRef.current) {
+      loaderRef.current = (0, import_core5.createOptionsLoader)(
+        fieldRef.current,
+        setOptionsState
+      );
+    }
+    return loaderRef.current;
+  }, []);
+  (0, import_react6.useEffect)(
+    () => () => {
+      loaderRef.current?.dispose();
+      loaderRef.current = void 0;
+    },
+    []
+  );
+  (0, import_react6.useEffect)(() => {
+    ensureLoader()?.update(renderInfos, rootData);
+  });
+  const handleOptionsQuery = (0, import_react6.useCallback)(
+    (query) => {
+      ensureLoader()?.setQuery(query);
+    },
+    [ensureLoader]
+  );
   const handleChange = (0, import_react6.useCallback)(
     (v) => onValueChangeField(v, name),
     [onValueChangeField, name]
@@ -817,14 +875,15 @@ var FieldInputInner = ({
       }
     );
   }
-  const rendererProps = (0, import_core4.buildFieldRendererProps)({
+  const rendererProps = (0, import_core5.buildFieldRendererProps)({
     fieldDescription,
     data: renderInfos,
     rootData,
-    id: (0, import_core4.makeFieldId)(fieldDescription, idPrefix),
+    id: (0, import_core5.makeFieldId)(fieldDescription, idPrefix),
     touched,
     dirty,
-    validationErrors: errors === void 0 ? void 0 : errors[name] ?? []
+    validationErrors: errors === void 0 ? void 0 : errors[name] ?? [],
+    optionsState
   });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DynamicInput_default,
@@ -832,12 +891,16 @@ var FieldInputInner = ({
       ...rendererProps,
       description: rendererProps.description,
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      onOptionsQuery: isAsync ? handleOptionsQuery : void 0
     }
   );
 };
 var FieldInput = /* @__PURE__ */ import_react6.default.memo(FieldInputInner, (prev, next) => {
   const name = prev.fieldDescription.name;
+  if ((0, import_core5.isAsyncOptions)(prev.fieldDescription) && prev.renderInfos !== next.renderInfos) {
+    return false;
+  }
   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;
@@ -1043,7 +1106,7 @@ var DynamicFormDevTools = ({
 };
 
 // src/useDynamicForm.ts
-var import_core5 = require("@dynamic-field-kit/core");
+var import_core6 = require("@dynamic-field-kit/core");
 var import_react8 = require("react");
 function sameStringMap(left, right) {
   const keys = Object.keys(left);
@@ -1058,10 +1121,15 @@ function useDynamicForm({
   fields,
   initialValues = {},
   validateOnBlur = true,
-  validateOnChange = false
+  validateOnChange = false,
+  messages
 }) {
+  const validationContextRef = (0, import_react8.useRef)({
+    t: (0, import_core6.createMessageResolver)(messages)
+  });
+  validationContextRef.current.t = (0, import_core6.createMessageResolver)(messages);
   const [data, setData] = (0, import_react8.useState)(
-    () => (0, import_core5.applyComputedValues)(fields, initialValues)
+    () => (0, import_core6.applyComputedValues)(fields, initialValues)
   );
   const [errors, setErrors] = (0, import_react8.useState)({});
   const [isDirty, setIsDirty] = (0, import_react8.useState)(false);
@@ -1069,7 +1137,7 @@ function useDynamicForm({
   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)
+    () => (0, import_core6.validateFields)(fields, data, void 0, validationContextRef.current)
   );
   const [isValidating, setIsValidating] = (0, import_react8.useState)(false);
   const validationRunRef = (0, import_react8.useRef)(0);
@@ -1078,14 +1146,30 @@ function useDynamicForm({
   const submitAbortRef = (0, import_react8.useRef)(void 0);
   const dataRef = (0, import_react8.useRef)(data);
   dataRef.current = data;
+  const baselineRef = (0, import_react8.useRef)(dataRef.current);
+  const [baselineValues, setBaselineValues] = (0, import_react8.useState)(
+    () => baselineRef.current
+  );
   const commitSyncResult = (0, import_react8.useCallback)((res) => {
     setValidationResult(
       (previous) => sameValidationResult(previous, res) ? previous : res
     );
     return res.valid;
   }, []);
+  const lastValidatedRef = (0, import_react8.useRef)(void 0);
+  const fieldsRef = (0, import_react8.useRef)(fields);
+  if (fieldsRef.current !== fields) {
+    fieldsRef.current = fields;
+    lastValidatedRef.current = void 0;
+  }
   (0, import_react8.useEffect)(() => {
-    commitSyncResult((0, import_core5.validateFields)(fields, data));
+    if (lastValidatedRef.current === data) {
+      return;
+    }
+    lastValidatedRef.current = data;
+    commitSyncResult(
+      (0, import_core6.validateFields)(fields, data, void 0, validationContextRef.current)
+    );
   }, [fields, data, commitSyncResult]);
   (0, import_react8.useEffect)(
     () => () => {
@@ -1095,7 +1179,12 @@ function useDynamicForm({
     []
   );
   const validate = (0, import_react8.useCallback)(() => {
-    const res = (0, import_core5.validateFields)(fields, data);
+    const res = (0, import_core6.validateFields)(
+      fields,
+      data,
+      void 0,
+      validationContextRef.current
+    );
     setErrors(res.errors);
     return commitSyncResult(res);
   }, [fields, data, commitSyncResult]);
@@ -1107,7 +1196,8 @@ function useDynamicForm({
     const snapshot = data;
     setIsValidating(true);
     try {
-      const res = await (0, import_core5.validateFieldsAsync)(fields, snapshot, snapshot, {
+      const res = await (0, import_core6.validateFieldsAsync)(fields, snapshot, snapshot, {
+        ...validationContextRef.current,
         signal: controller.signal
       });
       if (run !== validationRunRef.current || dataRef.current !== snapshot) {
@@ -1124,14 +1214,20 @@ function useDynamicForm({
   }, [fields, data]);
   const handleChange = (0, import_react8.useCallback)(
     (newData) => {
-      const next = (0, import_core5.applyComputedValues)(fields, newData);
+      const next = (0, import_core6.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);
+      lastValidatedRef.current = next;
+      const res = (0, import_core6.validateFields)(
+        fields,
+        next,
+        void 0,
+        validationContextRef.current
+      );
       commitSyncResult(res);
       if (validateOnChange) {
         setErrors(res.errors);
@@ -1151,16 +1247,32 @@ function useDynamicForm({
   const touchAll = (0, import_react8.useCallback)(() => {
     setTouched(
       Object.fromEntries(
-        (0, import_core5.collectFieldPaths)(fields, data).map((path) => [path, true])
+        (0, import_core6.collectFieldPaths)(fields, data).map((path) => [path, true])
       )
     );
   }, [fields, data]);
   const resetTouched = (0, import_react8.useCallback)(() => setTouched({}), []);
+  const getDirtyValues = (0, import_react8.useCallback)(() => {
+    const baseline = baselineRef.current;
+    const current = dataRef.current;
+    const dirty = {};
+    for (const key of Object.keys(current)) {
+      if (!Object.is(current[key], baseline[key])) {
+        dirty[key] = current[key];
+      }
+    }
+    return dirty;
+  }, []);
   const handleBlur = (0, import_react8.useCallback)(
     (fieldName) => {
       setFieldTouched(fieldName, true);
       if (validateOnBlur) {
-        const res = (0, import_core5.validateFields)(fields, data);
+        const res = (0, import_core6.validateFields)(
+          fields,
+          data,
+          void 0,
+          validationContextRef.current
+        );
         setErrors(res.errors);
         commitSyncResult(res);
       }
@@ -1170,9 +1282,11 @@ function useDynamicForm({
   const reset = (0, import_react8.useCallback)(
     (newValues) => {
       const seed = newValues ?? initialValues;
-      const next = (0, import_core5.applyComputedValues)(fields, seed);
+      const next = (0, import_core6.applyComputedValues)(fields, seed);
       setData(next);
       dataRef.current = next;
+      baselineRef.current = next;
+      setBaselineValues(next);
       setErrors({});
       setIsDirty(false);
       setTouched({});
@@ -1200,7 +1314,8 @@ function useDynamicForm({
         submitAbortRef.current = controller;
         const snapshot = data;
         setIsValidating(true);
-        const res = await (0, import_core5.validateFieldsAsync)(fields, snapshot, snapshot, {
+        const res = await (0, import_core6.validateFieldsAsync)(fields, snapshot, snapshot, {
+          ...validationContextRef.current,
           signal: controller.signal
         });
         if (submitRun !== submitRunRef.current) {
@@ -1210,7 +1325,12 @@ function useDynamicForm({
           setErrors(res.errors);
           setValidationResult(res);
         } else {
-          const live = (0, import_core5.validateFields)(fields, dataRef.current);
+          const live = (0, import_core6.validateFields)(
+            fields,
+            dataRef.current,
+            void 0,
+            validationContextRef.current
+          );
           setErrors(live.errors);
           commitSyncResult(live);
         }
@@ -1239,6 +1359,8 @@ function useDynamicForm({
     isValidationComplete: validationResult.complete && !isValidating,
     validationStatus: isValidating ? "pending" : validationResult.status,
     isDirty,
+    baselineValues,
+    getDirtyValues,
     isSubmitting,
     isSubmitted,
     touched,
@@ -1258,9 +1380,9 @@ 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");
+var import_core9 = require("@dynamic-field-kit/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DynamicFormDevTools,
@@ -1277,6 +1399,7 @@ var import_core8 = require("@dynamic-field-kit/core");
   getDefaultRenderer,
   indexGroupPathMap,
   layoutRegistry,
+  makeErrorId,
   makeFieldId,
   resolveDisabled,
   resolveOptions,