@edux-design/tree-select 0.2.3 → 0.2.4

package/README.md

@@ -123,7 +123,22 @@ export function ChevronExample() {
 Tree data to render. This component is controlled; updates are emitted through `onDataChange`.
 
 ### `onDataChange` (function)
-Called with the updated tree when edits, add actions, or drag-and-drop reordering occur.
+Called with `(nextTree, meta?)` when edits, add actions, deletes, or drag-and-drop reordering occur.
+
+```ts
+type TreeSelectChangeMeta = {
+  reason: "drag" | "edit" | "add-child" | "add-sibling" | "delete";
+  activeId?: string | null;
+  draggedRootIds?: string[];
+  draggedIds?: string[];
+  sourceParentId?: string | null;
+  targetParentId?: string | null;
+  targetSiblingIndex?: number | null;
+  projectedDepth?: number | null;
+};
+```
+
+For drag-and-drop, `meta.draggedRootIds` identifies the exact root nodes that moved, which removes ambiguity when multiple reorder outcomes can produce the same final tree shape.
 
 ### `onLabelChange` (function)
 Called with `(id, nextLabel)` when a label edit is committed. When provided, label edits do not emit `onDataChange`.

package/dist/index.js

@@ -845,6 +845,12 @@ function TreeSelect({
     },
     [expandedIds, isExpandedControlled, onExpandedChange]
   );
+  const emitDataChange = (0, import_react3.useCallback)(
+    (nextTree, meta) => {
+      onDataChange == null ? void 0 : onDataChange(nextTree, meta);
+    },
+    [onDataChange]
+  );
   const toggleExpanded = (0, import_react3.useCallback)((id) => {
     updateExpandedIds((prev) => {
       if (prev.has(id)) {
@@ -954,6 +960,7 @@ function TreeSelect({
     }
   }, []);
   const handleDragEnd = (0, import_react3.useCallback)(() => {
+    var _a2;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -969,6 +976,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
+    const sourceParentId = ((_a2 = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a2.parentId) ?? null;
     const { nextNodes, removedNodes } = removeNodes(treeData, draggedRootIds);
     if (!removedNodes.length) {
       setActiveId(null);
@@ -980,7 +988,16 @@ function TreeSelect({
     removedNodes.forEach((node, index) => {
       nextTree = insertNode(nextTree, parentId, siblingIndex + index, node);
     });
-    onDataChange == null ? void 0 : onDataChange(nextTree);
+    emitDataChange(nextTree, {
+      reason: "drag",
+      activeId,
+      draggedRootIds,
+      draggedIds: Array.from(draggedIds),
+      sourceParentId,
+      targetParentId: parentId ?? null,
+      targetSiblingIndex: siblingIndex,
+      projectedDepth
+    });
     if (parentId && projectedDepth > 0) {
       updateExpandedIds((prev) => {
         prev.add(parentId);
@@ -994,8 +1011,9 @@ function TreeSelect({
     activeId,
     draggedIds,
     draggedRootIds,
+    emitDataChange,
     horizontalOffset,
-    onDataChange,
+    itemById,
     overId,
     treeData,
     updateExpandedIds,
@@ -1018,29 +1036,40 @@ function TreeSelect({
     (parentId) => {
       const newNode = createNewNode();
       const nextTree = addChildNode(treeData, parentId, newNode);
-      onDataChange == null ? void 0 : onDataChange(nextTree);
+      emitDataChange(nextTree, {
+        reason: "add-child",
+        activeId: newNode.id,
+        targetParentId: parentId
+      });
       updateExpandedIds((prev) => {
         prev.add(parentId);
         return prev;
       });
     },
-    [createNewNode, onDataChange, treeData, updateExpandedIds]
+    [createNewNode, emitDataChange, treeData, updateExpandedIds]
   );
   const handleAddSibling = (0, import_react3.useCallback)(
     (targetId) => {
       const newNode = createNewNode();
       const { nextNodes, inserted } = addSiblingNode(treeData, targetId, newNode);
       if (!inserted) return;
-      onDataChange == null ? void 0 : onDataChange(nextNodes);
+      emitDataChange(nextNodes, {
+        reason: "add-sibling",
+        activeId: newNode.id
+      });
     },
-    [createNewNode, onDataChange, treeData]
+    [createNewNode, emitDataChange, treeData]
   );
   const handleDelete = (0, import_react3.useCallback)(
     (targetId) => {
       const { nextNodes, removed } = removeNode(treeData, targetId);
       if (!removed) return;
       const removedIds = collectNodeIds(removed);
-      onDataChange == null ? void 0 : onDataChange(nextNodes);
+      emitDataChange(nextNodes, {
+        reason: "delete",
+        activeId: targetId,
+        draggedIds: Array.from(removedIds)
+      });
       updateExpandedIds((prev) => {
         removedIds.forEach((id) => prev.delete(id));
         return prev;
@@ -1056,7 +1085,7 @@ function TreeSelect({
       );
       setEditingId((prev) => prev && removedIds.has(prev) ? null : prev);
     },
-    [onDataChange, treeData, updateExpandedIds]
+    [emitDataChange, treeData, updateExpandedIds]
   );
   const startEdit = (0, import_react3.useCallback)(
     (id) => {
@@ -1080,9 +1109,12 @@ function TreeSelect({
       return;
     }
     const nextTree = updateNodeLabel(treeData, editingId, nextLabel);
-    onDataChange == null ? void 0 : onDataChange(nextTree);
+    emitDataChange(nextTree, {
+      reason: "edit",
+      activeId: editingId
+    });
     setEditingId(null);
-  }, [draftLabel, editingId, onDataChange, onLabelChange, treeData]);
+  }, [draftLabel, editingId, emitDataChange, onLabelChange, treeData]);
   const cancelEdit = (0, import_react3.useCallback)(() => {
     setEditingId(null);
   }, []);

package/dist/index.mjs

@@ -828,6 +828,12 @@ function TreeSelect({
     },
     [expandedIds, isExpandedControlled, onExpandedChange]
   );
+  const emitDataChange = useCallback2(
+    (nextTree, meta) => {
+      onDataChange == null ? void 0 : onDataChange(nextTree, meta);
+    },
+    [onDataChange]
+  );
   const toggleExpanded = useCallback2((id) => {
     updateExpandedIds((prev) => {
       if (prev.has(id)) {
@@ -937,6 +943,7 @@ function TreeSelect({
     }
   }, []);
   const handleDragEnd = useCallback2(() => {
+    var _a2;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -952,6 +959,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
+    const sourceParentId = ((_a2 = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a2.parentId) ?? null;
     const { nextNodes, removedNodes } = removeNodes(treeData, draggedRootIds);
     if (!removedNodes.length) {
       setActiveId(null);
@@ -963,7 +971,16 @@ function TreeSelect({
     removedNodes.forEach((node, index) => {
       nextTree = insertNode(nextTree, parentId, siblingIndex + index, node);
     });
-    onDataChange == null ? void 0 : onDataChange(nextTree);
+    emitDataChange(nextTree, {
+      reason: "drag",
+      activeId,
+      draggedRootIds,
+      draggedIds: Array.from(draggedIds),
+      sourceParentId,
+      targetParentId: parentId ?? null,
+      targetSiblingIndex: siblingIndex,
+      projectedDepth
+    });
     if (parentId && projectedDepth > 0) {
       updateExpandedIds((prev) => {
         prev.add(parentId);
@@ -977,8 +994,9 @@ function TreeSelect({
     activeId,
     draggedIds,
     draggedRootIds,
+    emitDataChange,
     horizontalOffset,
-    onDataChange,
+    itemById,
     overId,
     treeData,
     updateExpandedIds,
@@ -1001,29 +1019,40 @@ function TreeSelect({
     (parentId) => {
       const newNode = createNewNode();
       const nextTree = addChildNode(treeData, parentId, newNode);
-      onDataChange == null ? void 0 : onDataChange(nextTree);
+      emitDataChange(nextTree, {
+        reason: "add-child",
+        activeId: newNode.id,
+        targetParentId: parentId
+      });
       updateExpandedIds((prev) => {
         prev.add(parentId);
         return prev;
       });
     },
-    [createNewNode, onDataChange, treeData, updateExpandedIds]
+    [createNewNode, emitDataChange, treeData, updateExpandedIds]
   );
   const handleAddSibling = useCallback2(
     (targetId) => {
       const newNode = createNewNode();
       const { nextNodes, inserted } = addSiblingNode(treeData, targetId, newNode);
       if (!inserted) return;
-      onDataChange == null ? void 0 : onDataChange(nextNodes);
+      emitDataChange(nextNodes, {
+        reason: "add-sibling",
+        activeId: newNode.id
+      });
     },
-    [createNewNode, onDataChange, treeData]
+    [createNewNode, emitDataChange, treeData]
   );
   const handleDelete = useCallback2(
     (targetId) => {
       const { nextNodes, removed } = removeNode(treeData, targetId);
       if (!removed) return;
       const removedIds = collectNodeIds(removed);
-      onDataChange == null ? void 0 : onDataChange(nextNodes);
+      emitDataChange(nextNodes, {
+        reason: "delete",
+        activeId: targetId,
+        draggedIds: Array.from(removedIds)
+      });
       updateExpandedIds((prev) => {
         removedIds.forEach((id) => prev.delete(id));
         return prev;
@@ -1039,7 +1068,7 @@ function TreeSelect({
       );
       setEditingId((prev) => prev && removedIds.has(prev) ? null : prev);
     },
-    [onDataChange, treeData, updateExpandedIds]
+    [emitDataChange, treeData, updateExpandedIds]
   );
   const startEdit = useCallback2(
     (id) => {
@@ -1063,9 +1092,12 @@ function TreeSelect({
       return;
     }
     const nextTree = updateNodeLabel(treeData, editingId, nextLabel);
-    onDataChange == null ? void 0 : onDataChange(nextTree);
+    emitDataChange(nextTree, {
+      reason: "edit",
+      activeId: editingId
+    });
     setEditingId(null);
-  }, [draftLabel, editingId, onDataChange, onLabelChange, treeData]);
+  }, [draftLabel, editingId, emitDataChange, onLabelChange, treeData]);
   const cancelEdit = useCallback2(() => {
     setEditingId(null);
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/tree-select",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": false,
   "sideEffects": [
     "**/*.css"