Address dnd issues in array fields

apps/demo/config/blocks/Hero/index.tsx

@@ -25,7 +25,6 @@ export type HeroProps = {
     label: string;
     href: string;
     variant?: "primary" | "secondary";
-    more?: { text: string }[];
   }[];
 };
 

packages/core/components/AutoField/fields/ArrayField/styles.module.css

@@ -56,6 +56,10 @@
   transition: none;
 }
 
+.ArrayField-inner {
+  margin-top: -1px;
+}
+
 /**
  * ArrayFieldItem
  */
@@ -67,15 +71,12 @@
   position: relative;
 }
 
-/* Pseudo-border so we can remove border whilst dragging. Last item will be 1px larger, but it's imperceptible. */
-.ArrayFieldItem:not(.ArrayFieldItem--isDragging):not(:first-of-type)::before {
-  background-color: var(--puck-color-grey-09);
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  content: "";
-  z-index: 1;
-  top: -1px;
+.ArrayFieldItem {
+  border-top: 1px solid var(--puck-color-grey-09);
+}
+
+.ArrayFieldItem--isDragging {
+  border-top: transparent;
 }
 
 .ArrayFieldItem--isExpanded::before {
@@ -90,8 +91,7 @@
 }
 
 .ArrayFieldItem--isDragging {
-  box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0
-    3px 6px 0;
+  outline: 2px var(--puck-color-azure-09) solid !important;
 }
 
 .ArrayFieldItem--isDragging .ArrayFieldItem-summary:active {
@@ -114,7 +114,6 @@
   font-size: var(--puck-font-size-xxs);
   list-style: none;
   padding: 12px 15px;
-  padding-bottom: 13px; /* Add one additional px to account for pseudo border */
   position: relative;
   overflow: hidden;
   transition: background-color 50ms ease-in;
@@ -126,13 +125,16 @@
 }
 
 .ArrayField--addDisabled
+  > .ArrayField-inner
   > .ArrayFieldItem:last-of-type:not(.ArrayFieldItem--isExpanded)
   > .ArrayFieldItem-summary {
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
-.ArrayField--addDisabled > .ArrayFieldItem--isExpanded:last-of-type {
+.ArrayField--addDisabled
+  > .ArrayField-inner
+  > .ArrayFieldItem--isExpanded:last-of-type {
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }

packages/core/components/DragDropContext/index.tsx

@@ -29,13 +29,12 @@ import { insertComponent } from "../../lib/insert-component";
 import { useDebouncedCallback } from "use-debounce";
 import { CollisionMap } from "../../lib/dnd/collision/dynamic";
 import { ComponentDndData } from "../DraggableComponent";
-import { isElement } from "@dnd-kit/dom/utilities";
 
-import { PointerSensor } from "../../lib/dnd/PointerSensor";
 import { collisionStore } from "../../lib/dnd/collision/dynamic/store";
 import { generateId } from "../../lib/generate-id";
 import { createStore } from "zustand";
 import { getDeepDir } from "../../lib/get-deep-dir";
+import { useSensors } from "../../lib/dnd/use-sensors";
 
 const DEBUG = false;
 
@@ -272,32 +271,7 @@ const DragDropContextClient = ({
     ),
   ]);
 
-  const [sensors] = useState(() => [
-    PointerSensor.configure({
-      activationConstraints(event, source) {
-        const { pointerType, target } = event;
-
-        if (
-          pointerType === "mouse" &&
-          isElement(target) &&
-          (source.handle === target || source.handle?.contains(target))
-        ) {
-          return undefined;
-        }
-
-        const delay = { value: 200, tolerance: 10 };
-
-        if (pointerType === "touch") {
-          return { delay };
-        }
-
-        return {
-          delay,
-          distance: { value: 5 },
-        };
-      },
-    }),
-  ]);
+  const sensors = useSensors();
 
   const [dragListeners, setDragListeners] = useState<DragCbs>({});
 

packages/core/components/ExternalInput/index.tsx

@@ -223,21 +223,28 @@ export const ExternalInput = ({
                   Object.keys(filterFields).map((fieldName) => {
                     const filterField = filterFields[fieldName];
                     return (
-                      <AutoFieldPrivate
+                      <div
+                        className={getClassNameModal("field")}
                         key={fieldName}
-                        field={filterField}
-                        name={fieldName}
-                        id={`external_field_${fieldName}_filter`}
-                        label={filterField.label || fieldName}
-                        value={filters[fieldName]}
-                        onChange={(value) => {
-                          const newFilters = { ...filters, [fieldName]: value };
+                      >
+                        <AutoFieldPrivate
+                          field={filterField}
+                          name={fieldName}
+                          id={`external_field_${fieldName}_filter`}
+                          label={filterField.label || fieldName}
+                          value={filters[fieldName]}
+                          onChange={(value) => {
+                            const newFilters = {
+                              ...filters,
+                              [fieldName]: value,
+                            };
 
-                          setFilters(newFilters);
+                            setFilters(newFilters);
 
-                          search(searchQuery, newFilters);
-                        }}
-                      />
+                            search(searchQuery, newFilters);
+                          }}
+                        />
+                      </div>
                     );
                   })}
               </div>

packages/core/components/ExternalInput/styles.module.css

@@ -339,3 +339,10 @@
   font-size: 14px;
   text-align: right;
 }
+
+.ExternalInputModal-field {
+  color: var(--puck-color-grey-04);
+  margin: 16px;
+  margin-bottom: 12px;
+  display: block;
+}

packages/core/components/Sortable/index.tsx

@@ -1,38 +1,81 @@
 import { DragDropProvider } from "@dnd-kit/react";
 import { PropsWithChildren, ReactNode, useState } from "react";
 import { useSortableSafe } from "../../lib/dnd/dnd-kit/safe";
+import { useSensors } from "../../lib/dnd/use-sensors";
+import {
+  CollisionMap,
+  createDynamicCollisionDetector,
+} from "../../lib/dnd/collision/dynamic";
+import { RestrictToElement } from "@dnd-kit/dom/modifiers";
 
 export const SortableProvider = ({
   children,
+  onDragStart,
+  onDragEnd,
   onMove,
 }: PropsWithChildren<{
+  onDragStart: () => void;
+  onDragEnd: () => void;
   onMove: (moveData: { source: number; target: number }) => void;
 }>) => {
   const [move, setMove] = useState({ source: -1, target: -1 });
 
+  const sensors = useSensors();
+
   return (
     <DragDropProvider
-      onDragOver={(event) => {
+      sensors={sensors}
+      modifiers={[
+        RestrictToElement.configure({
+          element() {
+            return document.querySelector("[data-dnd-container]");
+          },
+        }),
+      ]}
+      onDragStart={onDragStart}
+      onDragOver={(event, manager) => {
         const { operation } = event;
+        const { source, target } = operation;
+
+        if (!source || !target) return;
+
+        let sourceIndex = source.data.index;
+        let targetIndex = target.data.index;
 
-        if (operation.source && operation.target) {
-          const newMove = {
-            source: operation.source.data.index,
-            target: operation.target.data.index,
-          };
+        const collisionData = (
+          manager.dragOperation.data?.collisionMap as CollisionMap
+        )?.[target.id];
+
+        if (sourceIndex !== targetIndex && source.id !== target.id) {
+          const collisionPosition =
+            collisionData?.direction === "up" ? "before" : "after";
+
+          if (targetIndex >= sourceIndex) {
+            targetIndex = targetIndex - 1;
+          }
 
-          if (newMove.source !== newMove.target) {
-            setMove({
-              source: operation.source.data.index,
-              target: operation.target.data.index,
-            });
+          if (collisionPosition === "after") {
+            targetIndex = targetIndex + 1;
           }
+
+          setMove({
+            source: sourceIndex,
+            target: targetIndex,
+          });
         }
       }}
       onDragEnd={() => {
-        if (move.source !== -1 && move.target !== -1) {
-          onMove(move);
-        }
+        setTimeout(() => {
+          if (move.source !== -1 && move.target !== -1) {
+            // Delay until animation finished
+            // TODO use this in onDragOver instead of optimistic rendering once re-renders reduced to polish out edge cases
+            onMove(move);
+          }
+
+          onDragEnd();
+        }, 250);
+
+        setMove({ source: -1, target: -1 });
       }}
     >
       {children}
@@ -62,6 +105,7 @@ export const Sortable = ({
     index,
     disabled,
     data: { index },
+    collisionDetector: createDynamicCollisionDetector("y"),
   });
 
   return children({ status, ref: sortableRef });

packages/core/lib/dnd/use-sensors.ts

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { PointerSensor } from "./PointerSensor";
+import { isElement } from "@dnd-kit/dom/utilities";
+
+export const useSensors = () => {
+  const [sensors] = useState(() => [
+    PointerSensor.configure({
+      activationConstraints(event, source) {
+        const { pointerType, target } = event;
+
+        if (
+          pointerType === "mouse" &&
+          isElement(target) &&
+          (source.handle === target || source.handle?.contains(target))
+        ) {
+          return undefined;
+        }
+
+        const delay = { value: 200, tolerance: 10 };
+
+        if (pointerType === "touch") {
+          return { delay };
+        }
+
+        return {
+          delay,
+          distance: { value: 5 },
+        };
+      },
+    }),
+  ]);
+
+  return sensors;
+};