@dynamic-field-kit/react 1.6.0 → 1.7.0

package/dist/index.mjs

@@ -111,6 +111,9 @@ layoutRegistry.register("responsive", ({ children, config }) => {
 });
 
 // src/components/DynamicInput.tsx
+import {
+  makeErrorId
+} from "@dynamic-field-kit/core";
 import React3, { useMemo } from "react";
 
 // src/defaultRenderers.tsx
@@ -435,31 +438,45 @@ function useFieldRegistry() {
 }
 
 // src/components/DynamicInput.tsx
-import { jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var DynamicInputInner = ({
   type,
   onChange,
   onBlur,
   extraProps,
+  onOptionsQuery,
   ...rendererProps
 }) => {
   const registry = useFieldRegistry();
-  const Renderer = useMemo(
-    () => registry.get(type) || getDefaultRenderer(type),
-    [registry, type]
-  );
+  const { Renderer, isDefault } = useMemo(() => {
+    const registered = registry.get(type);
+    return {
+      Renderer: registered ?? getDefaultRenderer(type),
+      isDefault: !registered
+    };
+  }, [registry, type]);
   if (!Renderer) {
     return /* @__PURE__ */ jsxs3("div", { children: [
       "Unknown field type: ",
       type
     ] });
   }
-  return React3.createElement(Renderer, {
+  const { error, id } = rendererProps;
+  const control = React3.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__ */ jsxs3(Fragment2, { children: [
+    control,
+    /* @__PURE__ */ jsx5("div", { id: makeErrorId(id), className: "dfk-field-error", role: "alert", children: firstError })
+  ] });
 };
 var DynamicInput = /* @__PURE__ */ React3.memo(
   DynamicInputInner
@@ -469,9 +486,11 @@ var DynamicInput_default = DynamicInput;
 // src/components/FieldInput.tsx
 import {
   buildFieldRendererProps,
+  createOptionsLoader,
+  isAsyncOptions,
   makeFieldId
 } from "@dynamic-field-kit/core";
-import React6, { useCallback as useCallback3 } from "react";
+import React6, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 
 // src/components/FieldGroupInput.tsx
 import {
@@ -497,7 +516,7 @@ import React4, {
   useRef,
   useState as useState2
 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function resolveLayout(layout) {
   if (!layout) {
     return { type: "column", config: {} };
@@ -513,6 +532,7 @@ var MultiFieldInputInner = ({
   onChange,
   layout,
   idPrefix,
+  initialProperties,
   rootData,
   onValidityChange,
   onBlurField,
@@ -528,7 +548,13 @@ var MultiFieldInputInner = ({
   const effectiveErrors = errorsProp ?? form?.errors;
   const [data, setData] = useState2({});
   const [internalTouched, setInternalTouched] = useState2({});
-  const initialPropertiesRef = useRef(effectiveProperties ?? {});
+  const fallbackBaselineRef = useRef(
+    effectiveProperties
+  );
+  if (fallbackBaselineRef.current === void 0) {
+    fallbackBaselineRef.current = effectiveProperties;
+  }
+  const baseline = initialProperties ?? form?.baselineValues ?? fallbackBaselineRef.current ?? {};
   const autoId = useId().replace(/[^a-zA-Z0-9]/g, "");
   const effectiveIdPrefix = idPrefix ?? `dfk-${autoId}`;
   const isTouchedControlled = controlledTouched !== void 0;
@@ -619,7 +645,7 @@ var MultiFieldInputInner = ({
   if (!Layout) {
     throw new Error(`Unknown layout: ${type}`);
   }
-  return /* @__PURE__ */ jsx5(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx6(
     FieldInput_default,
     {
       fieldDescription: f,
@@ -629,7 +655,7 @@ var MultiFieldInputInner = ({
       touched: Boolean(effectiveTouched[f.name]),
       touchedMap: 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
     },
@@ -641,7 +667,7 @@ MultiFieldInput.displayName = "MultiFieldInput";
 var MultiFieldInput_default = MultiFieldInput;
 
 // src/components/FieldGroupInput.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var EMPTY_TOUCHED = Object.freeze({});
 var FieldGroupInput = ({
   fieldDescription,
@@ -695,13 +721,13 @@ var FieldGroupInput = ({
     [fieldDescription, items, onChange]
   );
   return /* @__PURE__ */ jsxs4("div", { className: fieldDescription.className, children: [
-    label && /* @__PURE__ */ jsx6("div", { children: label }),
+    label && /* @__PURE__ */ jsx7("div", { children: label }),
     items.map((item, index) => /* @__PURE__ */ jsxs4(
       "div",
       {
         style: { display: "flex", alignItems: "flex-start", gap: 8 },
         children: [
-          /* @__PURE__ */ jsx6("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx7(
             MultiFieldInput_default,
             {
               fieldDescriptions: fields,
@@ -713,7 +739,7 @@ var FieldGroupInput = ({
               onChange: (next) => handleItemChange(index, next)
             }
           ) }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -727,7 +753,7 @@ var FieldGroupInput = ({
       },
       itemKey(item, index)
     )),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -742,7 +768,7 @@ var FieldGroupInput = ({
 var FieldGroupInput_default = FieldGroupInput;
 
 // src/components/FieldInput.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var FieldInputInner = ({
   fieldDescription,
   renderInfos,
@@ -756,6 +782,41 @@ var FieldInputInner = ({
   onValueChangeField
 }) => {
   const { name, fields } = fieldDescription;
+  const isAsync = isAsyncOptions(fieldDescription);
+  const [optionsState, setOptionsState] = useState3(
+    isAsync ? { status: "idle" } : void 0
+  );
+  const loaderRef = useRef2(void 0);
+  const fieldRef = useRef2(fieldDescription);
+  fieldRef.current = fieldDescription;
+  const ensureLoader = useCallback3(() => {
+    if (!isAsyncOptions(fieldRef.current)) {
+      return void 0;
+    }
+    if (!loaderRef.current) {
+      loaderRef.current = createOptionsLoader(
+        fieldRef.current,
+        setOptionsState
+      );
+    }
+    return loaderRef.current;
+  }, []);
+  useEffect3(
+    () => () => {
+      loaderRef.current?.dispose();
+      loaderRef.current = void 0;
+    },
+    []
+  );
+  useEffect3(() => {
+    ensureLoader()?.update(renderInfos, rootData);
+  });
+  const handleOptionsQuery = useCallback3(
+    (query) => {
+      ensureLoader()?.setQuery(query);
+    },
+    [ensureLoader]
+  );
   const handleChange = useCallback3(
     (v) => onValueChangeField(v, name),
     [onValueChangeField, name]
@@ -766,7 +827,7 @@ var FieldInputInner = ({
   );
   if (fields) {
     const items = Array.isArray(renderInfos[name]) ? renderInfos[name] : [];
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       FieldGroupInput_default,
       {
         fieldDescription,
@@ -786,27 +847,32 @@ var FieldInputInner = ({
     id: makeFieldId(fieldDescription, idPrefix),
     touched,
     dirty,
-    validationErrors: errors === void 0 ? void 0 : errors[name] ?? []
+    validationErrors: errors === void 0 ? void 0 : errors[name] ?? [],
+    optionsState
   });
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     DynamicInput_default,
     {
       ...rendererProps,
       description: rendererProps.description,
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      onOptionsQuery: isAsync ? handleOptionsQuery : void 0
     }
   );
 };
 var FieldInput = /* @__PURE__ */ React6.memo(FieldInputInner, (prev, next) => {
   const name = prev.fieldDescription.name;
+  if (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;
 
 // src/components/DynamicFormDevTools.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DynamicFormDevTools = ({
   data,
   errors = {},
@@ -815,8 +881,8 @@ var DynamicFormDevTools = ({
   fields = [],
   position = "bottom-right"
 }) => {
-  const [isOpen, setIsOpen] = useState3(false);
-  const [activeTab, setActiveTab] = useState3("data");
+  const [isOpen, setIsOpen] = useState4(false);
+  const [activeTab, setActiveTab] = useState4("data");
   const errorCount = Object.keys(errors).length;
   const posStyle = position === "bottom-left" ? { left: "16px", bottom: "16px" } : { right: "16px", bottom: "16px" };
   if (!isOpen) {
@@ -843,8 +909,8 @@ var DynamicFormDevTools = ({
           gap: "6px"
         },
         children: [
-          /* @__PURE__ */ jsx8("span", { children: "\u{1F50D} DevTools" }),
-          errorCount > 0 && /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9("span", { children: "\u{1F50D} DevTools" }),
+          errorCount > 0 && /* @__PURE__ */ jsx9(
             "span",
             {
               style: {
@@ -894,8 +960,8 @@ var DynamicFormDevTools = ({
               borderBottom: "1px solid #334155"
             },
             children: [
-              /* @__PURE__ */ jsx8("span", { style: { fontWeight: "bold", color: "#38bdf8" }, children: "\u{1F6E0}\uFE0F Form DevTools" }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9("span", { style: { fontWeight: "bold", color: "#38bdf8" }, children: "\u{1F6E0}\uFE0F Form DevTools" }),
+              /* @__PURE__ */ jsx9(
                 "button",
                 {
                   type: "button",
@@ -913,7 +979,7 @@ var DynamicFormDevTools = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -948,7 +1014,7 @@ var DynamicFormDevTools = ({
           }
         ),
         /* @__PURE__ */ jsxs5("div", { style: { padding: "12px", overflowY: "auto", flex: 1 }, children: [
-          activeTab === "data" && /* @__PURE__ */ jsx8(
+          activeTab === "data" && /* @__PURE__ */ jsx9(
             "pre",
             {
               style: {
@@ -960,24 +1026,24 @@ var DynamicFormDevTools = ({
               children: JSON.stringify(data, null, 2)
             }
           ),
-          activeTab === "errors" && /* @__PURE__ */ jsx8("div", { children: Object.keys(errors).length === 0 ? /* @__PURE__ */ jsx8("span", { style: { color: "#4ade80" }, children: "\u2713 No validation errors" }) : Object.entries(errors).map(([field, msgs]) => /* @__PURE__ */ jsxs5("div", { style: { marginBottom: "8px" }, children: [
+          activeTab === "errors" && /* @__PURE__ */ jsx9("div", { children: Object.keys(errors).length === 0 ? /* @__PURE__ */ jsx9("span", { style: { color: "#4ade80" }, children: "\u2713 No validation errors" }) : Object.entries(errors).map(([field, msgs]) => /* @__PURE__ */ jsxs5("div", { style: { marginBottom: "8px" }, children: [
             /* @__PURE__ */ jsxs5("span", { style: { color: "#f87171", fontWeight: "bold" }, children: [
               field,
               ":"
             ] }),
-            /* @__PURE__ */ jsx8("ul", { style: { margin: "4px 0 0 16px", padding: 0 }, children: msgs.map((m, i) => /* @__PURE__ */ jsx8("li", { style: { color: "#fca5a5" }, children: m }, i)) })
+            /* @__PURE__ */ jsx9("ul", { style: { margin: "4px 0 0 16px", padding: 0 }, children: msgs.map((m, i) => /* @__PURE__ */ jsx9("li", { style: { color: "#fca5a5" }, children: m }, i)) })
           ] }, field)) }),
           activeTab === "meta" && /* @__PURE__ */ jsxs5("div", { children: [
             /* @__PURE__ */ jsxs5("div", { style: { marginBottom: "6px" }, children: [
-              /* @__PURE__ */ jsx8("span", { style: { color: "#94a3b8" }, children: "isDirty: " }),
-              /* @__PURE__ */ jsx8("span", { style: { color: isDirty ? "#facc15" : "#4ade80" }, children: String(isDirty) })
+              /* @__PURE__ */ jsx9("span", { style: { color: "#94a3b8" }, children: "isDirty: " }),
+              /* @__PURE__ */ jsx9("span", { style: { color: isDirty ? "#facc15" : "#4ade80" }, children: String(isDirty) })
             ] }),
             /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsx8("span", { style: { color: "#94a3b8" }, children: "Touched Fields:" }),
-              /* @__PURE__ */ jsx8("pre", { style: { margin: "4px 0 0 0", color: "#cbd5e1" }, children: JSON.stringify(touched, null, 2) })
+              /* @__PURE__ */ jsx9("span", { style: { color: "#94a3b8" }, children: "Touched Fields:" }),
+              /* @__PURE__ */ jsx9("pre", { style: { margin: "4px 0 0 0", color: "#cbd5e1" }, children: JSON.stringify(touched, null, 2) })
             ] })
           ] }),
-          activeTab === "fields" && /* @__PURE__ */ jsx8("div", { children: fields.length === 0 ? /* @__PURE__ */ jsx8("span", { style: { color: "#94a3b8" }, children: "No field descriptions passed" }) : fields.map((f) => /* @__PURE__ */ jsxs5(
+          activeTab === "fields" && /* @__PURE__ */ jsx9("div", { children: fields.length === 0 ? /* @__PURE__ */ jsx9("span", { style: { color: "#94a3b8" }, children: "No field descriptions passed" }) : fields.map((f) => /* @__PURE__ */ jsxs5(
             "div",
             {
               style: {
@@ -987,7 +1053,7 @@ var DynamicFormDevTools = ({
                 borderRadius: "4px"
               },
               children: [
-                /* @__PURE__ */ jsx8("div", { style: { color: "#38bdf8", fontWeight: "bold" }, children: f.name }),
+                /* @__PURE__ */ jsx9("div", { style: { color: "#38bdf8", fontWeight: "bold" }, children: f.name }),
                 /* @__PURE__ */ jsxs5("div", { style: { color: "#94a3b8", fontSize: "10px" }, children: [
                   "type: ",
                   f.type,
@@ -1008,10 +1074,11 @@ var DynamicFormDevTools = ({
 import {
   applyComputedValues as applyComputedValues2,
   collectFieldPaths,
+  createMessageResolver,
   validateFields as validateFields2,
   validateFieldsAsync
 } from "@dynamic-field-kit/core";
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 function sameStringMap(left, right) {
   const keys = Object.keys(left);
   return keys.length === Object.keys(right).length && keys.every(
@@ -1025,36 +1092,57 @@ function useDynamicForm({
   fields,
   initialValues = {},
   validateOnBlur = true,
-  validateOnChange = false
+  validateOnChange = false,
+  messages
 }) {
-  const [data, setData] = useState4(
+  const validationContextRef = useRef3({
+    t: createMessageResolver(messages)
+  });
+  validationContextRef.current.t = createMessageResolver(messages);
+  const [data, setData] = useState5(
     () => applyComputedValues2(fields, initialValues)
   );
-  const [errors, setErrors] = useState4({});
-  const [isDirty, setIsDirty] = useState4(false);
-  const [touched, setTouched] = useState4({});
-  const [isSubmitting, setIsSubmitting] = useState4(false);
-  const [isSubmitted, setIsSubmitted] = useState4(false);
-  const [validationResult, setValidationResult] = useState4(
-    () => validateFields2(fields, data)
+  const [errors, setErrors] = useState5({});
+  const [isDirty, setIsDirty] = useState5(false);
+  const [touched, setTouched] = useState5({});
+  const [isSubmitting, setIsSubmitting] = useState5(false);
+  const [isSubmitted, setIsSubmitted] = useState5(false);
+  const [validationResult, setValidationResult] = useState5(
+    () => validateFields2(fields, data, void 0, validationContextRef.current)
   );
-  const [isValidating, setIsValidating] = useState4(false);
-  const validationRunRef = useRef2(0);
-  const validationAbortRef = useRef2(void 0);
-  const submitRunRef = useRef2(0);
-  const submitAbortRef = useRef2(void 0);
-  const dataRef = useRef2(data);
+  const [isValidating, setIsValidating] = useState5(false);
+  const validationRunRef = useRef3(0);
+  const validationAbortRef = useRef3(void 0);
+  const submitRunRef = useRef3(0);
+  const submitAbortRef = useRef3(void 0);
+  const dataRef = useRef3(data);
   dataRef.current = data;
+  const baselineRef = useRef3(dataRef.current);
+  const [baselineValues, setBaselineValues] = useState5(
+    () => baselineRef.current
+  );
   const commitSyncResult = useCallback4((res) => {
     setValidationResult(
       (previous) => sameValidationResult(previous, res) ? previous : res
     );
     return res.valid;
   }, []);
-  useEffect3(() => {
-    commitSyncResult(validateFields2(fields, data));
+  const lastValidatedRef = useRef3(void 0);
+  const fieldsRef = useRef3(fields);
+  if (fieldsRef.current !== fields) {
+    fieldsRef.current = fields;
+    lastValidatedRef.current = void 0;
+  }
+  useEffect4(() => {
+    if (lastValidatedRef.current === data) {
+      return;
+    }
+    lastValidatedRef.current = data;
+    commitSyncResult(
+      validateFields2(fields, data, void 0, validationContextRef.current)
+    );
   }, [fields, data, commitSyncResult]);
-  useEffect3(
+  useEffect4(
     () => () => {
       validationAbortRef.current?.abort();
       submitAbortRef.current?.abort();
@@ -1062,7 +1150,12 @@ function useDynamicForm({
     []
   );
   const validate = useCallback4(() => {
-    const res = validateFields2(fields, data);
+    const res = validateFields2(
+      fields,
+      data,
+      void 0,
+      validationContextRef.current
+    );
     setErrors(res.errors);
     return commitSyncResult(res);
   }, [fields, data, commitSyncResult]);
@@ -1075,6 +1168,7 @@ function useDynamicForm({
     setIsValidating(true);
     try {
       const res = await validateFieldsAsync(fields, snapshot, snapshot, {
+        ...validationContextRef.current,
         signal: controller.signal
       });
       if (run !== validationRunRef.current || dataRef.current !== snapshot) {
@@ -1098,7 +1192,13 @@ function useDynamicForm({
       validationAbortRef.current?.abort();
       validationRunRef.current += 1;
       setIsValidating(false);
-      const res = validateFields2(fields, next);
+      lastValidatedRef.current = next;
+      const res = validateFields2(
+        fields,
+        next,
+        void 0,
+        validationContextRef.current
+      );
       commitSyncResult(res);
       if (validateOnChange) {
         setErrors(res.errors);
@@ -1123,11 +1223,27 @@ function useDynamicForm({
     );
   }, [fields, data]);
   const resetTouched = useCallback4(() => setTouched({}), []);
+  const getDirtyValues = useCallback4(() => {
+    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 = useCallback4(
     (fieldName) => {
       setFieldTouched(fieldName, true);
       if (validateOnBlur) {
-        const res = validateFields2(fields, data);
+        const res = validateFields2(
+          fields,
+          data,
+          void 0,
+          validationContextRef.current
+        );
         setErrors(res.errors);
         commitSyncResult(res);
       }
@@ -1140,6 +1256,8 @@ function useDynamicForm({
       const next = applyComputedValues2(fields, seed);
       setData(next);
       dataRef.current = next;
+      baselineRef.current = next;
+      setBaselineValues(next);
       setErrors({});
       setIsDirty(false);
       setTouched({});
@@ -1168,6 +1286,7 @@ function useDynamicForm({
         const snapshot = data;
         setIsValidating(true);
         const res = await validateFieldsAsync(fields, snapshot, snapshot, {
+          ...validationContextRef.current,
           signal: controller.signal
         });
         if (submitRun !== submitRunRef.current) {
@@ -1177,7 +1296,12 @@ function useDynamicForm({
           setErrors(res.errors);
           setValidationResult(res);
         } else {
-          const live = validateFields2(fields, dataRef.current);
+          const live = validateFields2(
+            fields,
+            dataRef.current,
+            void 0,
+            validationContextRef.current
+          );
           setErrors(live.errors);
           commitSyncResult(live);
         }
@@ -1206,6 +1330,8 @@ function useDynamicForm({
     isValidationComplete: validationResult.complete && !isValidating,
     validationStatus: isValidating ? "pending" : validationResult.status,
     isDirty,
+    baselineValues,
+    getDirtyValues,
     isSubmitting,
     isSubmitted,
     touched,
@@ -1229,6 +1355,7 @@ import { FieldRegistry } from "@dynamic-field-kit/core";
 import {
   buildFieldRendererProps as buildFieldRendererProps2,
   makeFieldId as makeFieldId2,
+  makeErrorId as makeErrorId2,
   FIELD_RENDERER_PROP_KEYS
 } from "@dynamic-field-kit/core";
 import {
@@ -1258,6 +1385,7 @@ export {
   getDefaultRenderer,
   indexGroupPathMap2 as indexGroupPathMap,
   layoutRegistry,
+  makeErrorId2 as makeErrorId,
   makeFieldId2 as makeFieldId,
   resolveDisabled,
   resolveOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-field-kit/react",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "React renderer for dynamic-field-kit",
   "license": "MIT",
   "main": "dist/index.js",
@@ -26,7 +26,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@dynamic-field-kit/core": "^1.6.0",
+    "@dynamic-field-kit/core": "^1.7.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.0.0",