@measured/puck 0.17.0-canary.229cbdd → 0.17.0-canary.35170f8

package/dist/index.css

@@ -204,27 +204,27 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
-._Input_3pq3z_1 {
+._InputWrapper_1l5m8_1 {
   color: var(--puck-color-grey-04);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
 }
-._Input_3pq3z_1 ._Input_3pq3z_1 {
+._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
+  border-top: 1px solid var(--puck-color-grey-09);
+  margin-top: 8px;
+}
+._Input_1l5m8_1 ._InputWrapper_1l5m8_1 {
   padding: 0px;
 }
-._Input_3pq3z_1 * {
+._Input_1l5m8_1 * {
   box-sizing: border-box;
 }
-._Input_3pq3z_1 + ._Input_3pq3z_1 {
-  border-top: 1px solid var(--puck-color-grey-09);
-  margin-top: 8px;
-}
-._Input_3pq3z_1 ._Input_3pq3z_1 + ._Input_3pq3z_1 {
+._Input_1l5m8_1 ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_3pq3z_26 {
+._Input-label_1l5m8_26 {
   align-items: center;
   color: var(--puck-color-grey-04);
   display: flex;
@@ -232,17 +232,17 @@
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_3pq3z_35 {
+._Input-labelIcon_1l5m8_35 {
   color: var(--puck-color-grey-07);
   display: flex;
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_3pq3z_42 {
+._Input-disabledIcon_1l5m8_42 {
   color: var(--puck-color-grey-05);
   margin-left: auto;
 }
-._Input-input_3pq3z_47 {
+._Input-input_1l5m8_47 {
   background: var(--puck-color-white);
   border-width: 1px;
   border-style: solid;
@@ -254,7 +254,7 @@
   transition: border-color 50ms ease-in;
   width: 100%;
 }
-select._Input-input_3pq3z_47 {
+select._Input-input_1l5m8_47 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
@@ -264,25 +264,25 @@ select._Input-input_3pq3z_47 {
   cursor: pointer;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input_3pq3z_1:has(> input):hover ._Input-input_3pq3z_47:not([readonly]),
-  ._Input_3pq3z_1:has(> textarea):hover ._Input-input_3pq3z_47:not([readonly]) {
+  ._Input_1l5m8_1:has(> input):hover ._Input-input_1l5m8_47:not([readonly]),
+  ._Input_1l5m8_1:has(> textarea):hover ._Input-input_1l5m8_47:not([readonly]) {
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
-  ._Input_3pq3z_1:has(> select):hover ._Input-input_3pq3z_47:not([disabled]) {
+  ._Input_1l5m8_1:has(> select):hover ._Input-input_1l5m8_47:not([disabled]) {
     background-color: var(--puck-color-azure-12);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
 }
-._Input-input_3pq3z_47:focus {
+._Input-input_1l5m8_47:focus {
   border-color: var(--puck-color-grey-05);
   outline: 2px solid var(--puck-color-azure-05);
   transition: none;
 }
-._Input--readOnly_3pq3z_91 > ._Input-input_3pq3z_47,
-._Input--readOnly_3pq3z_91 > select._Input-input_3pq3z_47 {
+._Input--readOnly_1l5m8_91 > ._Input-input_1l5m8_47,
+._Input--readOnly_1l5m8_91 > select._Input-input_1l5m8_47 {
   background-color: var(--puck-color-grey-11);
   border-color: var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
@@ -291,34 +291,34 @@ select._Input-input_3pq3z_47 {
   outline: 0;
   transition: none;
 }
-._Input-radioGroupItems_3pq3z_102 {
+._Input-radioGroupItems_1l5m8_102 {
   display: flex;
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 4px;
   flex-wrap: wrap;
 }
-._Input-radio_3pq3z_102 {
+._Input-radio_1l5m8_102 {
   border-right: 1px solid var(--puck-color-grey-09);
   flex-grow: 1;
 }
-._Input-radio_3pq3z_102:first-of-type {
+._Input-radio_1l5m8_102:first-of-type {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
-._Input-radio_3pq3z_102:first-of-type ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102:first-of-type ._Input-radioInner_1l5m8_119 {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-._Input-radio_3pq3z_102:last-of-type {
+._Input-radio_1l5m8_102:last-of-type {
   border-bottom-right-radius: 4px;
   border-right: 0;
   border-top-right-radius: 4px;
 }
-._Input-radio_3pq3z_102:last-of-type ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102:last-of-type ._Input-radioInner_1l5m8_119 {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-._Input-radioInner_3pq3z_119 {
+._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: pointer;
@@ -327,32 +327,32 @@ select._Input-input_3pq3z_47 {
   text-align: center;
   transition: background-color 50ms ease-in;
 }
-._Input-radio_3pq3z_102:has(:focus-visible) {
+._Input-radio_1l5m8_102:has(:focus-visible) {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
   position: relative;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input-radioInner_3pq3z_119:hover {
+  ._Input-radioInner_1l5m8_119:hover {
     background-color: var(--puck-color-azure-12);
     transition: none;
   }
 }
-._Input--readOnly_3pq3z_91 ._Input-radioInner_3pq3z_119 {
+._Input--readOnly_1l5m8_91 ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: default;
 }
-._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
+._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-azure-11);
   color: var(--puck-color-azure-04);
   font-weight: 500;
 }
-._Input--readOnly_3pq3z_91 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
+._Input--readOnly_1l5m8_91 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-04);
 }
-._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164 {
+._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -361,7 +361,7 @@ select._Input-input_3pq3z_47 {
   white-space: nowrap;
   width: 1px;
 }
-textarea._Input-input_3pq3z_47 {
+textarea._Input-input_1l5m8_47 {
   margin-bottom: -4px;
 }
 

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Bd3DnhYE.mjs';
-export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-Bd3DnhYE.mjs';
+import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Ch-Pcasj.mjs';
+export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Bd3DnhYE.js';
-export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-Bd3DnhYE.js';
+import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Ch-Pcasj.js';
+export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';

package/dist/index.js

@@ -276,7 +276,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
 var import_react13 = require("react");
@@ -1071,7 +1071,8 @@ var defaultAppState = {
       },
       options: [],
       controlsVisible: true
-    }
+    },
+    field: { focus: null }
   }
 };
 var defaultContext = {
@@ -1415,11 +1416,13 @@ var ArrayField = ({
                 event.source.index,
                 (_b = event.destination) == null ? void 0 : _b.index
               );
-              onChange(newValue, {
+              const newUi = {
                 arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
                   [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
                 })
-              });
+              };
+              setUi(newUi, false);
+              onChange(newValue, newUi);
               setLocalState({
                 value: newValue,
                 arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -2269,6 +2272,7 @@ var useSafeId = () => {
 // components/AutoField/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
   children,
   icon,
@@ -2316,7 +2320,7 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
   const { id, Label = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
@@ -2348,23 +2352,45 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
+  const onFocus = (0, import_react13.useCallback)(
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+  const onBlur = (0, import_react13.useCallback)((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, []);
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName15(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
 }
-var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
+  const { state } = useAppContext();
   const { value, onChange } = props;
   const [localValue, setLocalValue] = (0, import_react13.useState)(value);
-  const [recentlyChanged, setRecentlyChanged] = (0, import_react13.useState)(false);
-  const timeoutRef = (0, import_react13.useRef)();
   const onChangeDb = (0, import_use_debounce.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -2374,15 +2400,10 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = (0, import_react13.useCallback)((val, ui) => {
     setLocalValue(val);
-    setRecentlyChanged(true);
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setRecentlyChanged(false);
-    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   (0, import_react13.useEffect)(() => {
-    if (!recentlyChanged) {
+    if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
   }, [value]);

package/dist/index.mjs

@@ -178,14 +178,13 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "Input": "_Input_3pq3z_1", "Input-label": "_Input-label_3pq3z_26", "Input-labelIcon": "_Input-labelIcon_3pq3z_35", "Input-disabledIcon": "_Input-disabledIcon_3pq3z_42", "Input-input": "_Input-input_3pq3z_47", "Input--readOnly": "_Input--readOnly_3pq3z_91", "Input-radioGroupItems": "_Input-radioGroupItems_3pq3z_102", "Input-radio": "_Input-radio_3pq3z_102", "Input-radioInner": "_Input-radioInner_3pq3z_119", "Input-radioInput": "_Input-radioInput_3pq3z_164" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
   useMemo as useMemo2,
-  useRef as useRef2,
   useState as useState10
 } from "react";
 
@@ -880,7 +879,8 @@ var defaultAppState = {
       },
       options: [],
       controlsVisible: true
-    }
+    },
+    field: { focus: null }
   }
 };
 var defaultContext = {
@@ -1228,11 +1228,13 @@ var ArrayField = ({
                 event.source.index,
                 (_b = event.destination) == null ? void 0 : _b.index
               );
-              onChange(newValue, {
+              const newUi = {
                 arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
                   [id]: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
                 })
-              });
+              };
+              setUi(newUi, false);
+              onChange(newValue, newUi);
               setLocalState({
                 value: newValue,
                 arrayState: __spreadProps(__spreadValues({}, arrayState), { items: newArrayStateItems })
@@ -2088,6 +2090,7 @@ var useSafeId = () => {
 // components/AutoField/index.tsx
 import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("Input", styles_module_default2);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
   children,
   icon,
@@ -2135,7 +2138,7 @@ var FieldLabelInternal2 = ({
 };
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
   const { id, Label = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
@@ -2167,23 +2170,45 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
+  const onFocus = useCallback5(
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name }
+          }
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+  const onBlur = useCallback5((e) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null }
+        }
+      });
+    }
+  }, []);
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
     const CustomField = field.render;
-    return /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) });
+    return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20("div", { className: getClassName15(), children: /* @__PURE__ */ jsx20(CustomField, __spreadValues({}, mergedProps)) }) });
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
+  return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
 }
-var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
+  const { state } = useAppContext();
   const { value, onChange } = props;
   const [localValue, setLocalValue] = useState10(value);
-  const [recentlyChanged, setRecentlyChanged] = useState10(false);
-  const timeoutRef = useRef2();
   const onChangeDb = useDebouncedCallback(
     (val, ui) => {
       onChange(val, ui);
@@ -2193,15 +2218,10 @@ function AutoFieldPrivate(props) {
   );
   const onChangeLocal = useCallback5((val, ui) => {
     setLocalValue(val);
-    setRecentlyChanged(true);
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setRecentlyChanged(false);
-    }, RECENT_CHANGE_TIMEOUT);
     onChangeDb(val, ui);
   }, []);
   useEffect9(() => {
-    if (!recentlyChanged) {
+    if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
   }, [value]);

package/dist/{resolve-all-data-Bd3DnhYE.d.mts → resolve-all-data-Ch-Pcasj.d.mts}

@@ -274,6 +274,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/{resolve-all-data-Bd3DnhYE.d.ts → resolve-all-data-Ch-Pcasj.d.ts}

@@ -274,6 +274,9 @@ type UiState = {
         controlsVisible: boolean;
         options: Viewport[];
     };
+    field: {
+        focus?: string | null;
+    };
 };
 type AppState<UserData extends Data = Data> = {
     data: UserData;

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-Bd3DnhYE.mjs';
-export { a4 as resolveAllData } from './resolve-all-data-Bd3DnhYE.mjs';
+import { C as Config, D as Data } from './resolve-all-data-Ch-Pcasj.mjs';
+export { a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-Bd3DnhYE.js';
-export { a4 as resolveAllData } from './resolve-all-data-Bd3DnhYE.js';
+import { C as Config, D as Data } from './resolve-all-data-Ch-Pcasj.js';
+export { a4 as resolveAllData } from './resolve-all-data-Ch-Pcasj.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.17.0-canary.229cbdd",
+  "version": "0.17.0-canary.35170f8",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",