@noya-app/noya-designsystem 0.1.56 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Collection.tsx

@@ -8,6 +8,7 @@ import {
   ListViewRowProps,
 } from "../components/ListView";
 import { List } from "./List";
+import { SharedDragProps } from "./sorting/DragRegistration";
 
 export type CollectionViewType = "grid" | "list";
 
@@ -93,6 +94,8 @@ export interface CollectionProps<T, M extends string = string> {
   /** @default false */
   sortable?: boolean;
   dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
+  sharedDragProps?: SharedDragProps;
+  sortableId?: string;
 }
 
 export const Collection = forwardRefGeneric(function Collection<

package/src/components/List.tsx

@@ -64,6 +64,8 @@ export const List = memoGeneric(
       getPlaceholder,
       onClickItem,
       dragIndicatorStyle,
+      sortableId,
+      sharedDragProps,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -133,6 +135,8 @@ export const List = memoGeneric(
         onMoveItem={onMoveItem}
         renderEmptyState={renderEmptyState}
         getDropTargetParentIndex={getDropTargetParentIndex}
+        sharedDragProps={sharedDragProps}
+        sortableId={sortableId}
         {...dropTargetProps}
         renderItem={(
           item: T,

package/src/components/ListView.tsx

@@ -31,6 +31,7 @@ import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
+import { SharedDragProps } from "./sorting/DragRegistration";
 import { Sortable } from "./sorting/Sortable";
 import {
   DropValidator,
@@ -793,6 +794,8 @@ export type ListViewRootProps = {
   onDrop?: React.DragEventHandler<HTMLDivElement>;
   renderEmptyState?: () => ReactNode;
   getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
+  sharedDragProps?: SharedDragProps;
+  sortableId?: string;
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -828,6 +831,8 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     onDrop,
     renderEmptyState,
     getDropTargetParentIndex,
+    sharedDragProps,
+    sortableId,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -1000,11 +1005,13 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   const withSortable = (children: ReactNode) =>
     sortable ? (
       <Sortable.Root
+        id={sortableId}
         onMoveItem={onMoveItem}
         keys={ids}
         renderOverlay={renderOverlay}
         acceptsDrop={acceptsDrop}
         getDropTargetParentIndex={getDropTargetParentIndex}
+        sharedDragProps={sharedDragProps}
       >
         {children}
       </Sortable.Root>

package/src/components/sorting/DragRegistration.tsx

@@ -1,5 +1,6 @@
 import {
   AcceptsDrop,
+  DragState,
   MoveDragItemHandler,
   RelativeDropPosition,
 } from "./sorting";
@@ -9,7 +10,6 @@ import { AcceptsFromList } from "./sorting";
 
 import { Point } from "@noya-app/noya-geometry";
 import React from "react";
-import { DragItem } from "./sorting";
 
 export type GetDropIndicatorParameters = {
   absolutePosition: Point;
@@ -73,10 +73,7 @@ export function useDragRegistrationManager() {
   return { registerList, unregisterList, registeredLists };
 }
 
-export type ActiveDragContextType = {
-  activeItem: DragItem | null;
-  delta: Point;
-};
+export type ActiveDragContextType = DragState;
 
 export const ActiveDragContext =
   React.createContext<ActiveDragContextType | null>(null);
@@ -104,7 +101,7 @@ export function useAnyDragContext() {
   return React.useContext(AnyDragContext);
 }
 
-export type SharedDragProviderContexts = {
+export type SharedDragProps = {
   dragRegistrationContext: React.Context<DragRegistrationContextType | null>;
   activeDragContext: React.Context<ActiveDragContextType | null>;
 };

package/src/components/sorting/SharedDragProvider.tsx

@@ -1,4 +1,5 @@
 import {
+  Active,
   closestCenter,
   CollisionDetection,
   DndContext,
@@ -6,11 +7,13 @@ import {
   DragMoveEvent,
   DragOverlay,
   DragStartEvent,
+  Over,
   PointerSensor,
   pointerWithin,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
+import { Point } from "@noya-app/noya-geometry";
 import * as React from "react";
 import { useMemo } from "react";
 import { createPortal } from "react-dom";
@@ -20,19 +23,20 @@ import {
   AnyDragContext,
   DragRegistrationContext,
   DragRegistrationContextType,
-  SharedDragProviderContexts,
+  RegisteredList,
+  SharedDragProps,
   useDragRegistrationManager,
 } from "./DragRegistration";
-import { DragItem } from "./sorting";
+import { DragItem, DragState, RelativeDropPosition } from "./sorting";
 
 type SharedDragProviderProps = {
   children: React.ReactNode;
-  contexts?: SharedDragProviderContexts;
+  sharedDragProps?: SharedDragProps;
 };
 
 export function SharedDragProvider({
   children,
-  contexts = {
+  sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext,
   },
@@ -46,28 +50,17 @@ export function SharedDragProvider({
   );
 
   const mounted = useMounted();
-  const [activeItem, setActiveItem] = React.useState<DragItem | null>(null);
-  const [delta, setDelta] = React.useState({ x: 0, y: 0 });
+  const [dragState, setDragState] = React.useState<DragState>({
+    source: null,
+    target: null,
+    indicator: null,
+  });
+
   const { registerList, unregisterList, registeredLists } =
     useDragRegistrationManager();
 
   const activatorEventRef = React.useRef<PointerEvent | null>(null);
 
-  const acceptsListDrop = React.useCallback(
-    (sourceListId: string, targetListId: string) => {
-      const sourceList = registeredLists.get(sourceListId);
-      const targetList = registeredLists.get(targetListId);
-
-      if (!sourceList || !targetList) return false;
-
-      return targetList.acceptsFromList({
-        sourceListId,
-        targetListId,
-      });
-    },
-    [registeredLists]
-  );
-
   const handleDragStart = React.useCallback(
     (event: DragStartEvent) => {
       // Capture the activator event for position calculations
@@ -79,12 +72,16 @@ export function SharedDragProvider({
 
         if (itemIndex >= 0) {
           const dragItem: DragItem = {
-            id: event.active.id,
+            itemId: event.active.id,
             listId,
             index: itemIndex,
           };
 
-          setActiveItem(dragItem);
+          setDragState({
+            source: dragItem,
+            target: null,
+            indicator: null,
+          });
           break;
         }
       }
@@ -92,129 +89,90 @@ export function SharedDragProvider({
     [registeredLists]
   );
 
-  const handleDragMove = React.useCallback((event: DragMoveEvent) => {
-    setDelta({ x: event.delta.x, y: event.delta.y });
-  }, []);
-
-  const handleDragEnd = React.useCallback(
-    (event: DragEndEvent) => {
+  const handleDragMove = React.useCallback(
+    (event: DragMoveEvent) => {
       const { active, over } = event;
-      const activatorEventPoint = activatorEventRef.current
-        ? {
-            x: activatorEventRef.current.clientX,
-            y: activatorEventRef.current.clientY,
-          }
-        : null;
 
-      setActiveItem(null);
-      activatorEventRef.current = null;
-
-      if (!activeItem || !over || active.id === over.id) {
-        return;
-      }
+      if (!activatorEventRef.current || !dragState.source) return;
+
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY,
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists,
+      });
 
-      // Find target list and item
-      let targetListId: string | null = null;
-      let targetIndex: number = -1;
+      setDragState({
+        source: dragState.source,
+        target: dropTarget?.target ?? null,
+        indicator: dropTarget?.indicator ?? null,
+      });
+    },
+    [registeredLists, dragState.source]
+  );
 
-      for (const [listId, list] of registeredLists) {
-        const itemIndex = list.keys.findIndex((key) => key === over.id);
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
 
-        if (itemIndex >= 0) {
-          targetListId = listId;
-          targetIndex = itemIndex;
-          break;
-        }
+      if (!activatorEventRef.current || !dragState.source) return;
+
+      const dropTarget = findDropTarget({
+        activationPoint: {
+          x: activatorEventRef.current.clientX,
+          y: activatorEventRef.current.clientY,
+        },
+        delta: { x: event.delta.x, y: event.delta.y },
+        over,
+        active,
+        source: dragState.source,
+        registeredLists,
+      });
 
-        // Also check if dropping on the list container itself
-        if (over.id === listId) {
-          targetListId = listId;
-          targetIndex = list.keys.length; // Append to end
-          break;
-        }
-      }
+      setDragState({
+        source: null,
+        target: null,
+        indicator: null,
+      });
+      activatorEventRef.current = null;
 
-      if (!targetListId || !acceptsListDrop(activeItem.listId, targetListId)) {
-        setActiveItem(null);
-        activatorEventRef.current = null;
-        return;
-      }
+      if (!dropTarget) return;
 
-      const targetList = registeredLists.get(targetListId);
-      const sourceList = registeredLists.get(activeItem.listId);
+      const sourceList = registeredLists.get(dropTarget.source.listId);
+      const targetList = registeredLists.get(dropTarget.target.listId);
 
-      if (!targetList || !sourceList) {
-        return;
-      }
+      if (!sourceList || !targetList) return;
 
-      // Handle drops into items within the list
-      if (targetIndex < targetList.keys.length && activatorEventPoint) {
-        // Calculate absolute cursor position
-        const eventX = activatorEventPoint.x;
-        const eventY = activatorEventPoint.y;
-        const currentX = eventX + delta.x;
-        const currentY = eventY + delta.y;
-        const absolutePosition = { x: currentX, y: currentY };
-
-        const indicator = targetList.getDropIndicator({
-          absolutePosition,
-          active,
-          over,
-          sourceListId: activeItem.listId,
-          targetListId,
-        });
-
-        if (!indicator) return;
-
-        // Notify the source list to handle the move
-        sourceList.onMoveItem(
-          activeItem.index,
-          targetIndex,
-          indicator,
-          activeItem.listId,
-          targetListId
-        );
-      }
-      // Handle drops into empty lists or at the end of lists
-      else if (targetIndex >= targetList.keys.length) {
-        // For empty lists or drops at the end, we don't need detailed position validation
-        // Just check if the drop is acceptable with a "below" position
-        const canDrop = targetList.acceptsDrop(
-          activeItem.index,
-          Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
-          "below",
-          activeItem.listId,
-          targetListId
-        );
-
-        if (canDrop) {
-          sourceList.onMoveItem(
-            activeItem.index,
-            targetIndex,
-            "below",
-            activeItem.listId,
-            targetListId
-          );
-        }
-      }
+      sourceList.onMoveItem(
+        dropTarget.source.index,
+        dropTarget.target.index,
+        dropTarget.indicator,
+        dropTarget.source.listId,
+        dropTarget.target.listId
+      );
     },
-    [activeItem, registeredLists, acceptsListDrop, delta]
+    [registeredLists, dragState.source]
   );
 
   const contextValue: DragRegistrationContextType = React.useMemo(
     () => ({
-      activeItem,
-      delta,
       registerList,
       unregisterList,
     }),
-    [activeItem, delta, registerList, unregisterList]
+    [registerList, unregisterList]
   );
 
-  const activeList = activeItem ? registeredLists.get(activeItem.listId) : null;
+  const activeList = dragState.source
+    ? registeredLists.get(dragState.source.listId)
+    : null;
   const activeDragContextValue: ActiveDragContextType = React.useMemo(
-    () => ({ activeItem, delta }),
-    [activeItem, delta]
+    () => dragState,
+    [dragState]
   );
 
   const collisionDetection = useMemo(() => {
@@ -223,8 +181,10 @@ export function SharedDragProvider({
 
   return (
     <AnyDragContext.Provider value={true}>
-      <contexts.dragRegistrationContext.Provider value={contextValue}>
-        <contexts.activeDragContext.Provider value={activeDragContextValue}>
+      <sharedDragProps.dragRegistrationContext.Provider value={contextValue}>
+        <sharedDragProps.activeDragContext.Provider
+          value={activeDragContextValue}
+        >
           <DndContext
             sensors={sensors}
             collisionDetection={collisionDetection}
@@ -235,16 +195,16 @@ export function SharedDragProvider({
             {children}
             {mounted &&
               activeList?.renderOverlay &&
-              activeItem &&
+              dragState.source &&
               createPortal(
                 <DragOverlay dropAnimation={null}>
-                  {activeList.renderOverlay(activeItem.id)}
+                  {activeList.renderOverlay(dragState.source.itemId)}
                 </DragOverlay>,
                 document.body
               )}
           </DndContext>
-        </contexts.activeDragContext.Provider>
-      </contexts.dragRegistrationContext.Provider>
+        </sharedDragProps.activeDragContext.Provider>
+      </sharedDragProps.dragRegistrationContext.Provider>
     </AnyDragContext.Provider>
   );
 }
@@ -305,3 +265,112 @@ export const getItemFirstCollisionDetection =
       ? pointerCollisions
       : closestCenter(parameters);
   };
+
+function findDropTarget({
+  activationPoint,
+  delta,
+  over,
+  active,
+  source,
+  registeredLists,
+}: {
+  activationPoint: Point;
+  delta: Point;
+  over: Over | null;
+  active: Active;
+  source: DragItem;
+  registeredLists: Map<string, RegisteredList>;
+}):
+  | {
+      source: DragItem;
+      target: DragItem;
+      indicator: RelativeDropPosition;
+    }
+  | undefined {
+  if (!over || active.id === over.id) return;
+
+  // Find target list and item
+  let targetListId: string | null = null;
+  let targetIndex: number = -1;
+
+  for (const [listId, list] of registeredLists) {
+    const itemIndex = list.keys.findIndex((key) => key === over.id);
+
+    if (itemIndex >= 0) {
+      targetListId = listId;
+      targetIndex = itemIndex;
+      break;
+    }
+
+    // Also check if dropping on the list container itself
+    if (over.id === listId) {
+      targetListId = listId;
+      targetIndex = list.keys.length; // Append to end
+      break;
+    }
+  }
+
+  const targetList =
+    targetListId !== null ? registeredLists.get(targetListId) : null;
+  const sourceList = registeredLists.get(source.listId);
+
+  if (
+    !targetList ||
+    !sourceList ||
+    !targetList.acceptsFromList({
+      sourceListId: sourceList.id,
+      targetListId: targetList.id,
+    })
+  ) {
+    return;
+  }
+
+  // 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
+    );
+
+    if (canDrop) {
+      return {
+        source,
+        target: {
+          itemId: over.id,
+          listId: targetList.id,
+          index: targetIndex,
+        },
+        indicator: "below",
+      };
+    }
+  }
+
+  const eventX = activationPoint.x;
+  const eventY = activationPoint.y;
+  const currentX = eventX + delta.x;
+  const currentY = eventY + delta.y;
+  const absolutePosition = { x: currentX, y: currentY };
+
+  const indicator = targetList.getDropIndicator({
+    absolutePosition,
+    active,
+    over,
+    sourceListId: sourceList.id,
+    targetListId: targetList.id,
+  });
+
+  if (indicator) {
+    return {
+      source,
+      target: {
+        itemId: over.id,
+        listId: targetList.id,
+        index: targetIndex,
+      },
+      indicator,
+    };
+  }
+}