@noya-app/noya-designsystem 0.1.56 → 0.1.57

package/src/components/sorting/Sortable.tsx

@@ -1,4 +1,4 @@
-import { UniqueIdentifier, useDndContext, useDroppable } from "@dnd-kit/core";
+import { UniqueIdentifier, useDroppable } from "@dnd-kit/core";
 import {
   horizontalListSortingStrategy,
   SortableContext,
@@ -11,13 +11,14 @@ import {
   ActiveDragContextType,
   DragRegistrationContext,
   RegisteredList,
-  SharedDragProviderContexts,
+  SharedDragProps,
   useActiveDrag,
   useDragRegistration,
 } from "./DragRegistration";
 import { withDragProvider } from "./SharedDragProvider";
 import {
   AcceptsFromList,
+  createDragItemKey,
   defaultAcceptsDrop,
   DropValidator,
   MoveDragItemHandler,
@@ -35,18 +36,14 @@ type ItemChildrenProps<T> = {
 
 // Context for drop indicators within a sortable list
 interface SortableItemContextProps {
-  keys: UniqueIdentifier[];
   acceptsDrop: DropValidator;
-  axis: "x" | "y";
   listId: string;
   getDropTargetParentIndex?: (index: number) => number | undefined;
   activeDragContext: React.Context<ActiveDragContextType | null>;
 }
 
 const SortableItemContext = React.createContext<SortableItemContextProps>({
-  keys: [],
   acceptsDrop: defaultAcceptsDrop,
-  axis: "y",
   listId: "",
   getDropTargetParentIndex: undefined,
   activeDragContext: ActiveDragContext,
@@ -54,95 +51,60 @@ const SortableItemContext = React.createContext<SortableItemContextProps>({
 
 // Custom hook for drop indicators in sortable lists
 function useSortableDropIndicator({
-  id,
   index,
-  isDragging,
-  overIndex,
-  activeIndex,
-  keys,
-  acceptsDrop,
-  axis,
+  itemId,
   listId,
+  acceptsDrop,
   getDropTargetParentIndex,
 }: {
-  id: UniqueIdentifier;
   index: number;
-  isDragging: boolean;
-  overIndex: number;
-  activeIndex: number;
-  keys: UniqueIdentifier[];
-  acceptsDrop: DropValidator;
-  axis: "x" | "y";
+  itemId: UniqueIdentifier;
   listId: string;
+  acceptsDrop: DropValidator;
   getDropTargetParentIndex?: (index: number) => number | undefined;
 }): RelativeDropPosition | undefined {
-  const { active, over, activatorEvent } = useDndContext();
   const { activeDragContext } = React.useContext(SortableItemContext);
-  const { activeItem, delta: position } = useActiveDrag(activeDragContext);
-
-  if (
-    index < 0 ||
-    isDragging ||
-    !active ||
-    !over ||
-    !activeItem ||
-    !(
-      // Same-list drop: check normal overIndex matching
-      (
-        (activeItem.listId === listId && index === overIndex) ||
-        // Cross-list drop: check if we're hovering over this specific item
-        (activeItem.listId !== listId && over.id === id)
-      )
-    )
-  ) {
-    return undefined;
-  }
-
-  const isCrossContainer = activeItem.listId !== listId;
-
-  // For cross-list drops, use combined keys like MultiSortable does
-  const validationKeys = isCrossContainer ? [active.id, ...keys] : keys;
-
-  const eventX = (activatorEvent as PointerEvent | null)?.clientX ?? 0;
-  const eventY = (activatorEvent as PointerEvent | null)?.clientY ?? 0;
-  const offsetLeft = eventX + position.x;
-  const offsetTop = eventY + position.y;
-
-  const parentIndex =
-    overIndex === -1 ? undefined : getDropTargetParentIndex?.(overIndex);
+  const activeDrag = useActiveDrag(activeDragContext);
+  const { source, target } = activeDrag;
+
+  if (!source || !target) return;
+
+  const indicator =
+    target.listId === listId && target.itemId === itemId
+      ? activeDrag.indicator
+      : undefined;
+
+  const targetParentIndex =
+    target.index === -1 ? undefined : getDropTargetParentIndex?.(target.index);
 
   const isValidParent =
-    parentIndex === undefined || parentIndex === -1
+    targetParentIndex === undefined || targetParentIndex === -1
       ? false
-      : acceptsDrop(activeIndex, parentIndex, "inside", listId, listId);
+      : acceptsDrop(
+          source.index,
+          targetParentIndex,
+          "inside",
+          source.listId,
+          target.listId
+        );
 
   const overIdAcceptsDrop =
-    overIndex === -1
+    target.index === -1
       ? undefined
-      : acceptsDrop(activeIndex, overIndex, "inside", listId, listId);
+      : acceptsDrop(
+          source.index,
+          target.index,
+          "inside",
+          source.listId,
+          target.listId
+        );
 
-  const relativeDropPosition =
-    index >= 0 && index === overIndex && !isDragging && active && over
-      ? validateDropIndicator({
-          acceptsDrop,
-          keys: validationKeys,
-          activeId: active.id,
-          overId: over.id,
-          offsetStart: axis === "x" ? offsetLeft : offsetTop,
-          elementStart: axis === "x" ? over.rect.left : over.rect.top,
-          elementSize: axis === "x" ? over.rect.width : over.rect.height,
-          sourceListId: listId,
-          targetListId: listId,
-        })
-      : undefined;
+  const thisItemIsTargetParent = targetParentIndex === index;
 
   const showDragInsideIndicatorOnParent =
-    !overIdAcceptsDrop && isValidParent && parentIndex === index;
+    !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
 
-  return (
-    relativeDropPosition ??
-    (showDragInsideIndicatorOnParent ? "inside" : undefined)
-  );
+  return indicator ?? (showDragInsideIndicatorOnParent ? "inside" : undefined);
 }
 
 interface RootProps {
@@ -155,7 +117,7 @@ interface RootProps {
   acceptsFromList?: AcceptsFromList;
   acceptsDrop?: DropValidator;
   getDropTargetParentIndex?: (index: number) => number | undefined;
-  sharedDragProviderContexts?: SharedDragProviderContexts;
+  sharedDragProps?: SharedDragProps;
   containerRef?: React.RefObject<HTMLElement>;
 }
 
@@ -168,11 +130,15 @@ function SortableItem<TElement extends HTMLElement>({
   disabled?: boolean;
   children: (props: ItemChildrenProps<TElement>) => React.ReactNode;
 }) {
-  const { keys, acceptsDrop, axis, listId, getDropTargetParentIndex } =
+  const { acceptsDrop, listId, getDropTargetParentIndex } =
     React.useContext(SortableItemContext);
 
-  const { attributes, listeners, setNodeRef, isDragging, index, overIndex } =
-    useSortable({ id, disabled });
+  const dragItemKey = createDragItemKey(listId, id);
+
+  const { attributes, listeners, setNodeRef, isDragging, index } = useSortable({
+    id: dragItemKey,
+    disabled,
+  });
 
   const ref = React.useCallback(
     (node: TElement | null) => setNodeRef(node),
@@ -180,15 +146,10 @@ function SortableItem<TElement extends HTMLElement>({
   );
 
   const relativeDropPosition = useSortableDropIndicator({
-    id,
     index,
-    isDragging,
-    overIndex,
-    keys,
-    acceptsDrop,
-    axis,
+    itemId: dragItemKey,
     listId,
-    activeIndex: index,
+    acceptsDrop,
     getDropTargetParentIndex,
   });
 
@@ -205,7 +166,7 @@ function SortableItem<TElement extends HTMLElement>({
 
 function SortableRoot_({
   id: idProp,
-  keys,
+  keys: keysProp,
   onMoveItem,
   renderOverlay,
   acceptsFromList,
@@ -213,15 +174,17 @@ function SortableRoot_({
   axis = "y",
   children,
   getDropTargetParentIndex,
-  sharedDragProviderContexts,
+  sharedDragProps,
   containerRef,
 }: RootProps) {
   const defaultId = React.useId();
   const id = idProp ?? defaultId;
+  const keys = React.useMemo(() => {
+    return keysProp.map((key) => createDragItemKey(id, key));
+  }, [keysProp, id]);
 
   const { registerList, unregisterList } = useDragRegistration(
-    sharedDragProviderContexts?.dragRegistrationContext ??
-      DragRegistrationContext
+    sharedDragProps?.dragRegistrationContext ?? DragRegistrationContext
   );
 
   const { setNodeRef: setDroppableRef } = useDroppable({
@@ -244,9 +207,7 @@ function SortableRoot_({
         const index = keys.findIndex((key) => key === id);
         return renderOverlay?.(index) ?? null;
       },
-      acceptsFromList:
-        acceptsFromList ??
-        (({ sourceListId, targetListId }) => sourceListId === targetListId),
+      acceptsFromList: acceptsFromList ?? (() => true),
       acceptsDrop,
       getDropIndicator: (parameters) => {
         const { absolutePosition, active, over, sourceListId, targetListId } =
@@ -294,20 +255,12 @@ function SortableRoot_({
     () => ({
       keys,
       acceptsDrop,
-      axis,
       listId: id,
       getDropTargetParentIndex,
       activeDragContext:
-        sharedDragProviderContexts?.activeDragContext ?? ActiveDragContext,
+        sharedDragProps?.activeDragContext ?? ActiveDragContext,
     }),
-    [
-      keys,
-      acceptsDrop,
-      axis,
-      id,
-      getDropTargetParentIndex,
-      sharedDragProviderContexts,
-    ]
+    [keys, acceptsDrop, id, getDropTargetParentIndex, sharedDragProps]
   );
 
   // Set the droppable ref after every render.

package/src/components/sorting/createSharedDrag.tsx

@@ -2,17 +2,17 @@ import * as React from "react";
 import {
   ActiveDragContextType,
   DragRegistrationContextType,
-  SharedDragProviderContexts,
+  SharedDragProps,
 } from "./DragRegistration";
 import { SharedDragProvider } from "./SharedDragProvider";
 import { Sortable, SortableProps } from "./Sortable";
 
 export function createSharedDrag(): {
   Provider: typeof SharedDragProvider;
-  props: SharedDragProviderContexts;
   Sortable: <TItem, TElement extends HTMLElement>(
     props: SortableProps<TItem, TElement>
   ) => React.ReactNode;
+  props: SharedDragProps;
 } {
   const dragRegistrationContext =
     React.createContext<DragRegistrationContextType | null>(null);
@@ -20,27 +20,22 @@ export function createSharedDrag(): {
     null
   );
 
+  const sharedDragProps: SharedDragProps = {
+    dragRegistrationContext,
+    activeDragContext,
+  };
+
   const Provider = ({ children }: { children: React.ReactNode }) => (
-    <SharedDragProvider
-      contexts={{
-        dragRegistrationContext,
-        activeDragContext,
-      }}
-    >
+    <SharedDragProvider sharedDragProps={sharedDragProps}>
       {children}
     </SharedDragProvider>
   );
 
-  const dragProps = {
-    dragRegistrationContext,
-    activeDragContext,
-  };
-
   return {
     Provider,
     Sortable: <TItem, TElement extends HTMLElement>(
       props: SortableProps<TItem, TElement>
-    ) => <Sortable sharedDragProviderContexts={dragProps} {...props} />,
-    props: dragProps,
+    ) => <Sortable sharedDragProps={sharedDragProps} {...props} />,
+    props: sharedDragProps,
   };
 }

package/src/components/sorting/sorting.ts

@@ -36,16 +36,16 @@ export type AcceptsFromList = ({
 }) => boolean;
 
 export interface DragItem {
-  id: UniqueIdentifier;
+  itemId: UniqueIdentifier;
   listId: string;
   index: number;
 }
 
-export interface DropTarget {
-  id: UniqueIdentifier;
-  listId: string;
-  index: number;
-}
+export type DragState = {
+  source: DragItem | null;
+  target: DragItem | null;
+  indicator: RelativeDropPosition | null;
+};
 
 export const normalizeListTargetIndex = (
   index: number,
@@ -142,6 +142,19 @@ 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,
@@ -170,6 +183,16 @@ function isContainedInMiddleThird(
   );
 }
 
+function isContained(
+  elementStart: number,
+  elementSize: number,
+  offsetStart: number
+): boolean {
+  return (
+    offsetStart >= elementStart && offsetStart <= elementStart + elementSize
+  );
+}
+
 function getContainingHalf(
   elementStart: number,
   elementSize: number,
@@ -178,3 +201,15 @@ function getContainingHalf(
   if (offsetStart < elementStart + elementSize / 2) return "above";
   return "below";
 }
+
+export function createDragItemKey(listId: string, itemId: UniqueIdentifier) {
+  return `${listId}-~-${itemId}`;
+}
+
+export function parseDragItemKey(key: string): {
+  listId: string;
+  itemId: UniqueIdentifier;
+} {
+  const [listId, itemId] = key.split("-~-");
+  return { listId, itemId };
+}