@noya-app/noya-designsystem 0.1.56 → 0.1.57

package/dist/index.js

@@ -156,6 +156,7 @@ __export(src_exports, {
   colorForStringValues: () => colorForStringValues,
   colorFromString: () => colorFromString,
   colorSwatchSizeMap: () => colorSwatchSizeMap,
+  createDragItemKey: () => createDragItemKey,
   createSectionedMenu: () => createSectionedMenu,
   createSharedDrag: () => createSharedDrag,
   cssVarNames: () => cssVarNames,
@@ -186,6 +187,7 @@ __export(src_exports, {
   mergeConflictingClassNames: () => mergeConflictingClassNames,
   moveTreeItem: () => moveTreeItem,
   normalizeListTargetIndex: () => normalizeListTargetIndex,
+  parseDragItemKey: () => parseDragItemKey,
   popoverStyle: () => popoverStyle,
   portalScopeDataSetName: () => portalScopeDataSetName,
   portalScopePropName: () => portalScopePropName,
@@ -4647,7 +4649,7 @@ var import_react51 = require("react");
 var import_react_dom2 = require("react-dom");
 function SharedDragProvider({
   children,
-  contexts = {
+  sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext
   }
@@ -4660,22 +4662,13 @@ function SharedDragProvider({
     })
   );
   const mounted = useMounted();
-  const [activeItem, setActiveItem] = React45.useState(null);
-  const [delta, setDelta] = React45.useState({ x: 0, y: 0 });
+  const [dragState, setDragState] = React45.useState({
+    source: null,
+    target: null,
+    indicator: null
+  });
   const { registerList, unregisterList, registeredLists } = useDragRegistrationManager();
   const activatorEventRef = React45.useRef(null);
-  const acceptsListDrop = React45.useCallback(
-    (sourceListId, targetListId) => {
-      const sourceList = registeredLists.get(sourceListId);
-      const targetList = registeredLists.get(targetListId);
-      if (!sourceList || !targetList) return false;
-      return targetList.acceptsFromList({
-        sourceListId,
-        targetListId
-      });
-    },
-    [registeredLists]
-  );
   const handleDragStart = React45.useCallback(
     (event) => {
       activatorEventRef.current = event.activatorEvent;
@@ -4683,132 +4676,115 @@ function SharedDragProvider({
         const itemIndex = list.keys.findIndex((key) => key === event.active.id);
         if (itemIndex >= 0) {
           const dragItem = {
-            id: event.active.id,
+            itemId: event.active.id,
             listId,
             index: itemIndex
           };
-          setActiveItem(dragItem);
+          setDragState({
+            source: dragItem,
+            target: null,
+            indicator: null
+          });
           break;
         }
       }
     },
     [registeredLists]
   );
-  const handleDragMove = React45.useCallback((event) => {
-    setDelta({ x: event.delta.x, y: event.delta.y });
-  }, []);
+  const handleDragMove = React45.useCallback(
+    (event) => {
+      const { active, over } = event;
+      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
+      });
+      setDragState({
+        source: dragState.source,
+        target: dropTarget?.target ?? null,
+        indicator: dropTarget?.indicator ?? null
+      });
+    },
+    [registeredLists, dragState.source]
+  );
   const handleDragEnd = React45.useCallback(
     (event) => {
       const { active, over } = event;
-      const activatorEventPoint = activatorEventRef.current ? {
-        x: activatorEventRef.current.clientX,
-        y: activatorEventRef.current.clientY
-      } : null;
-      setActiveItem(null);
+      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
+      });
+      setDragState({
+        source: null,
+        target: null,
+        indicator: null
+      });
       activatorEventRef.current = null;
-      if (!activeItem || !over || active.id === over.id) {
-        return;
-      }
-      let targetListId = null;
-      let targetIndex = -1;
-      for (const [listId, list] of registeredLists) {
-        const itemIndex = list.keys.findIndex((key) => key === over.id);
-        if (itemIndex >= 0) {
-          targetListId = listId;
-          targetIndex = itemIndex;
-          break;
-        }
-        if (over.id === listId) {
-          targetListId = listId;
-          targetIndex = list.keys.length;
-          break;
-        }
-      }
-      if (!targetListId || !acceptsListDrop(activeItem.listId, targetListId)) {
-        setActiveItem(null);
-        activatorEventRef.current = null;
-        return;
-      }
-      const targetList = registeredLists.get(targetListId);
-      const sourceList = registeredLists.get(activeItem.listId);
-      if (!targetList || !sourceList) {
-        return;
-      }
-      if (targetIndex < targetList.keys.length && activatorEventPoint) {
-        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;
-        sourceList.onMoveItem(
-          activeItem.index,
-          targetIndex,
-          indicator,
-          activeItem.listId,
-          targetListId
-        );
-      } else if (targetIndex >= targetList.keys.length) {
-        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
-          );
-        }
-      }
+      if (!dropTarget) return;
+      const sourceList = registeredLists.get(dropTarget.source.listId);
+      const targetList = registeredLists.get(dropTarget.target.listId);
+      if (!sourceList || !targetList) return;
+      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 = React45.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 = React45.useMemo(
-    () => ({ activeItem, delta }),
-    [activeItem, delta]
+    () => dragState,
+    [dragState]
   );
   const collisionDetection = (0, import_react51.useMemo)(() => {
     return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
   }, [registeredLists]);
-  return /* @__PURE__ */ React45.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React45.createElement(contexts.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React45.createElement(contexts.activeDragContext.Provider, { value: activeDragContextValue }, /* @__PURE__ */ React45.createElement(
-    import_core.DndContext,
+  return /* @__PURE__ */ React45.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React45.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React45.createElement(
+    sharedDragProps.activeDragContext.Provider,
     {
-      sensors,
-      collisionDetection,
-      onDragStart: handleDragStart,
-      onDragMove: handleDragMove,
-      onDragEnd: handleDragEnd
+      value: activeDragContextValue
     },
-    children,
-    mounted && activeList?.renderOverlay && activeItem && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ React45.createElement(import_core.DragOverlay, { dropAnimation: null }, activeList.renderOverlay(activeItem.id)),
-      document.body
+    /* @__PURE__ */ React45.createElement(
+      import_core.DndContext,
+      {
+        sensors,
+        collisionDetection,
+        onDragStart: handleDragStart,
+        onDragMove: handleDragMove,
+        onDragEnd: handleDragEnd
+      },
+      children,
+      mounted && activeList?.renderOverlay && dragState.source && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ React45.createElement(import_core.DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
+        document.body
+      )
     )
-  ))));
+  )));
 }
 function useMounted() {
   const [mounted, setMounted] = React45.useState(false);
@@ -4843,6 +4819,83 @@ var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
   }
   return pointerCollisions.length > 0 ? pointerCollisions : (0, import_core.closestCenter)(parameters);
 };
+function findDropTarget({
+  activationPoint,
+  delta,
+  over,
+  active,
+  source,
+  registeredLists
+}) {
+  if (!over || active.id === over.id) return;
+  let targetListId = null;
+  let targetIndex = -1;
+  for (const [listId, list] of registeredLists) {
+    const itemIndex = list.keys.findIndex((key) => key === over.id);
+    if (itemIndex >= 0) {
+      targetListId = listId;
+      targetIndex = itemIndex;
+      break;
+    }
+    if (over.id === listId) {
+      targetListId = listId;
+      targetIndex = list.keys.length;
+      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;
+  }
+  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
+    };
+  }
+}
 
 // src/components/sorting/sorting.ts
 var React46 = __toESM(require("react"));
@@ -4897,6 +4950,9 @@ function validateDropIndicator({
     elementSize,
     offsetStart
   );
+  if (!isContained(elementStart, elementSize, offsetStart) && sourceListId === targetListId) {
+    return void 0;
+  }
   const acceptedHalf = acceptsDrop2(
     activeIndex,
     overIndex,
@@ -4912,84 +4968,79 @@ function validateDropIndicator({
 function isContainedInMiddleThird(elementStart, elementSize, offsetStart) {
   return offsetStart >= elementStart + elementSize / 3 && offsetStart <= elementStart + elementSize * 2 / 3;
 }
+function isContained(elementStart, elementSize, offsetStart) {
+  return offsetStart >= elementStart && offsetStart <= elementStart + elementSize;
+}
 function getContainingHalf(elementStart, elementSize, offsetStart) {
   if (offsetStart < elementStart + elementSize / 2) return "above";
   return "below";
 }
+function createDragItemKey(listId, itemId) {
+  return `${listId}-~-${itemId}`;
+}
+function parseDragItemKey(key) {
+  const [listId, itemId] = key.split("-~-");
+  return { listId, itemId };
+}
 
 // src/components/sorting/Sortable.tsx
 var SortableItemContext2 = React47.createContext({
-  keys: [],
   acceptsDrop: defaultAcceptsDrop,
-  axis: "y",
   listId: "",
   getDropTargetParentIndex: void 0,
   activeDragContext: ActiveDragContext
 });
 function useSortableDropIndicator({
-  id,
   index,
-  isDragging,
-  overIndex,
-  activeIndex,
-  keys,
-  acceptsDrop: acceptsDrop2,
-  axis,
+  itemId,
   listId,
+  acceptsDrop: acceptsDrop2,
   getDropTargetParentIndex
 }) {
-  const { active, over, activatorEvent } = (0, import_core2.useDndContext)();
   const { activeDragContext } = React47.useContext(SortableItemContext2);
-  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 void 0;
-  }
-  const isCrossContainer = activeItem.listId !== listId;
-  const validationKeys = isCrossContainer ? [active.id, ...keys] : keys;
-  const eventX = activatorEvent?.clientX ?? 0;
-  const eventY = activatorEvent?.clientY ?? 0;
-  const offsetLeft = eventX + position.x;
-  const offsetTop = eventY + position.y;
-  const parentIndex = overIndex === -1 ? void 0 : getDropTargetParentIndex?.(overIndex);
-  const isValidParent = parentIndex === void 0 || parentIndex === -1 ? false : acceptsDrop2(activeIndex, parentIndex, "inside", listId, listId);
-  const overIdAcceptsDrop = overIndex === -1 ? void 0 : acceptsDrop2(activeIndex, overIndex, "inside", listId, listId);
-  const relativeDropPosition = index >= 0 && index === overIndex && !isDragging && active && over ? validateDropIndicator({
-    acceptsDrop: acceptsDrop2,
-    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
-  }) : void 0;
-  const showDragInsideIndicatorOnParent = !overIdAcceptsDrop && isValidParent && parentIndex === index;
-  return relativeDropPosition ?? (showDragInsideIndicatorOnParent ? "inside" : void 0);
+  const activeDrag = useActiveDrag(activeDragContext);
+  const { source, target } = activeDrag;
+  if (!source || !target) return;
+  const indicator = target.listId === listId && target.itemId === itemId ? activeDrag.indicator : void 0;
+  const targetParentIndex = target.index === -1 ? void 0 : getDropTargetParentIndex?.(target.index);
+  const isValidParent = targetParentIndex === void 0 || targetParentIndex === -1 ? false : acceptsDrop2(
+    source.index,
+    targetParentIndex,
+    "inside",
+    source.listId,
+    target.listId
+  );
+  const overIdAcceptsDrop = target.index === -1 ? void 0 : acceptsDrop2(
+    source.index,
+    target.index,
+    "inside",
+    source.listId,
+    target.listId
+  );
+  const thisItemIsTargetParent = targetParentIndex === index;
+  const showDragInsideIndicatorOnParent = !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
+  return indicator ?? (showDragInsideIndicatorOnParent ? "inside" : void 0);
 }
 function SortableItem({
   id,
   disabled,
   children
 }) {
-  const { keys, acceptsDrop: acceptsDrop2, axis, listId, getDropTargetParentIndex } = React47.useContext(SortableItemContext2);
-  const { attributes, listeners, setNodeRef, isDragging, index, overIndex } = (0, import_sortable.useSortable)({ id, disabled });
+  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React47.useContext(SortableItemContext2);
+  const dragItemKey = createDragItemKey(listId, id);
+  const { attributes, listeners, setNodeRef, isDragging, index } = (0, import_sortable.useSortable)({
+    id: dragItemKey,
+    disabled
+  });
   const ref = React47.useCallback(
     (node) => setNodeRef(node),
     [setNodeRef]
   );
   const relativeDropPosition = useSortableDropIndicator({
-    id,
     index,
-    isDragging,
-    overIndex,
-    keys,
-    acceptsDrop: acceptsDrop2,
-    axis,
+    itemId: dragItemKey,
     listId,
-    activeIndex: index,
+    acceptsDrop: acceptsDrop2,
     getDropTargetParentIndex
   });
   return children({
@@ -5004,7 +5055,7 @@ function SortableItem({
 }
 function SortableRoot_({
   id: idProp,
-  keys,
+  keys: keysProp,
   onMoveItem,
   renderOverlay,
   acceptsFromList,
@@ -5012,13 +5063,16 @@ function SortableRoot_({
   axis = "y",
   children,
   getDropTargetParentIndex,
-  sharedDragProviderContexts,
+  sharedDragProps,
   containerRef
 }) {
   const defaultId = React47.useId();
   const id = idProp ?? defaultId;
+  const keys = React47.useMemo(() => {
+    return keysProp.map((key) => createDragItemKey(id, key));
+  }, [keysProp, id]);
   const { registerList, unregisterList } = useDragRegistration(
-    sharedDragProviderContexts?.dragRegistrationContext ?? DragRegistrationContext
+    sharedDragProps?.dragRegistrationContext ?? DragRegistrationContext
   );
   const { setNodeRef: setDroppableRef } = (0, import_core2.useDroppable)({
     id,
@@ -5039,7 +5093,7 @@ function SortableRoot_({
         const index = keys.findIndex((key) => key === id2);
         return renderOverlay?.(index) ?? null;
       },
-      acceptsFromList: acceptsFromList ?? (({ sourceListId, targetListId }) => sourceListId === targetListId),
+      acceptsFromList: acceptsFromList ?? (() => true),
       acceptsDrop: acceptsDrop2,
       getDropIndicator: (parameters) => {
         const { absolutePosition, active, over, sourceListId, targetListId } = parameters;
@@ -5079,19 +5133,11 @@ function SortableRoot_({
     () => ({
       keys,
       acceptsDrop: acceptsDrop2,
-      axis,
       listId: id,
       getDropTargetParentIndex,
-      activeDragContext: sharedDragProviderContexts?.activeDragContext ?? ActiveDragContext
+      activeDragContext: sharedDragProps?.activeDragContext ?? ActiveDragContext
     }),
-    [
-      keys,
-      acceptsDrop2,
-      axis,
-      id,
-      getDropTargetParentIndex,
-      sharedDragProviderContexts
-    ]
+    [keys, acceptsDrop2, id, getDropTargetParentIndex, sharedDragProps]
   );
   React47.useEffect(() => {
     if (containerRef) {
@@ -5615,7 +5661,9 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   onDragLeave,
   onDrop,
   renderEmptyState,
-  getDropTargetParentIndex
+  getDropTargetParentIndex,
+  sharedDragProps,
+  sortableId
 }, forwardedRef) {
   const handleClick = (0, import_react52.useCallback)(
     (event) => {
@@ -5739,11 +5787,13 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   const withSortable = (children) => sortable ? /* @__PURE__ */ import_react52.default.createElement(
     Sortable.Root,
     {
+      id: sortableId,
       onMoveItem,
       keys: ids,
       renderOverlay,
       acceptsDrop: acceptsDrop2,
-      getDropTargetParentIndex
+      getDropTargetParentIndex,
+      sharedDragProps
     },
     children
   ) : children;
@@ -5936,7 +5986,9 @@ var List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
-      dragIndicatorStyle
+      dragIndicatorStyle,
+      sortableId,
+      sharedDragProps
     } = props;
     const [internalHoveredId, setHoveredId] = (0, import_react54.useState)();
     const [internalRenamingId, setRenamingId] = (0, import_react54.useState)();
@@ -5997,6 +6049,8 @@ var List = memoGeneric(
         onMoveItem,
         renderEmptyState,
         getDropTargetParentIndex,
+        sharedDragProps,
+        sortableId,
         ...dropTargetProps,
         renderItem: (item, _, { isDragOverlay }) => {
           const id = getId(item);
@@ -11853,24 +11907,15 @@ function createSharedDrag() {
   const activeDragContext = React82.createContext(
     null
   );
-  const Provider3 = ({ children }) => /* @__PURE__ */ React82.createElement(
-    SharedDragProvider,
-    {
-      contexts: {
-        dragRegistrationContext,
-        activeDragContext
-      }
-    },
-    children
-  );
-  const dragProps = {
+  const sharedDragProps = {
     dragRegistrationContext,
     activeDragContext
   };
+  const Provider3 = ({ children }) => /* @__PURE__ */ React82.createElement(SharedDragProvider, { sharedDragProps }, children);
   return {
     Provider: Provider3,
-    Sortable: (props) => /* @__PURE__ */ React82.createElement(Sortable, { sharedDragProviderContexts: dragProps, ...props }),
-    props: dragProps
+    Sortable: (props) => /* @__PURE__ */ React82.createElement(Sortable, { sharedDragProps, ...props }),
+    props: sharedDragProps
   };
 }
 
@@ -13140,6 +13185,7 @@ function Toolbar({
   colorForStringValues,
   colorFromString,
   colorSwatchSizeMap,
+  createDragItemKey,
   createSectionedMenu,
   createSharedDrag,
   cssVarNames,
@@ -13170,6 +13216,7 @@ function Toolbar({
   mergeConflictingClassNames,
   moveTreeItem,
   normalizeListTargetIndex,
+  parseDragItemKey,
   popoverStyle,
   portalScopeDataSetName,
   portalScopePropName,