@servicetitan/anvil2 1.46.3 → 1.46.5

package/dist/DndSort.js

@@ -4225,22 +4225,62 @@ function calculateEventValidity(event) {
 function DndSortOverlay() {
   const [valid, setValid] = useState(true);
   const { previewRenderer } = useDndSortContext();
+  const ref = useRef(null);
+  const [offsetState, setOffsetState] = useState();
   useDndMonitor({
     onDragOver(event) {
       setValid(calculateEventValidity(event));
     }
   });
-  useEffect(() => {
-    previewRenderer({ valid });
-  }, [previewRenderer, valid]);
   const classes = cx(styles["drag-preview"], {
     [styles["can-be-dropped"]]: valid
   });
   const preview = previewRenderer({ valid });
-  if (!preview) {
-    return null;
+  useLayoutEffect(() => {
+    const dialogAncestor = resolveDialogAncestor(ref.current);
+    if (dialogAncestor) {
+      const offset = {
+        top: dialogAncestor.getBoundingClientRect().top ?? 0,
+        left: dialogAncestor.getBoundingClientRect().left ?? 0
+      };
+      if (offset.top !== offsetState?.top || offset.left !== offsetState?.left) {
+        setOffsetState(offset);
+      }
+    } else if (!offsetState) {
+      setOffsetState({ top: 0, left: 0 });
+    }
+  }, [preview, offsetState]);
+  return /* @__PURE__ */ jsx("div", { ref, children: preview && offsetState ? /* @__PURE__ */ jsx(
+    DragOverlay,
+    {
+      className: classes,
+      modifiers: [offsetPosition(offsetState)],
+      wrapperElement: "form",
+      children: preview
+    }
+  ) : null });
+}
+function resolveDialogAncestor(el) {
+  if (!el) return null;
+  const rootNode = el.getRootNode();
+  if (rootNode instanceof ShadowRoot) {
+    const dialog = rootNode.host.closest("dialog");
+    if (dialog) {
+      return dialog;
+    }
+    return resolveDialogAncestor(rootNode.host);
   }
-  return /* @__PURE__ */ jsx(DragOverlay, { className: classes, children: previewRenderer({ valid }) });
+  return el.closest("dialog");
+}
+function offsetPosition({ top, left }) {
+  return function(args) {
+    const { transform } = args;
+    return {
+      ...transform,
+      x: transform.x - left,
+      y: transform.y - top
+    };
+  };
 }
 
 const announcements = {