@measured/puck 0.16.1-canary.16a7d11 → 0.16.1-canary.20d7309

package/dist/index.css

@@ -1741,7 +1741,7 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
-._PuckCanvas_esbg1_1 {
+._PuckCanvas_avf1c_1 {
   background: var(--puck-color-grey-11);
   display: flex;
   grid-area: editor;
@@ -1750,15 +1750,15 @@ textarea._Input-input_3pq3z_47 {
   overflow: auto;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas_esbg1_1 {
+  ._PuckCanvas_avf1c_1 {
     padding: calc(var(--puck-space-px) * 1.5);
     padding-top: var(--puck-space-px);
   }
-  ._PuckCanvas_esbg1_1:not(._PuckCanvas_esbg1_1:has(._PuckCanvas-controls_esbg1_16)) {
+  ._PuckCanvas_avf1c_1:not(._PuckCanvas_avf1c_1:has(._PuckCanvas-controls_avf1c_16)) {
     padding-top: calc(var(--puck-space-px) * 1.5);
   }
 }
-._PuckCanvas-inner_esbg1_21 {
+._PuckCanvas-inner_avf1c_21 {
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -1768,31 +1768,33 @@ textarea._Input-input_3pq3z_47 {
   position: relative;
   width: 100%;
 }
-._PuckCanvas-root_esbg1_32 {
+._PuckCanvas-root_avf1c_32 {
   background: white;
   border: 1px solid var(--puck-color-grey-09);
   box-sizing: border-box;
   min-width: 321px;
   position: absolute;
+  pointer-events: none;
   transform-origin: top;
   top: 0;
   bottom: 0;
   opacity: 0;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas-root_esbg1_32 {
+  ._PuckCanvas-root_avf1c_32 {
     min-width: unset;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._PuckCanvas-root_esbg1_32 {
+  ._PuckCanvas-root_avf1c_32 {
     transition: none !important;
   }
 }
-._PuckCanvas--ready_esbg1_56 ._PuckCanvas-root_esbg1_32 {
+._PuckCanvas--ready_avf1c_57 ._PuckCanvas-root_avf1c_32 {
+  pointer-events: unset;
   opacity: 1;
 }
-._PuckCanvas-loader_esbg1_60 {
+._PuckCanvas-loader_avf1c_62 {
   align-items: center;
   color: var(--puck-color-grey-06);
   display: flex;
@@ -1801,10 +1803,10 @@ textarea._Input-input_3pq3z_47 {
   transition: opacity 250ms ease-out;
   opacity: 0;
 }
-._PuckCanvas--showLoader_esbg1_70 ._PuckCanvas-loader_esbg1_60 {
+._PuckCanvas--showLoader_avf1c_72 ._PuckCanvas-loader_avf1c_62 {
   opacity: 1;
 }
-._PuckCanvas--showLoader_esbg1_70._PuckCanvas--ready_esbg1_56 ._PuckCanvas-loader_esbg1_60 {
+._PuckCanvas--showLoader_avf1c_72._PuckCanvas--ready_avf1c_57 ._PuckCanvas-loader_avf1c_62 {
   opacity: 0;
   height: 0;
   transition: none;

package/dist/index.js

@@ -764,16 +764,15 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
   const resolveDataForItem = (0, import_react4.useCallback)(
     (item, force = false) => __async(void 0, null, function* () {
       var _a, _b, _c;
-      setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
       const componentConfig = item.type === "root" ? config.root : config.components[item.type];
       if (!componentConfig) {
-        unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
         const changed = getChanged(item, (_a = cache3[item.props.id]) == null ? void 0 : _a.lastData);
         if (Object.values(changed).some((el) => el === true) || force) {
+          setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
           const resolvedPermissions2 = yield componentConfig.resolvePermissions(
             item,
             {
@@ -793,9 +792,9 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
           setResolvedPermissions((p) => __spreadProps(__spreadValues({}, p), {
             [item.props.id]: resolvedPermissions2
           }));
+          unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
         }
       }
-      unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
     }),
     [config, globalPermissions, appState, cache3]
   );
@@ -1447,6 +1446,9 @@ var ArrayField = ({
                   e.stopPropagation();
                   setHovering(false);
                 },
+                onClick: (e) => {
+                  e.preventDefault();
+                },
                 children: [
                   localState.arrayState.items.map((item, i) => {
                     const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
@@ -2325,9 +2327,12 @@ function AutoFieldInternal(props) {
   const Render2 = render[field.type];
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
 }
+var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
   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);
@@ -2337,10 +2342,17 @@ 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)(() => {
-    setLocalValue(value);
+    if (!recentlyChanged) {
+      setLocalValue(value);
+    }
   }, [value]);
   const localProps = {
     value: localValue,
@@ -2348,8 +2360,16 @@ function AutoFieldPrivate(props) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
-var DefaultLabel = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", __spreadValues({}, props));
 function AutoField(props) {
+  const DefaultLabel = (0, import_react13.useMemo)(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, labelProps), {
+        className: getClassName15({ readOnly: props.readOnly })
+      })
+    );
+    return DefaultLabel2;
+  }, [props.readOnly]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
@@ -3674,7 +3694,7 @@ var DefaultFields = ({
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
 };
 var useResolvedFields = () => {
-  var _a;
+  var _a, _b;
   const { selectedItem, state, config } = useAppContext();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
@@ -3686,14 +3706,17 @@ var useResolvedFields = () => {
   const [fieldsLoading, setFieldsLoading] = (0, import_react21.useState)(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
+  const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
+  const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
+  const hasResolver = hasComponentResolver || hasRootResolver;
   const resolveFields = (0, import_react21.useCallback)(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
-      var _a2, _b, _c;
+      var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
       const changed = getChanged(componentData, lastData);
       setLastSelectedData(componentData);
-      if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields)) {
-        return yield componentConfig == null ? void 0 : componentConfig.resolveFields(
+      if (hasComponentResolver) {
+        return yield componentConfig.resolveFields(
           componentData,
           {
             changed,
@@ -3704,8 +3727,8 @@ var useResolvedFields = () => {
           }
         );
       }
-      if (!selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields)) {
-        return yield (_c = config.root) == null ? void 0 : _c.resolveFields(componentData, {
+      if (hasRootResolver) {
+        return yield config.root.resolveFields(componentData, {
           changed,
           fields,
           lastFields: resolvedFields,
@@ -3723,12 +3746,16 @@ var useResolvedFields = () => {
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
   (0, import_react21.useEffect)(() => {
-    setFieldsLoading(true);
-    resolveFields(defaultFields).then((fields) => {
-      setResolvedFields(fields || {});
-      setFieldsLoading(false);
-    });
-  }, [data, defaultFields, state.ui.itemSelector]);
+    if (hasResolver) {
+      setFieldsLoading(true);
+      resolveFields(defaultFields).then((fields) => {
+        setResolvedFields(fields || {});
+        setFieldsLoading(false);
+      });
+    } else {
+      setResolvedFields(defaultFields);
+    }
+  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -4948,7 +4975,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_esbg1_1", "PuckCanvas-controls": "_PuckCanvas-controls_esbg1_16", "PuckCanvas-inner": "_PuckCanvas-inner_esbg1_21", "PuckCanvas-root": "_PuckCanvas-root_esbg1_32", "PuckCanvas--ready": "_PuckCanvas--ready_esbg1_56", "PuckCanvas-loader": "_PuckCanvas-loader_esbg1_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_esbg1_70" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_avf1c_1", "PuckCanvas-controls": "_PuckCanvas-controls_avf1c_16", "PuckCanvas-inner": "_PuckCanvas-inner_avf1c_21", "PuckCanvas-root": "_PuckCanvas-root_avf1c_32", "PuckCanvas--ready": "_PuckCanvas--ready_avf1c_57", "PuckCanvas-loader": "_PuckCanvas-loader_avf1c_62", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_avf1c_72" };
 
 // lib/get-zoom-config.ts
 init_react_import();

package/dist/index.mjs

@@ -180,6 +180,7 @@ import {
   useCallback as useCallback5,
   useEffect as useEffect9,
   useMemo as useMemo2,
+  useRef as useRef2,
   useState as useState10
 } from "react";
 
@@ -652,16 +653,15 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
   const resolveDataForItem = useCallback(
     (item, force = false) => __async(void 0, null, function* () {
       var _a, _b, _c;
-      setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
       const componentConfig = item.type === "root" ? config.root : config.components[item.type];
       if (!componentConfig) {
-        unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
         return;
       }
       const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
       if (componentConfig.resolvePermissions) {
         const changed = getChanged(item, (_a = cache3[item.props.id]) == null ? void 0 : _a.lastData);
         if (Object.values(changed).some((el) => el === true) || force) {
+          setComponentLoading == null ? void 0 : setComponentLoading(item.props.id);
           const resolvedPermissions2 = yield componentConfig.resolvePermissions(
             item,
             {
@@ -681,9 +681,9 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
           setResolvedPermissions((p) => __spreadProps(__spreadValues({}, p), {
             [item.props.id]: resolvedPermissions2
           }));
+          unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
         }
       }
-      unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
     }),
     [config, globalPermissions, appState, cache3]
   );
@@ -1339,6 +1339,9 @@ var ArrayField = ({
                   e.stopPropagation();
                   setHovering(false);
                 },
+                onClick: (e) => {
+                  e.preventDefault();
+                },
                 children: [
                   localState.arrayState.items.map((item, i) => {
                     const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
@@ -2217,9 +2220,12 @@ function AutoFieldInternal(props) {
   const Render2 = render[field.type];
   return /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
 }
+var RECENT_CHANGE_TIMEOUT = 200;
 function AutoFieldPrivate(props) {
   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);
@@ -2229,10 +2235,17 @@ 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(() => {
-    setLocalValue(value);
+    if (!recentlyChanged) {
+      setLocalValue(value);
+    }
   }, [value]);
   const localProps = {
     value: localValue,
@@ -2240,8 +2253,16 @@ function AutoFieldPrivate(props) {
   };
   return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
-var DefaultLabel = (props) => /* @__PURE__ */ jsx20("div", __spreadValues({}, props));
 function AutoField(props) {
+  const DefaultLabel = useMemo2(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx20(
+      "div",
+      __spreadProps(__spreadValues({}, labelProps), {
+        className: getClassName15({ readOnly: props.readOnly })
+      })
+    );
+    return DefaultLabel2;
+  }, [props.readOnly]);
   return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
@@ -3584,7 +3605,7 @@ var DefaultFields = ({
   return /* @__PURE__ */ jsx27(Fragment12, { children });
 };
 var useResolvedFields = () => {
-  var _a;
+  var _a, _b;
   const { selectedItem, state, config } = useAppContext();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
@@ -3596,14 +3617,17 @@ var useResolvedFields = () => {
   const [fieldsLoading, setFieldsLoading] = useState15(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
+  const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
+  const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
+  const hasResolver = hasComponentResolver || hasRootResolver;
   const resolveFields = useCallback7(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
-      var _a2, _b, _c;
+      var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
       const changed = getChanged(componentData, lastData);
       setLastSelectedData(componentData);
-      if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields)) {
-        return yield componentConfig == null ? void 0 : componentConfig.resolveFields(
+      if (hasComponentResolver) {
+        return yield componentConfig.resolveFields(
           componentData,
           {
             changed,
@@ -3614,8 +3638,8 @@ var useResolvedFields = () => {
           }
         );
       }
-      if (!selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields)) {
-        return yield (_c = config.root) == null ? void 0 : _c.resolveFields(componentData, {
+      if (hasRootResolver) {
+        return yield config.root.resolveFields(componentData, {
           changed,
           fields,
           lastFields: resolvedFields,
@@ -3633,12 +3657,16 @@ var useResolvedFields = () => {
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
   useEffect13(() => {
-    setFieldsLoading(true);
-    resolveFields(defaultFields).then((fields) => {
-      setResolvedFields(fields || {});
-      setFieldsLoading(false);
-    });
-  }, [data, defaultFields, state.ui.itemSelector]);
+    if (hasResolver) {
+      setFieldsLoading(true);
+      resolveFields(defaultFields).then((fields) => {
+        setResolvedFields(fields || {});
+        setFieldsLoading(false);
+      });
+    } else {
+      setResolvedFields(defaultFields);
+    }
+  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3947,7 +3975,7 @@ import {
   createContext as createContext4,
   useContext as useContext5,
   useEffect as useEffect15,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState17
 } from "react";
 import hash from "object-hash";
@@ -4172,7 +4200,7 @@ function AutoFrame(_a) {
   ]);
   const [loaded, setLoaded] = useState17(false);
   const [ctx, setCtx] = useState17({});
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const [mountTarget, setMountTarget] = useState17();
   useEffect15(() => {
     var _a2;
@@ -4721,7 +4749,7 @@ import {
   useCallback as useCallback10,
   useEffect as useEffect17,
   useMemo as useMemo11,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState20
 } from "react";
 
@@ -4870,7 +4898,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_esbg1_1", "PuckCanvas-controls": "_PuckCanvas-controls_esbg1_16", "PuckCanvas-inner": "_PuckCanvas-inner_esbg1_21", "PuckCanvas-root": "_PuckCanvas-root_esbg1_32", "PuckCanvas--ready": "_PuckCanvas--ready_esbg1_56", "PuckCanvas-loader": "_PuckCanvas-loader_esbg1_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_esbg1_70" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_avf1c_1", "PuckCanvas-controls": "_PuckCanvas-controls_avf1c_16", "PuckCanvas-inner": "_PuckCanvas-inner_avf1c_21", "PuckCanvas-root": "_PuckCanvas-root_avf1c_32", "PuckCanvas--ready": "_PuckCanvas--ready_avf1c_57", "PuckCanvas-loader": "_PuckCanvas-loader_avf1c_62", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_avf1c_72" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -4910,7 +4938,7 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = useRef3(null);
+  const frameRef = useRef4(null);
   const [showTransition, setShowTransition] = useState20(false);
   const defaultRender = useMemo11(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment17, { children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.16.1-canary.16a7d11",
+  "version": "0.16.1-canary.20d7309",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",