dnd-block-tree 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useDroppable, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DragOverlay as DragOverlay$1, DndContext, useDraggable } from '@dnd-kit/core';
+import { useDroppable, useDraggable, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DragOverlay as DragOverlay$1, DndContext } from '@dnd-kit/core';
 import { memo, useCallback, useEffect, Fragment, useMemo, useRef, useReducer, useState, createContext, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 
@@ -13,6 +13,12 @@ function extractBlockId(zoneId) {
 }
 
 // src/core/collision.ts
+function collisionValue(d) {
+  return d.data.value;
+}
+function collisionLeft(d) {
+  return d.data.left;
+}
 function computeCollisionScores(droppableContainers, collisionRect, snapshotRects) {
   const pointerX = collisionRect.left + collisionRect.width / 2;
   const pointerY = collisionRect.top + collisionRect.height / 2;
@@ -41,11 +47,7 @@ function computeCollisionScores(droppableContainers, collisionRect, snapshotRect
       }
     };
   }).filter((c) => c !== null);
-  candidates.sort((a, b) => {
-    const aValue = a.data.value;
-    const bValue = b.data.value;
-    return aValue - bValue;
-  });
+  candidates.sort((a, b) => collisionValue(a) - collisionValue(b));
   return candidates;
 }
 var weightedVerticalCollision = ({
@@ -66,13 +68,13 @@ function createStickyCollision(threshold = 15, snapshotRef) {
     const candidates = computeCollisionScores(droppableContainers, collisionRect, snapshotRef?.current);
     if (candidates.length === 0) return [];
     const bestCandidate = candidates[0];
-    const bestScore = bestCandidate.data.value;
+    const bestScore = collisionValue(bestCandidate);
     if (currentZoneId !== null) {
       const currentCandidate = candidates.find((c) => c.id === currentZoneId);
       if (currentCandidate) {
-        const currentScore = currentCandidate.data.value;
-        const currentLeft = currentCandidate.data.left;
-        const bestLeft = bestCandidate.data.left;
+        const currentScore = collisionValue(currentCandidate);
+        const currentLeft = collisionLeft(currentCandidate);
+        const bestLeft = collisionLeft(bestCandidate);
         const crossDepth = Math.abs(currentLeft - bestLeft) > 20;
         const effectiveThreshold = crossDepth ? threshold * 0.25 : threshold;
         if (currentScore - bestScore < effectiveThreshold) {
@@ -111,11 +113,7 @@ var closestCenterCollision = ({
       }
     };
   }).filter((c) => c !== null);
-  candidates.sort((a, b) => {
-    const aValue = a.data.value;
-    const bValue = b.data.value;
-    return aValue - bValue;
-  });
+  candidates.sort((a, b) => collisionValue(a) - collisionValue(b));
   return candidates.slice(0, 1);
 };
 var DEFAULT_ACTIVATION_DISTANCE = 8;
@@ -246,7 +244,12 @@ function DraggableBlock({
   disabled,
   focusedId,
   isSelected,
-  onBlockClick
+  onBlockClick,
+  isContainer,
+  isExpanded,
+  depth,
+  posInSet,
+  setSize
 }) {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: block.id,
@@ -265,11 +268,16 @@ function DraggableBlock({
       "data-selected": isSelected || void 0,
       style: { touchAction: "none", minWidth: 0, outline: "none" },
       role: "treeitem",
+      "aria-level": depth + 1,
+      "aria-posinset": posInSet,
+      "aria-setsize": setSize,
+      "aria-expanded": isContainer ? isExpanded : void 0,
+      "aria-selected": isSelected ?? void 0,
       children: children({ isDragging })
     }
   );
 }
-function TreeRenderer({
+function TreeRendererInner({
   blocks,
   blocksByParent,
   parentId,
@@ -339,6 +347,11 @@ function TreeRenderer({
             focusedId,
             isSelected: selectedIds?.has(block.id),
             onBlockClick,
+            isContainer,
+            isExpanded,
+            depth,
+            posInSet: originalIndex + 1,
+            setSize: items.length,
             children: ({ isDragging }) => {
               if (isContainer) {
                 const expandStyle = animation?.expandDuration ? {
@@ -423,6 +436,7 @@ function TreeRenderer({
     )
   ] });
 }
+var TreeRenderer = memo(TreeRendererInner);
 function DragOverlay({
   activeBlock,
   children,
@@ -655,6 +669,9 @@ function reparentBlockIndex(state, activeId, targetZone, containerTypes = [], or
     if (parentDepth + subtreeDepth > maxDepth) return state;
   }
   if (dragged.id === zoneTargetId) return state;
+  if (newParentId !== null && getDescendantIds(state, dragged.id).has(newParentId)) {
+    return state;
+  }
   const oldList = byParent.get(oldParentId) ?? [];
   const currentIndexInOldParent = oldList.indexOf(dragged.id);
   const preNewList = byParent.get(newParentId) ?? [];
@@ -707,19 +724,24 @@ function reparentBlockIndex(state, activeId, targetZone, containerTypes = [], or
 function getBlockDepth(index, blockId) {
   let depth = 0;
   let current = blockId;
+  const visited = /* @__PURE__ */ new Set();
   while (current !== null) {
+    if (visited.has(current)) break;
+    visited.add(current);
     depth++;
     const block = index.byId.get(current);
     current = block?.parentId ?? null;
   }
   return depth;
 }
-function getSubtreeDepth(index, blockId) {
+function getSubtreeDepth(index, blockId, visited = /* @__PURE__ */ new Set()) {
+  if (visited.has(blockId)) return 0;
+  visited.add(blockId);
   const children = index.byParent.get(blockId) ?? [];
   if (children.length === 0) return 1;
   let max = 0;
   for (const childId of children) {
-    max = Math.max(max, getSubtreeDepth(index, childId));
+    max = Math.max(max, getSubtreeDepth(index, childId, visited));
   }
   return 1 + max;
 }
@@ -746,6 +768,40 @@ function reparentMultipleBlocks(state, blockIds, targetZone, containerTypes = []
   }
   return result;
 }
+function validateBlockTree(index) {
+  const issues = [];
+  for (const [id] of index.byId) {
+    const visited = /* @__PURE__ */ new Set();
+    let current = id;
+    while (current !== null) {
+      if (visited.has(current)) {
+        issues.push(`Cycle detected: block "${id}" has a circular parentId chain`);
+        break;
+      }
+      visited.add(current);
+      const block = index.byId.get(current);
+      current = block?.parentId ?? null;
+    }
+  }
+  for (const [id, block] of index.byId) {
+    if (block.parentId !== null && !index.byId.has(block.parentId)) {
+      issues.push(`Orphan: block "${id}" references non-existent parent "${block.parentId}"`);
+    }
+  }
+  for (const [parentId, childIds] of index.byParent) {
+    for (const childId of childIds) {
+      if (!index.byId.has(childId)) {
+        issues.push(`Stale ref: byParent key "${parentId}" lists non-existent block "${childId}"`);
+      }
+    }
+  }
+  if (issues.length > 0) {
+    for (const issue of issues) {
+      console.warn(`[dnd-block-tree] ${issue}`);
+    }
+  }
+  return { valid: issues.length === 0, issues };
+}
 function deleteBlockAndDescendants(state, id) {
   const byId = cloneMap(state.byId);
   const byParent = cloneParentMap(state.byParent);
@@ -768,7 +824,12 @@ function getBlockPosition(blocks, blockId) {
 }
 function computeInitialExpanded(blocks, containerTypes, initialExpanded) {
   if (initialExpanded === "none") {
-    return {};
+    const expandedMap2 = {};
+    const containers2 = blocks.filter((b) => containerTypes.includes(b.type));
+    for (const container of containers2) {
+      expandedMap2[container.id] = false;
+    }
+    return expandedMap2;
   }
   const expandedMap = {};
   const containers = blocks.filter((b) => containerTypes.includes(b.type));
@@ -885,14 +946,17 @@ function BlockTree({
       onDragMove?.(event);
     }, 50)
   ).current;
-  const originalIndex = computeNormalizedIndex(blocks, orderingStrategy);
-  const blocksByParent = /* @__PURE__ */ new Map();
-  for (const [parentId, ids] of originalIndex.byParent.entries()) {
-    blocksByParent.set(
-      parentId,
-      ids.map((id) => originalIndex.byId.get(id)).filter(Boolean)
-    );
-  }
+  const originalIndex = useMemo(
+    () => computeNormalizedIndex(blocks, orderingStrategy),
+    [blocks, orderingStrategy]
+  );
+  const blocksByParent = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const [parentId, ids] of originalIndex.byParent.entries()) {
+      map.set(parentId, ids.map((id) => originalIndex.byId.get(id)).filter(Boolean));
+    }
+    return map;
+  }, [originalIndex]);
   const focusedIdRef = useRef(null);
   const rootRef = useRef(null);
   const lastClickedIdRef = useRef(null);
@@ -1917,6 +1981,6 @@ function nestedToFlat(nested) {
   return result;
 }
 
-export { BlockTree, BlockTreeSSR, DragOverlay, DropZone, TreeRenderer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockState, createStickyCollision, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSensorConfig, getSubtreeDepth, initFractionalOrder, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, triggerHaptic, useBlockHistory, useConfiguredSensors, useLayoutAnimation, useVirtualTree, weightedVerticalCollision };
+export { BlockTree, BlockTreeSSR, DragOverlay, DropZone, TreeRenderer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockState, createStickyCollision, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSensorConfig, getSubtreeDepth, initFractionalOrder, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, triggerHaptic, useBlockHistory, useConfiguredSensors, useLayoutAnimation, useVirtualTree, validateBlockTree, weightedVerticalCollision };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map