@edux-design/tree-select 0.2.3 → 0.2.5

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`.
@@ -164,6 +179,29 @@ import { MenuList, MenuItem } from "@edux-design/menus";
 />;
 ```
 
+### `renderLabel` (function)
+Renders custom inline content where the label normally appears. This is the supported way to compose metadata like `Tag` elements next to the item title.
+
+```jsx
+import { Tag } from "@edux-design/tags";
+
+<TreeSelect
+  data={data}
+  renderLabel={({ id, node, hasChildren }) => (
+    <>
+      <span>{node.label ?? id}</span>
+      <Tag
+        size="small"
+        tone="subtle"
+        variant={hasChildren ? "information" : "neutral"}
+      >
+        {hasChildren ? "Group" : "Leaf"}
+      </Tag>
+    </>
+  )}
+/>;
+```
+
 ### `maxLabelLength` (number)
 Limits label width by character count and truncates with an ellipsis when exceeded.
 
@@ -229,6 +267,7 @@ levelConfig={{
 - `levelConfig` can override editability, actions, and tooltips per depth.
 - Drag-and-drop supports reordering within a level and moving items between levels.
 - Drag handle alignment is set so child handles align under the parent toggle.
+- `renderLabel` customizes both the row content and the single-item drag overlay.
 
 ---
 

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, actionButtonsPosition, maxLabelLength, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, onLabelChange, levelConfig, defaultExpanded, expanded, onExpandedChange, renderAdditionalActionsMenu, }: {
+declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, actionButtonsPosition, maxLabelLength, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, onLabelChange, levelConfig, defaultExpanded, expanded, onExpandedChange, renderAdditionalActionsMenu, renderLabel, }: {
     data: any;
     onDataChange: any;
     allowDragAndDrop?: boolean;
@@ -20,6 +20,7 @@ declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDr
     expanded: any;
     onExpandedChange: any;
     renderAdditionalActionsMenu: any;
+    renderLabel: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { TreeSelect };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, actionButtonsPosition, maxLabelLength, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, onLabelChange, levelConfig, defaultExpanded, expanded, onExpandedChange, renderAdditionalActionsMenu, }: {
+declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, actionButtonsPosition, maxLabelLength, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, onLabelChange, levelConfig, defaultExpanded, expanded, onExpandedChange, renderAdditionalActionsMenu, renderLabel, }: {
     data: any;
     onDataChange: any;
     allowDragAndDrop?: boolean;
@@ -20,6 +20,7 @@ declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDr
     expanded: any;
     onExpandedChange: any;
     renderAdditionalActionsMenu: any;
+    renderLabel: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { TreeSelect };

package/dist/index.js

@@ -87,10 +87,19 @@ var TreeRow = ({
   canDelete,
   onDelete,
   deleteTooltip,
-  additionalActionsMenu
+  additionalActionsMenu,
+  renderLabel
 }) => {
   const toggleLabel = isExpanded ? "Collapse item" : "Expand item";
   const label = item.node.label ?? item.node.id;
+  const labelContent = renderLabel ? renderLabel({
+    id: item.id,
+    node: item.node,
+    depth,
+    parentId: item.parentId,
+    hasChildren: item.hasChildren,
+    isExpanded
+  }) : label;
   const showToggle = item.hasChildren;
   const [additionalMenuOpen, setAdditionalMenuOpen] = import_react.default.useState(false);
   const rowBackground = isDragging ? "rgba(0, 0, 0, 0.04)" : isSelected ? "rgba(15, 98, 254, 0.08)" : void 0;
@@ -217,9 +226,13 @@ var TreeRow = ({
             style: {
               fontSize: 14,
               cursor: isEditable ? "pointer" : "default",
-              ...labelStyle
+              ...renderLabel ? {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6
+              } : labelStyle
             },
-            children: label
+            children: labelContent
           }
         ),
         showActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -326,7 +339,8 @@ var TreeSortableRow = ({
   canDelete,
   onDelete,
   deleteTooltip,
-  additionalActionsMenu
+  additionalActionsMenu,
+  renderLabel
 }) => {
   const {
     attributes,
@@ -390,7 +404,8 @@ var TreeSortableRow = ({
       canDelete,
       onDelete,
       deleteTooltip,
-      additionalActionsMenu
+      additionalActionsMenu,
+      renderLabel
     }
   );
 };
@@ -765,9 +780,9 @@ function TreeSelect({
   defaultExpanded,
   expanded,
   onExpandedChange,
-  renderAdditionalActionsMenu
+  renderAdditionalActionsMenu,
+  renderLabel
 }) {
-  var _a, _b;
   const [uncontrolledExpandedIds, setExpandedIds] = (0, import_react3.useState)(
     () => getExpandedIds(data ?? [], defaultExpanded)
   );
@@ -806,12 +821,12 @@ function TreeSelect({
   }, [maxDepth]);
   const resolvedLevelConfig = (0, import_react3.useCallback)(
     (depth) => {
-      var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       const defaults = (levelConfig == null ? void 0 : levelConfig.default) ?? {};
-      const perLevel = ((_a2 = levelConfig == null ? void 0 : levelConfig.levels) == null ? void 0 : _a2[depth]) ?? {};
+      const perLevel = ((_a = levelConfig == null ? void 0 : levelConfig.levels) == null ? void 0 : _a[depth]) ?? {};
       const editable = perLevel.editable ?? defaults.editable ?? isEditable;
       const actions = {
-        addChild: ((_b2 = perLevel.actions) == null ? void 0 : _b2.addChild) ?? ((_c = defaults.actions) == null ? void 0 : _c.addChild) ?? editable,
+        addChild: ((_b = perLevel.actions) == null ? void 0 : _b.addChild) ?? ((_c = defaults.actions) == null ? void 0 : _c.addChild) ?? editable,
         addSibling: ((_d = perLevel.actions) == null ? void 0 : _d.addSibling) ?? ((_e = defaults.actions) == null ? void 0 : _e.addSibling) ?? editable,
         delete: ((_f = perLevel.actions) == null ? void 0 : _f.delete) ?? ((_g = defaults.actions) == null ? void 0 : _g.delete) ?? (editable && allowDelete)
       };
@@ -845,6 +860,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)) {
@@ -857,15 +878,15 @@ function TreeSelect({
   }, [updateExpandedIds]);
   const handleRowClick = (0, import_react3.useCallback)(
     (event, id) => {
-      var _a2, _b2;
+      var _a, _b;
       if (!allowMultiDrag) return;
       const hasMultiKey = event.metaKey || event.ctrlKey;
-      const parentId = ((_a2 = itemById.get(id)) == null ? void 0 : _a2.parentId) ?? null;
+      const parentId = ((_a = itemById.get(id)) == null ? void 0 : _a.parentId) ?? null;
       const siblingOrder = siblingOrderMap.get(parentId) ?? [];
       if (event.shiftKey) {
         const anchorIndex = siblingOrder.indexOf(lastSelectedId);
         const targetIndex = siblingOrder.indexOf(id);
-        if (anchorIndex < 0 || targetIndex < 0 || (((_b2 = itemById.get(lastSelectedId ?? "")) == null ? void 0 : _b2.parentId) ?? null) !== parentId) {
+        if (anchorIndex < 0 || targetIndex < 0 || (((_b = itemById.get(lastSelectedId ?? "")) == null ? void 0 : _b.parentId) ?? null) !== parentId) {
           setSelectedIds(/* @__PURE__ */ new Set([id]));
           setLastSelectedId(id);
           return;
@@ -887,10 +908,10 @@ function TreeSelect({
         return;
       }
       setSelectedIds((prev) => {
-        var _a3;
+        var _a2;
         if (prev.size) {
           const firstSelected = prev.values().next().value;
-          const selectedParent = ((_a3 = itemById.get(firstSelected)) == null ? void 0 : _a3.parentId) ?? null;
+          const selectedParent = ((_a2 = itemById.get(firstSelected)) == null ? void 0 : _a2.parentId) ?? null;
           if (selectedParent !== parentId) {
             return /* @__PURE__ */ new Set([id]);
           }
@@ -948,12 +969,13 @@ function TreeSelect({
     setHorizontalOffset(event.delta.x);
   }, []);
   const handleDragOver = (0, import_react3.useCallback)((event) => {
-    var _a2;
-    if ((_a2 = event.over) == null ? void 0 : _a2.id) {
+    var _a;
+    if ((_a = event.over) == null ? void 0 : _a.id) {
       setOverId(normaliseId(event.over.id));
     }
   }, []);
   const handleDragEnd = (0, import_react3.useCallback)(() => {
+    var _a;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -969,6 +991,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
+    const sourceParentId = ((_a = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a.parentId) ?? null;
     const { nextNodes, removedNodes } = removeNodes(treeData, draggedRootIds);
     if (!removedNodes.length) {
       setActiveId(null);
@@ -980,7 +1003,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 +1026,9 @@ function TreeSelect({
     activeId,
     draggedIds,
     draggedRootIds,
+    emitDataChange,
     horizontalOffset,
-    onDataChange,
+    itemById,
     overId,
     treeData,
     updateExpandedIds,
@@ -1018,29 +1051,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,12 +1100,12 @@ function TreeSelect({
       );
       setEditingId((prev) => prev && removedIds.has(prev) ? null : prev);
     },
-    [onDataChange, treeData, updateExpandedIds]
+    [emitDataChange, treeData, updateExpandedIds]
   );
   const startEdit = (0, import_react3.useCallback)(
     (id) => {
-      var _a2, _b2, _c, _d;
-      const currentLabel = ((_b2 = (_a2 = itemById.get(id)) == null ? void 0 : _a2.node) == null ? void 0 : _b2.label) ?? ((_d = (_c = itemById.get(id)) == null ? void 0 : _c.node) == null ? void 0 : _d.id) ?? "";
+      var _a, _b, _c, _d;
+      const currentLabel = ((_b = (_a = itemById.get(id)) == null ? void 0 : _a.node) == null ? void 0 : _b.label) ?? ((_d = (_c = itemById.get(id)) == null ? void 0 : _c.node) == null ? void 0 : _d.id) ?? "";
       setEditingId(id);
       setDraftLabel(String(currentLabel));
     },
@@ -1080,12 +1124,30 @@ 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);
   }, []);
+  const renderLabelContent = (0, import_react3.useCallback)(
+    (item) => {
+      if (!item) return null;
+      if (!renderLabel) return item.node.label ?? item.id;
+      return renderLabel({
+        id: item.id,
+        node: item.node,
+        depth: item.depth,
+        parentId: item.parentId,
+        hasChildren: item.hasChildren,
+        isExpanded: expandedIds.has(item.id)
+      });
+    },
+    [expandedIds, renderLabel]
+  );
   const indicator = (0, import_react3.useMemo)(() => {
     if (!allowDragAndDrop) return null;
     return getDropIndicator({
@@ -1174,7 +1236,8 @@ function TreeSelect({
                 canDelete: levelSettings.actions.delete,
                 onDelete: handleDelete,
                 deleteTooltip: levelSettings.tooltips.delete,
-                additionalActionsMenu
+                additionalActionsMenu,
+                renderLabel
               },
               item.id
             );
@@ -1189,7 +1252,19 @@ function TreeSelect({
               borderRadius: 6,
               boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
             },
-            children: draggedRootIds.length > 1 ? `${draggedRootIds.length} items` : ((_b = (_a = visibleItems.find((item) => item.id === activeId)) == null ? void 0 : _a.node) == null ? void 0 : _b.label) ?? activeId
+            children: draggedRootIds.length > 1 ? `${draggedRootIds.length} items` : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6
+                },
+                children: renderLabelContent(
+                  visibleItems.find((item) => item.id === activeId)
+                ) ?? activeId
+              }
+            )
           }
         ) : null })
       ]
@@ -1234,7 +1309,8 @@ function TreeSelect({
         canDelete: levelSettings.actions.delete,
         onDelete: handleDelete,
         deleteTooltip: levelSettings.tooltips.delete,
-        additionalActionsMenu
+        additionalActionsMenu,
+        renderLabel
       },
       item.id
     );

package/dist/index.mjs

@@ -70,10 +70,19 @@ var TreeRow = ({
   canDelete,
   onDelete,
   deleteTooltip,
-  additionalActionsMenu
+  additionalActionsMenu,
+  renderLabel
 }) => {
   const toggleLabel = isExpanded ? "Collapse item" : "Expand item";
   const label = item.node.label ?? item.node.id;
+  const labelContent = renderLabel ? renderLabel({
+    id: item.id,
+    node: item.node,
+    depth,
+    parentId: item.parentId,
+    hasChildren: item.hasChildren,
+    isExpanded
+  }) : label;
   const showToggle = item.hasChildren;
   const [additionalMenuOpen, setAdditionalMenuOpen] = React.useState(false);
   const rowBackground = isDragging ? "rgba(0, 0, 0, 0.04)" : isSelected ? "rgba(15, 98, 254, 0.08)" : void 0;
@@ -200,9 +209,13 @@ var TreeRow = ({
             style: {
               fontSize: 14,
               cursor: isEditable ? "pointer" : "default",
-              ...labelStyle
+              ...renderLabel ? {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6
+              } : labelStyle
             },
-            children: label
+            children: labelContent
           }
         ),
         showActions ? /* @__PURE__ */ jsxs(
@@ -309,7 +322,8 @@ var TreeSortableRow = ({
   canDelete,
   onDelete,
   deleteTooltip,
-  additionalActionsMenu
+  additionalActionsMenu,
+  renderLabel
 }) => {
   const {
     attributes,
@@ -373,7 +387,8 @@ var TreeSortableRow = ({
       canDelete,
       onDelete,
       deleteTooltip,
-      additionalActionsMenu
+      additionalActionsMenu,
+      renderLabel
     }
   );
 };
@@ -748,9 +763,9 @@ function TreeSelect({
   defaultExpanded,
   expanded,
   onExpandedChange,
-  renderAdditionalActionsMenu
+  renderAdditionalActionsMenu,
+  renderLabel
 }) {
-  var _a, _b;
   const [uncontrolledExpandedIds, setExpandedIds] = useState(
     () => getExpandedIds(data ?? [], defaultExpanded)
   );
@@ -789,12 +804,12 @@ function TreeSelect({
   }, [maxDepth]);
   const resolvedLevelConfig = useCallback2(
     (depth) => {
-      var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       const defaults = (levelConfig == null ? void 0 : levelConfig.default) ?? {};
-      const perLevel = ((_a2 = levelConfig == null ? void 0 : levelConfig.levels) == null ? void 0 : _a2[depth]) ?? {};
+      const perLevel = ((_a = levelConfig == null ? void 0 : levelConfig.levels) == null ? void 0 : _a[depth]) ?? {};
       const editable = perLevel.editable ?? defaults.editable ?? isEditable;
       const actions = {
-        addChild: ((_b2 = perLevel.actions) == null ? void 0 : _b2.addChild) ?? ((_c = defaults.actions) == null ? void 0 : _c.addChild) ?? editable,
+        addChild: ((_b = perLevel.actions) == null ? void 0 : _b.addChild) ?? ((_c = defaults.actions) == null ? void 0 : _c.addChild) ?? editable,
         addSibling: ((_d = perLevel.actions) == null ? void 0 : _d.addSibling) ?? ((_e = defaults.actions) == null ? void 0 : _e.addSibling) ?? editable,
         delete: ((_f = perLevel.actions) == null ? void 0 : _f.delete) ?? ((_g = defaults.actions) == null ? void 0 : _g.delete) ?? (editable && allowDelete)
       };
@@ -828,6 +843,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)) {
@@ -840,15 +861,15 @@ function TreeSelect({
   }, [updateExpandedIds]);
   const handleRowClick = useCallback2(
     (event, id) => {
-      var _a2, _b2;
+      var _a, _b;
       if (!allowMultiDrag) return;
       const hasMultiKey = event.metaKey || event.ctrlKey;
-      const parentId = ((_a2 = itemById.get(id)) == null ? void 0 : _a2.parentId) ?? null;
+      const parentId = ((_a = itemById.get(id)) == null ? void 0 : _a.parentId) ?? null;
       const siblingOrder = siblingOrderMap.get(parentId) ?? [];
       if (event.shiftKey) {
         const anchorIndex = siblingOrder.indexOf(lastSelectedId);
         const targetIndex = siblingOrder.indexOf(id);
-        if (anchorIndex < 0 || targetIndex < 0 || (((_b2 = itemById.get(lastSelectedId ?? "")) == null ? void 0 : _b2.parentId) ?? null) !== parentId) {
+        if (anchorIndex < 0 || targetIndex < 0 || (((_b = itemById.get(lastSelectedId ?? "")) == null ? void 0 : _b.parentId) ?? null) !== parentId) {
           setSelectedIds(/* @__PURE__ */ new Set([id]));
           setLastSelectedId(id);
           return;
@@ -870,10 +891,10 @@ function TreeSelect({
         return;
       }
       setSelectedIds((prev) => {
-        var _a3;
+        var _a2;
         if (prev.size) {
           const firstSelected = prev.values().next().value;
-          const selectedParent = ((_a3 = itemById.get(firstSelected)) == null ? void 0 : _a3.parentId) ?? null;
+          const selectedParent = ((_a2 = itemById.get(firstSelected)) == null ? void 0 : _a2.parentId) ?? null;
           if (selectedParent !== parentId) {
             return /* @__PURE__ */ new Set([id]);
           }
@@ -931,12 +952,13 @@ function TreeSelect({
     setHorizontalOffset(event.delta.x);
   }, []);
   const handleDragOver = useCallback2((event) => {
-    var _a2;
-    if ((_a2 = event.over) == null ? void 0 : _a2.id) {
+    var _a;
+    if ((_a = event.over) == null ? void 0 : _a.id) {
       setOverId(normaliseId(event.over.id));
     }
   }, []);
   const handleDragEnd = useCallback2(() => {
+    var _a;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -952,6 +974,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
+    const sourceParentId = ((_a = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a.parentId) ?? null;
     const { nextNodes, removedNodes } = removeNodes(treeData, draggedRootIds);
     if (!removedNodes.length) {
       setActiveId(null);
@@ -963,7 +986,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 +1009,9 @@ function TreeSelect({
     activeId,
     draggedIds,
     draggedRootIds,
+    emitDataChange,
     horizontalOffset,
-    onDataChange,
+    itemById,
     overId,
     treeData,
     updateExpandedIds,
@@ -1001,29 +1034,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,12 +1083,12 @@ function TreeSelect({
       );
       setEditingId((prev) => prev && removedIds.has(prev) ? null : prev);
     },
-    [onDataChange, treeData, updateExpandedIds]
+    [emitDataChange, treeData, updateExpandedIds]
   );
   const startEdit = useCallback2(
     (id) => {
-      var _a2, _b2, _c, _d;
-      const currentLabel = ((_b2 = (_a2 = itemById.get(id)) == null ? void 0 : _a2.node) == null ? void 0 : _b2.label) ?? ((_d = (_c = itemById.get(id)) == null ? void 0 : _c.node) == null ? void 0 : _d.id) ?? "";
+      var _a, _b, _c, _d;
+      const currentLabel = ((_b = (_a = itemById.get(id)) == null ? void 0 : _a.node) == null ? void 0 : _b.label) ?? ((_d = (_c = itemById.get(id)) == null ? void 0 : _c.node) == null ? void 0 : _d.id) ?? "";
       setEditingId(id);
       setDraftLabel(String(currentLabel));
     },
@@ -1063,12 +1107,30 @@ 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);
   }, []);
+  const renderLabelContent = useCallback2(
+    (item) => {
+      if (!item) return null;
+      if (!renderLabel) return item.node.label ?? item.id;
+      return renderLabel({
+        id: item.id,
+        node: item.node,
+        depth: item.depth,
+        parentId: item.parentId,
+        hasChildren: item.hasChildren,
+        isExpanded: expandedIds.has(item.id)
+      });
+    },
+    [expandedIds, renderLabel]
+  );
   const indicator = useMemo2(() => {
     if (!allowDragAndDrop) return null;
     return getDropIndicator({
@@ -1157,7 +1219,8 @@ function TreeSelect({
                 canDelete: levelSettings.actions.delete,
                 onDelete: handleDelete,
                 deleteTooltip: levelSettings.tooltips.delete,
-                additionalActionsMenu
+                additionalActionsMenu,
+                renderLabel
               },
               item.id
             );
@@ -1172,7 +1235,19 @@ function TreeSelect({
               borderRadius: 6,
               boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
             },
-            children: draggedRootIds.length > 1 ? `${draggedRootIds.length} items` : ((_b = (_a = visibleItems.find((item) => item.id === activeId)) == null ? void 0 : _a.node) == null ? void 0 : _b.label) ?? activeId
+            children: draggedRootIds.length > 1 ? `${draggedRootIds.length} items` : /* @__PURE__ */ jsx3(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6
+                },
+                children: renderLabelContent(
+                  visibleItems.find((item) => item.id === activeId)
+                ) ?? activeId
+              }
+            )
           }
         ) : null })
       ]
@@ -1217,7 +1292,8 @@ function TreeSelect({
         canDelete: levelSettings.actions.delete,
         onDelete: handleDelete,
         deleteTooltip: levelSettings.tooltips.delete,
-        additionalActionsMenu
+        additionalActionsMenu,
+        renderLabel
       },
       item.id
     );

package/package.json

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