@noya-app/noya-designsystem 0.1.57 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.21",
+    "@noya-app/noya-colorpicker": "0.1.23",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
     "@noya-app/noya-icons": "0.1.10",

package/src/__tests__/validateDropIndicator.test.ts

@@ -1,88 +1,121 @@
 import { describe, expect, it } from "bun:test";
 import {
   defaultAcceptsDrop,
+  MoveDragItemParameters,
   validateDropIndicator,
 } from "../components/sorting/sorting";
 
 describe("defaultAcceptsDrop", () => {
   it("should return false if the active item is the same as the over item", () => {
-    const result = defaultAcceptsDrop(0, 0, "inside", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 0,
+      position: "inside",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false for 'inside' position", () => {
-    const result = defaultAcceptsDrop(0, 1, "inside", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 1,
+      position: "inside",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false when dropping above the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "above", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 0,
+      position: "above",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false when dropping below the same item", () => {
-    const result = defaultAcceptsDrop(0, 0, "below", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 0,
+      position: "below",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false when dropping above the item below the source", () => {
-    const result = defaultAcceptsDrop(0, 1, "above", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 1,
+      position: "above",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return false when dropping below the item above the source", () => {
-    const result = defaultAcceptsDrop(1, 0, "below", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 1,
+      targetIndex: 0,
+      position: "below",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(false);
   });
 
   it("should return true when dropping above a valid target", () => {
-    const result = defaultAcceptsDrop(0, 2, "above", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 0,
+      targetIndex: 2,
+      position: "above",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(true);
   });
 
   it("should return true when dropping below a valid target", () => {
-    const result = defaultAcceptsDrop(2, 0, "below", "", "");
+    const result = defaultAcceptsDrop({
+      sourceIndex: 2,
+      targetIndex: 0,
+      position: "below",
+      sourceListId: "",
+      targetListId: "",
+    });
     expect(result).toBe(true);
   });
 });
 
 describe("validateDropIndicator", () => {
-  const mockAcceptsDrop = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsDrop = (parameters: MoveDragItemParameters) => {
     // Mock that only allows dropping inside
-    if (position === "inside") return true;
+    if (parameters.position === "inside") return true;
     return false;
   };
 
-  const mockAcceptsDropAboveBelow = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsDropAboveBelow = (parameters: MoveDragItemParameters) => {
     // Mock that only allows dropping above/below
-    if (position === "inside") return false;
+    if (parameters.position === "inside") return false;
     return true;
   };
 
-  const mockAcceptsAll = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsAll = (_: MoveDragItemParameters) => {
     // Mock that allows all drop positions
     return true;
   };
 
-  const mockAcceptsAboveAndInside = (
-    sourceIndex: number,
-    targetIndex: number,
-    position: "above" | "below" | "inside"
-  ) => {
+  const mockAcceptsAboveAndInside = (parameters: MoveDragItemParameters) => {
     // Mock that allows dropping above and inside, but not below
-    return position !== "below";
+    return parameters.position !== "below";
   };
 
   const keys = ["item1", "item2", "item3"];

package/src/components/sorting/SharedDragProvider.tsx

@@ -13,7 +13,9 @@ import {
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
-import { Point } from "@noya-app/noya-geometry";
+import { Point, rectContainsPoint, unionRects } from "@noya-app/noya-geometry";
+import { windowsOf } from "@noya-app/noya-utils";
+import { useStableCallback } from "@noya-app/react-utils";
 import * as React from "react";
 import { useMemo } from "react";
 import { createPortal } from "react-dom";
@@ -27,15 +29,23 @@ import {
   SharedDragProps,
   useDragRegistrationManager,
 } from "./DragRegistration";
-import { DragItem, DragState, RelativeDropPosition } from "./sorting";
+import {
+  DragItem,
+  DragState,
+  MoveDragItemHandler,
+  MoveDragItemParameters,
+  RelativeDropPosition,
+} from "./sorting";
 
 type SharedDragProviderProps = {
   children: React.ReactNode;
+  onMoveItem?: MoveDragItemHandler;
   sharedDragProps?: SharedDragProps;
 };
 
 export function SharedDragProvider({
   children,
+  onMoveItem,
   sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext,
@@ -56,6 +66,8 @@ export function SharedDragProvider({
     indicator: null,
   });
 
+  // console.log("dragState", dragState.target);
+
   const { registerList, unregisterList, registeredLists } =
     useDragRegistrationManager();
 
@@ -116,6 +128,8 @@ export function SharedDragProvider({
     [registeredLists, dragState.source]
   );
 
+  const stableOnMoveItem = useStableCallback(onMoveItem);
+
   const handleDragEnd = React.useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
@@ -148,15 +162,24 @@ export function SharedDragProvider({
 
       if (!sourceList || !targetList) return;
 
-      sourceList.onMoveItem(
-        dropTarget.source.index,
-        dropTarget.target.index,
-        dropTarget.indicator,
-        dropTarget.source.listId,
-        dropTarget.target.listId
-      );
+      const parameters: MoveDragItemParameters = {
+        sourceIndex: dropTarget.source.index,
+        targetIndex: dropTarget.target.index,
+        position: dropTarget.indicator,
+        sourceListId: dropTarget.source.listId,
+        targetListId: dropTarget.target.listId,
+      };
+
+      // Both lists have the opportunity to handle the move
+      sourceList.onMoveItem(parameters);
+
+      if (dropTarget.target.listId !== dropTarget.source.listId) {
+        targetList.onMoveItem(parameters);
+      }
+
+      stableOnMoveItem?.(parameters);
     },
-    [registeredLists, dragState.source]
+    [registeredLists, dragState.source, stableOnMoveItem]
   );
 
   const contextValue: DragRegistrationContextType = React.useMemo(
@@ -176,7 +199,7 @@ export function SharedDragProvider({
   );
 
   const collisionDetection = useMemo(() => {
-    return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
+    return getItemFirstCollisionDetection(registeredLists);
   }, [registeredLists]);
 
   return (
@@ -239,13 +262,13 @@ export function withDragProvider<T extends object>(
 
 // Custom collision detection that prioritizes items over containers
 export const getItemFirstCollisionDetection =
-  (registeredListIds: string[]): CollisionDetection =>
+  (registeredLists: Map<string, RegisteredList>): CollisionDetection =>
   (parameters) => {
     const pointerCollisions = pointerWithin(parameters);
 
     if (pointerCollisions.length > 0) {
       const itemCollisions = pointerCollisions.filter((collision) => {
-        for (const listId of registeredListIds) {
+        for (const listId of registeredLists.keys()) {
           if (collision.id === listId) {
             return false;
           }
@@ -259,11 +282,42 @@ export const getItemFirstCollisionDetection =
       }
     }
 
-    // Fall back to pointer-based detection (includes containers)
-    // This handles empty lists and edge cases
-    return pointerCollisions.length > 0
-      ? pointerCollisions
-      : closestCenter(parameters);
+    const listCollision = pointerCollisions.at(0);
+    const nearestCenters = closestCenter(parameters);
+
+    // Handle a pointer between items by checking if the pointer is within
+    // a window of two items.
+    if (parameters.pointerCoordinates && listCollision) {
+      const list = registeredLists.get(listCollision.id as string);
+
+      if (list) {
+        const pairs = windowsOf(list.keys, 2);
+
+        for (const pair of pairs) {
+          const clientRects = pair.map(
+            (key) => parameters.droppableRects.get(key)!
+          );
+
+          const merged = unionRects(
+            ...clientRects.map((rect) => ({
+              x: rect.left,
+              y: rect.top,
+              width: rect.width,
+              height: rect.height,
+            }))
+          );
+
+          if (rectContainsPoint(merged, parameters.pointerCoordinates)) {
+            return nearestCenters.filter((center) =>
+              pair.some((id) => id === center.id)
+            );
+          }
+        }
+      }
+    }
+
+    // This handles empty lists
+    return pointerCollisions;
   };
 
 function findDropTarget({
@@ -327,13 +381,13 @@ function findDropTarget({
 
   // Dropping on the list container itself
   if (over.id === targetList.id) {
-    const canDrop = targetList.acceptsDrop(
-      source.index,
-      Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
-      "below",
-      sourceList.id,
-      targetList.id
-    );
+    const canDrop = targetList.acceptsDrop({
+      sourceIndex: source.index,
+      targetIndex: Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
+      position: "below",
+      sourceListId: sourceList.id,
+      targetListId: targetList.id,
+    });
 
     if (canDrop) {
       return {

package/src/components/sorting/Sortable.tsx

@@ -69,10 +69,9 @@ function useSortableDropIndicator({
 
   if (!source || !target) return;
 
-  const indicator =
-    target.listId === listId && target.itemId === itemId
-      ? activeDrag.indicator
-      : undefined;
+  if (target.listId === listId && target.itemId === itemId) {
+    return activeDrag.indicator ?? undefined;
+  }
 
   const targetParentIndex =
     target.index === -1 ? undefined : getDropTargetParentIndex?.(target.index);
@@ -80,31 +79,31 @@ function useSortableDropIndicator({
   const isValidParent =
     targetParentIndex === undefined || targetParentIndex === -1
       ? false
-      : acceptsDrop(
-          source.index,
-          targetParentIndex,
-          "inside",
-          source.listId,
-          target.listId
-        );
+      : acceptsDrop({
+          sourceIndex: source.index,
+          targetIndex: targetParentIndex,
+          position: "inside",
+          sourceListId: source.listId,
+          targetListId: target.listId,
+        });
 
   const overIdAcceptsDrop =
     target.index === -1
       ? undefined
-      : acceptsDrop(
-          source.index,
-          target.index,
-          "inside",
-          source.listId,
-          target.listId
-        );
+      : acceptsDrop({
+          sourceIndex: source.index,
+          targetIndex: target.index,
+          position: "inside",
+          sourceListId: source.listId,
+          targetListId: target.listId,
+        });
 
   const thisItemIsTargetParent = targetParentIndex === index;
 
-  const showDragInsideIndicatorOnParent =
+  const showIndicatorOnParent =
     !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
 
-  return indicator ?? (showDragInsideIndicatorOnParent ? "inside" : undefined);
+  return showIndicatorOnParent ? "inside" : undefined;
 }
 
 interface RootProps {
@@ -189,12 +188,6 @@ function SortableRoot_({
 
   const { setNodeRef: setDroppableRef } = useDroppable({
     id,
-    // Make the container droppable only when the list is empty
-    // This avoids conflicts with individual sortable items.
-    // This isn't strictly necessary since we also use a custom collision detection
-    // that prioritizes items over containers, but it helps with dropping into
-    // the best position (either above or below, rather than always below).
-    disabled: keys.length > 0,
   });
 
   // Register this list with the global drag system

package/src/components/sorting/sorting.ts

@@ -3,29 +3,19 @@ import * as React from "react";
 
 export type RelativeDropPosition = "above" | "below" | "inside";
 
-export type DropValidator = (
-  sourceIndex: number,
-  targetIndex: number,
-  position: RelativeDropPosition,
-  sourceListId: string,
-  targetListId: string
-) => boolean;
-
-export type AcceptsDrop = (
-  sourceIndex: number,
-  targetIndex: number,
-  position: RelativeDropPosition,
-  sourceListId: string,
-  targetListId: string
-) => boolean;
-
-export type MoveDragItemHandler = (
-  sourceIndex: number,
-  targetIndex: number,
-  position: RelativeDropPosition,
-  sourceListId: string,
-  targetListId: string
-) => void;
+export type MoveDragItemParameters = {
+  sourceIndex: number;
+  sourceListId: string;
+  targetIndex: number;
+  targetListId: string;
+  position: RelativeDropPosition;
+};
+
+export type DropValidator = (parameters: MoveDragItemParameters) => boolean;
+
+export type AcceptsDrop = (parameters: MoveDragItemParameters) => boolean;
+
+export type MoveDragItemHandler = (parameters: MoveDragItemParameters) => void;
 
 export type AcceptsFromList = ({
   sourceListId,
@@ -54,11 +44,11 @@ export const normalizeListTargetIndex = (
   return position === "above" ? index : index + 1;
 };
 
-export const defaultAcceptsDrop: DropValidator = (
+export const defaultAcceptsDrop: DropValidator = ({
   sourceIndex,
   targetIndex,
-  position
-) => {
+  position,
+}) => {
   if (position === "inside") return false;
 
   const normalized = normalizeListTargetIndex(targetIndex, position);
@@ -120,13 +110,13 @@ export function validateDropIndicator({
   if (overIndex === -1) return undefined;
   if (activeIndex === -1 && sourceListId === targetListId) return undefined;
 
-  const acceptsDropInside = acceptsDrop(
-    activeIndex,
-    overIndex,
-    "inside",
+  const acceptsDropInside = acceptsDrop({
+    sourceIndex: activeIndex,
+    targetIndex: overIndex,
+    position: "inside",
     sourceListId,
-    targetListId
-  );
+    targetListId,
+  });
 
   // Drop into the middle third if possible
   if (
@@ -142,27 +132,14 @@ export function validateDropIndicator({
     offsetStart
   );
 
-  // For moving within the same list, we are more strict about the drop position.
-  // The source item must actually be contained in the target element.
-  // Otherwise the user may unintentionally drop the item into target,
-  // since it’s difficult to select no target at all.
-  // When dropping into a different list, the user definitely wants the item within that list,
-  // and it also handles the empty list case.
-  if (
-    !isContained(elementStart, elementSize, offsetStart) &&
-    sourceListId === targetListId
-  ) {
-    return undefined;
-  }
-
   // Drop above or below if possible
-  const acceptedHalf = acceptsDrop(
-    activeIndex,
-    overIndex,
-    containingHalf,
+  const acceptedHalf = acceptsDrop({
+    sourceIndex: activeIndex,
+    targetIndex: overIndex,
+    position: containingHalf,
     sourceListId,
-    targetListId
-  );
+    targetListId,
+  });
 
   return acceptedHalf
     ? containingHalf
@@ -183,16 +160,6 @@ function isContainedInMiddleThird(
   );
 }
 
-function isContained(
-  elementStart: number,
-  elementSize: number,
-  offsetStart: number
-): boolean {
-  return (
-    offsetStart >= elementStart && offsetStart <= elementStart + elementSize
-  );
-}
-
 function getContainingHalf(
   elementStart: number,
   elementSize: number,
@@ -202,14 +169,16 @@ function getContainingHalf(
   return "below";
 }
 
+export const dragItemKeySeparator = "-~-";
+
 export function createDragItemKey(listId: string, itemId: UniqueIdentifier) {
-  return `${listId}-~-${itemId}`;
+  return `${listId}${dragItemKeySeparator}${itemId}`;
 }
 
 export function parseDragItemKey(key: string): {
   listId: string;
   itemId: UniqueIdentifier;
 } {
-  const [listId, itemId] = key.split("-~-");
+  const [listId, itemId] = key.split(dragItemKeySeparator);
   return { listId, itemId };
 }

package/src/utils/moveTreeItem.ts

@@ -88,13 +88,13 @@ export function acceptsDrop({
       return false;
     }
 
-    return defaultAcceptsDrop(
-      sourceIndexPath.at(-1)!,
-      targetIndexPath.at(-1)!,
+    return defaultAcceptsDrop({
+      sourceIndex: sourceIndexPath.at(-1)!,
+      targetIndex: targetIndexPath.at(-1)!,
       position,
-      "",
-      ""
-    );
+      sourceListId: "",
+      targetListId: "",
+    });
   }
 
   return true;