@measured/puck 0.18.0-canary.4b589f6 → 0.18.0-canary.99e9ecb

package/dist/index.js

@@ -3664,7 +3664,7 @@ var getClassName17 = get_class_name_factory_default("DropZone", styles_module_de
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
 var DropZoneEdit = (0, import_react29.forwardRef)(
-  function DropZoneEdit2({
+  function DropZoneEditInternal({
     zone,
     allow,
     disallow,
@@ -3825,7 +3825,7 @@ var DropZoneEdit = (0, import_react29.forwardRef)(
           var _a, _b, _c, _d, _e;
           const componentId = item.props.id;
           const puckProps = {
-            renderDropZone: DropZone,
+            renderDropZone: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneEdit, __spreadValues({}, props)),
             isEditing: true,
             dragRef: null
           };
@@ -3889,7 +3889,7 @@ var DropZoneEdit = (0, import_react29.forwardRef)(
   }
 );
 var DropZoneRender = (0, import_react29.forwardRef)(
-  function DropZoneRender2({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone }, ref) {
     const ctx = (0, import_react29.useContext)(dropZoneContext);
     const { data, areaId = "root", config } = ctx || {};
     let zoneCompound = rootDroppableId;
@@ -3927,7 +3927,9 @@ var DropZoneRender = (0, import_react29.forwardRef)(
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Component.render,
               __spreadProps(__spreadValues({}, item.props), {
-                puck: { renderDropZone: DropZoneRender2 }
+                puck: {
+                  renderDropZone: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneRender, __spreadValues({}, props))
+                }
               })
             )
           },
@@ -4002,6 +4004,48 @@ var getFrame = () => {
   return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
 };
 
+// lib/global-position.ts
+init_react_import();
+var GlobalPosition = class {
+  constructor(target, original) {
+    this.scaleFactor = 1;
+    this.frameEl = null;
+    this.frameRect = null;
+    var _a;
+    this.target = target;
+    this.original = original;
+    this.frameEl = document.querySelector("iframe");
+    if (this.frameEl) {
+      this.frameRect = this.frameEl.getBoundingClientRect();
+      this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
+    }
+  }
+  get x() {
+    return this.original.x;
+  }
+  get y() {
+    return this.original.y;
+  }
+  get global() {
+    if (document !== this.target.ownerDocument && this.frameRect) {
+      return {
+        x: this.x * this.scaleFactor + this.frameRect.left,
+        y: this.y * this.scaleFactor + this.frameRect.top
+      };
+    }
+    return this.original;
+  }
+  get frame() {
+    if (document === this.target.ownerDocument && this.frameRect) {
+      return {
+        x: (this.x - this.frameRect.left) / this.scaleFactor,
+        y: (this.y - this.frameRect.top) / this.scaleFactor
+      };
+    }
+    return this.original;
+  }
+};
+
 // lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
@@ -4031,10 +4075,12 @@ var getZoneId2 = (candidate) => {
   }
   return id;
 };
-var getPointerCollisions = (position, manager, ownerDocument) => {
-  var _a;
+var getPointerCollisions = (position, manager) => {
   const candidates = [];
-  let elements = ownerDocument.elementsFromPoint(position.x, position.y);
+  let elements = position.target.ownerDocument.elementsFromPoint(
+    position.x,
+    position.y
+  );
   const previewFrame = elements.find(
     (el) => el.getAttribute("data-puck-preview")
   );
@@ -4043,17 +4089,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
     elements = [drawer];
   }
   if (previewFrame) {
-    const iframe = previewFrame.querySelector("iframe");
-    if (iframe) {
-      const rect = iframe.getBoundingClientRect();
-      const frame = getFrame();
-      if (frame) {
-        const scaleFactor = rect.width / (((_a = iframe.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
-        elements = frame.elementsFromPoint(
-          (position.x - rect.left) / scaleFactor,
-          (position.y - rect.top) / scaleFactor
-        );
-      }
+    const frame = getFrame();
+    if (frame) {
+      elements = frame.elementsFromPoint(position.frame.x, position.frame.y);
     }
   }
   if (elements) {
@@ -4070,9 +4108,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
   }
   return candidates;
 };
-var findDeepestCandidate = (position, manager, ownerDocument) => {
+var findDeepestCandidate = (position, manager) => {
   var _a;
-  const candidates = getPointerCollisions(position, manager, ownerDocument);
+  const candidates = getPointerCollisions(position, manager);
   if (candidates.length > 0) {
     const sortedCandidates = depthSort(candidates);
     const draggable = manager.dragOperation.source;
@@ -4125,22 +4163,18 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     const cleanupEffect = (0, import_state.effects)(() => {
       const handleMove = (event) => {
-        const position = {
+        const target = event.originalTarget || event.target;
+        const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
-        };
-        const target = event.originalTarget || event.target;
-        const ownerDocument = target == null ? void 0 : target.ownerDocument;
+        });
         const elements = document.elementsFromPoint(
-          event.clientX,
-          event.clientY
+          position.global.x,
+          position.global.y
         );
         const overEl = elements.some((el) => el.id === id);
         if (overEl) {
-          onChange(
-            findDeepestCandidate(position, manager, ownerDocument),
-            manager
-          );
+          onChange(findDeepestCandidate(position, manager), manager);
         }
       };
       const handleMoveThrottled = throttle(handleMove, 50);
@@ -5342,7 +5376,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const [id] = (0, import_react32.useState)(generateId());
+  const id = (0, import_react32.useId)();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -5643,19 +5677,33 @@ var useResolvedFields = () => {
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state]
+    [data, config, componentData, selectedItem, resolvedFields, state, parent]
   );
+  const [hasParent, setHasParent] = (0, import_react35.useState)(false);
   (0, import_react35.useEffect)(() => {
-    if (hasResolver) {
-      setFieldsLoading(true);
-      resolveFields(defaultFields).then((fields) => {
-        setResolvedFields(fields || {});
-        setFieldsLoading(false);
-      });
-    } else {
-      setResolvedFields(defaultFields);
+    setHasParent(!!parent);
+  }, [parent]);
+  (0, import_react35.useEffect)(() => {
+    var _a2;
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || hasParent) {
+      if (hasResolver) {
+        setFieldsLoading(true);
+        resolveFields(defaultFields).then((fields) => {
+          setResolvedFields(fields || {});
+          setFieldsLoading(false);
+        });
+      } else {
+        setResolvedFields(defaultFields);
+      }
     }
-  }, [data, defaultFields, selectedItem, hasResolver]);
+  }, [
+    data,
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    hasParent
+  ]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {

package/dist/index.mjs

@@ -2425,7 +2425,7 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 
 // components/Drawer/index.tsx
-import { useMemo as useMemo9, useState as useState18 } from "react";
+import { useId as useId2, useMemo as useMemo9, useState as useState18 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3507,7 +3507,7 @@ var getClassName17 = get_class_name_factory_default("DropZone", styles_module_de
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
 var DropZoneEdit = forwardRef3(
-  function DropZoneEdit2({
+  function DropZoneEditInternal({
     zone,
     allow,
     disallow,
@@ -3668,7 +3668,7 @@ var DropZoneEdit = forwardRef3(
           var _a, _b, _c, _d, _e;
           const componentId = item.props.id;
           const puckProps = {
-            renderDropZone: DropZone,
+            renderDropZone: (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props)),
             isEditing: true,
             dragRef: null
           };
@@ -3732,7 +3732,7 @@ var DropZoneEdit = forwardRef3(
   }
 );
 var DropZoneRender = forwardRef3(
-  function DropZoneRender2({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone }, ref) {
     const ctx = useContext6(dropZoneContext);
     const { data, areaId = "root", config } = ctx || {};
     let zoneCompound = rootDroppableId;
@@ -3770,7 +3770,9 @@ var DropZoneRender = forwardRef3(
             children: /* @__PURE__ */ jsx22(
               Component.render,
               __spreadProps(__spreadValues({}, item.props), {
-                puck: { renderDropZone: DropZoneRender2 }
+                puck: {
+                  renderDropZone: (props) => /* @__PURE__ */ jsx22(DropZoneRender, __spreadValues({}, props))
+                }
               })
             )
           },
@@ -3845,6 +3847,48 @@ var getFrame = () => {
   return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
 };
 
+// lib/global-position.ts
+init_react_import();
+var GlobalPosition = class {
+  constructor(target, original) {
+    this.scaleFactor = 1;
+    this.frameEl = null;
+    this.frameRect = null;
+    var _a;
+    this.target = target;
+    this.original = original;
+    this.frameEl = document.querySelector("iframe");
+    if (this.frameEl) {
+      this.frameRect = this.frameEl.getBoundingClientRect();
+      this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
+    }
+  }
+  get x() {
+    return this.original.x;
+  }
+  get y() {
+    return this.original.y;
+  }
+  get global() {
+    if (document !== this.target.ownerDocument && this.frameRect) {
+      return {
+        x: this.x * this.scaleFactor + this.frameRect.left,
+        y: this.y * this.scaleFactor + this.frameRect.top
+      };
+    }
+    return this.original;
+  }
+  get frame() {
+    if (document === this.target.ownerDocument && this.frameRect) {
+      return {
+        x: (this.x - this.frameRect.left) / this.scaleFactor,
+        y: (this.y - this.frameRect.top) / this.scaleFactor
+      };
+    }
+    return this.original;
+  }
+};
+
 // lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
@@ -3874,10 +3918,12 @@ var getZoneId2 = (candidate) => {
   }
   return id;
 };
-var getPointerCollisions = (position, manager, ownerDocument) => {
-  var _a;
+var getPointerCollisions = (position, manager) => {
   const candidates = [];
-  let elements = ownerDocument.elementsFromPoint(position.x, position.y);
+  let elements = position.target.ownerDocument.elementsFromPoint(
+    position.x,
+    position.y
+  );
   const previewFrame = elements.find(
     (el) => el.getAttribute("data-puck-preview")
   );
@@ -3886,17 +3932,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
     elements = [drawer];
   }
   if (previewFrame) {
-    const iframe = previewFrame.querySelector("iframe");
-    if (iframe) {
-      const rect = iframe.getBoundingClientRect();
-      const frame = getFrame();
-      if (frame) {
-        const scaleFactor = rect.width / (((_a = iframe.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
-        elements = frame.elementsFromPoint(
-          (position.x - rect.left) / scaleFactor,
-          (position.y - rect.top) / scaleFactor
-        );
-      }
+    const frame = getFrame();
+    if (frame) {
+      elements = frame.elementsFromPoint(position.frame.x, position.frame.y);
     }
   }
   if (elements) {
@@ -3913,9 +3951,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
   }
   return candidates;
 };
-var findDeepestCandidate = (position, manager, ownerDocument) => {
+var findDeepestCandidate = (position, manager) => {
   var _a;
-  const candidates = getPointerCollisions(position, manager, ownerDocument);
+  const candidates = getPointerCollisions(position, manager);
   if (candidates.length > 0) {
     const sortedCandidates = depthSort(candidates);
     const draggable = manager.dragOperation.source;
@@ -3968,22 +4006,18 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     const cleanupEffect = effects(() => {
       const handleMove = (event) => {
-        const position = {
+        const target = event.originalTarget || event.target;
+        const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
-        };
-        const target = event.originalTarget || event.target;
-        const ownerDocument = target == null ? void 0 : target.ownerDocument;
+        });
         const elements = document.elementsFromPoint(
-          event.clientX,
-          event.clientY
+          position.global.x,
+          position.global.y
         );
         const overEl = elements.some((el) => el.id === id);
         if (overEl) {
-          onChange(
-            findDeepestCandidate(position, manager, ownerDocument),
-            manager
-          );
+          onChange(findDeepestCandidate(position, manager), manager);
         }
       };
       const handleMoveThrottled = throttle(handleMove, 50);
@@ -5194,7 +5228,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const [id] = useState18(generateId());
+  const id = useId2();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -5501,19 +5535,33 @@ var useResolvedFields = () => {
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state]
+    [data, config, componentData, selectedItem, resolvedFields, state, parent]
   );
+  const [hasParent, setHasParent] = useState19(false);
   useEffect16(() => {
-    if (hasResolver) {
-      setFieldsLoading(true);
-      resolveFields(defaultFields).then((fields) => {
-        setResolvedFields(fields || {});
-        setFieldsLoading(false);
-      });
-    } else {
-      setResolvedFields(defaultFields);
+    setHasParent(!!parent);
+  }, [parent]);
+  useEffect16(() => {
+    var _a2;
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || hasParent) {
+      if (hasResolver) {
+        setFieldsLoading(true);
+        resolveFields(defaultFields).then((fields) => {
+          setResolvedFields(fields || {});
+          setFieldsLoading(false);
+        });
+      } else {
+        setResolvedFields(defaultFields);
+      }
     }
-  }, [data, defaultFields, selectedItem, hasResolver]);
+  }, [
+    data,
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    hasParent
+  ]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.18.0-canary.4b589f6",
+  "version": "0.18.0-canary.99e9ecb",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",