@noya-app/noya-designsystem 0.1.56 → 0.1.58

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,59 @@ 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;
+  const activeDrag = useActiveDrag(activeDragContext);
+  const { source, target } = activeDrag;
 
-  // For cross-list drops, use combined keys like MultiSortable does
-  const validationKeys = isCrossContainer ? [active.id, ...keys] : keys;
+  if (!source || !target) return;
 
-  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;
+  if (target.listId === listId && target.itemId === itemId) {
+    return activeDrag.indicator ?? undefined;
+  }
 
-  const parentIndex =
-    overIndex === -1 ? undefined : getDropTargetParentIndex?.(overIndex);
+  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({
+          sourceIndex: source.index,
+          targetIndex: targetParentIndex,
+          position: "inside",
+          sourceListId: source.listId,
+          targetListId: target.listId,
+        });
 
   const overIdAcceptsDrop =
-    overIndex === -1
+    target.index === -1
       ? undefined
-      : acceptsDrop(activeIndex, overIndex, "inside", listId, listId);
+      : acceptsDrop({
+          sourceIndex: source.index,
+          targetIndex: target.index,
+          position: "inside",
+          sourceListId: source.listId,
+          targetListId: 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;
+  const showIndicatorOnParent =
+    !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
 
-  return (
-    relativeDropPosition ??
-    (showDragInsideIndicatorOnParent ? "inside" : undefined)
-  );
+  return showIndicatorOnParent ? "inside" : undefined;
 }
 
 interface RootProps {
@@ -155,7 +116,7 @@ interface RootProps {
   acceptsFromList?: AcceptsFromList;
   acceptsDrop?: DropValidator;
   getDropTargetParentIndex?: (index: number) => number | undefined;
-  sharedDragProviderContexts?: SharedDragProviderContexts;
+  sharedDragProps?: SharedDragProps;
   containerRef?: React.RefObject<HTMLElement>;
 }
 
@@ -168,11 +129,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 +145,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 +165,7 @@ function SortableItem<TElement extends HTMLElement>({
 
 function SortableRoot_({
   id: idProp,
-  keys,
+  keys: keysProp,
   onMoveItem,
   renderOverlay,
   acceptsFromList,
@@ -213,25 +173,21 @@ 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({
     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
@@ -244,9 +200,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 +248,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

@@ -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,
@@ -36,16 +26,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,
@@ -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 (
@@ -143,13 +133,13 @@ export function validateDropIndicator({
   );
 
   // 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
@@ -178,3 +168,17 @@ function getContainingHalf(
   if (offsetStart < elementStart + elementSize / 2) return "above";
   return "below";
 }
+
+export const dragItemKeySeparator = "-~-";
+
+export function createDragItemKey(listId: string, itemId: UniqueIdentifier) {
+  return `${listId}${dragItemKeySeparator}${itemId}`;
+}
+
+export function parseDragItemKey(key: string): {
+  listId: string;
+  itemId: UniqueIdentifier;
+} {
+  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;