@edux-design/tree-select 0.1.0 → 0.1.2

package/README.md

@@ -134,18 +134,42 @@ Allows multi-select drag using CMD/CTRL or SHIFT. Selection is restricted to adj
 ### `isEditable` (boolean, default `false`)
 Enables inline label editing and add-item controls.
 
+### `allowDelete` (boolean, default `false`)
+Shows a delete action for each item and removes the node (plus descendants).
+
 ### `useChevron` (boolean, default `false`)
 Uses a chevron control for expand/collapse instead of the checkbox toggle.
 
+### `defaultExpanded` (`"all"` | number | string[] | Set<string | number>)
+Defines the initial expansion state. Use `"all"` to expand every node with children, a number to expand up to that level (1 expands top-level nodes), or an array/set of ids to expand specific items.
+
+### `expanded` (`"all"` | number | string[] | Set<string | number>)
+Controlled expansion state. When provided, the tree expansion is driven by this value.
+
+### `onExpandedChange` (function)
+Called with a `Set` of expanded ids when the user toggles expansion in controlled mode.
+
 ### `maxDepth` (number)
 Limits how deep new items can be added. For example, `maxDepth={3}` allows at most 3 levels.
 
 ### `addChildTooltip` (string)
 Tooltip copy for the add-child button.
 
+### `addChildTooltipByLevel` (string[])
+Tooltip copy for add-child, keyed by depth. Overrides `addChildTooltip` when provided.
+
 ### `addSiblingTooltip` (string)
 Tooltip copy for the add-sibling button.
 
+### `addSiblingTooltipByLevel` (string[])
+Tooltip copy for add-sibling, keyed by depth. Overrides `addSiblingTooltip` when provided.
+
+### `deleteTooltip` (string)
+Tooltip copy for the delete button.
+
+### `deleteTooltipByLevel` (string[])
+Tooltip copy for delete, keyed by depth. Overrides `deleteTooltip` when provided.
+
 ---
 
 ## Behaviour details
@@ -154,6 +178,9 @@ Tooltip copy for the add-sibling button.
 - Leaf nodes do not render a checkbox/chevron toggle.
 - Expansion only controls visibility of children.
 - When `useChevron` is `false`, the toggle uses the Checkbox plus/indeterminate states.
+- `defaultExpanded` only seeds the initial state; use `expanded` for controlled expansion.
+- When `expanded` is provided, `onExpandedChange` is called with the next set of expanded ids.
+- Deleting a node removes the entire subtree and clears any selected/expanded state for those ids.
 - 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.
 

package/dist/index.d.mts

@@ -1,15 +1,23 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, useChevron, maxDepth, addChildTooltip, addSiblingTooltip, }: {
+declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, addChildTooltipByLevel, addSiblingTooltipByLevel, deleteTooltipByLevel, defaultExpanded, expanded, onExpandedChange, }: {
     data: any;
     onDataChange: any;
     allowDragAndDrop?: boolean;
     allowMultiDrag?: boolean;
     isEditable?: boolean;
+    allowDelete?: boolean;
     useChevron?: boolean;
     maxDepth: any;
     addChildTooltip: any;
     addSiblingTooltip: any;
+    deleteTooltip: any;
+    addChildTooltipByLevel: any;
+    addSiblingTooltipByLevel: any;
+    deleteTooltipByLevel: any;
+    defaultExpanded: any;
+    expanded: any;
+    onExpandedChange: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { TreeSelect };

package/dist/index.d.ts

@@ -1,15 +1,23 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, useChevron, maxDepth, addChildTooltip, addSiblingTooltip, }: {
+declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, addChildTooltipByLevel, addSiblingTooltipByLevel, deleteTooltipByLevel, defaultExpanded, expanded, onExpandedChange, }: {
     data: any;
     onDataChange: any;
     allowDragAndDrop?: boolean;
     allowMultiDrag?: boolean;
     isEditable?: boolean;
+    allowDelete?: boolean;
     useChevron?: boolean;
     maxDepth: any;
     addChildTooltip: any;
     addSiblingTooltip: any;
+    deleteTooltip: any;
+    addChildTooltipByLevel: any;
+    addSiblingTooltipByLevel: any;
+    deleteTooltipByLevel: any;
+    defaultExpanded: any;
+    expanded: any;
+    onExpandedChange: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { TreeSelect };

package/dist/index.js

@@ -5764,13 +5764,17 @@ var TreeRow = ({
   onAddChild,
   onAddSibling,
   addChildTooltip,
-  addSiblingTooltip
+  addSiblingTooltip,
+  canDelete,
+  onDelete,
+  deleteTooltip
 }) => {
   const toggleLabel = isExpanded ? "Collapse item" : "Expand item";
   const label = item.node.label ?? item.node.id;
   const showToggle = item.hasChildren;
   const rowBackground = isDragging ? "rgba(0, 0, 0, 0.04)" : isSelected ? "rgba(15, 98, 254, 0.08)" : void 0;
   const rowPaddingLeft = depth * INDENT_WIDTH + 8 + (isDraggable ? 0 : HANDLE_WIDTH + 8);
+  const showActions = canAddChild || canAddSibling || canDelete;
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "div",
     {
@@ -5883,7 +5887,7 @@ var TreeRow = ({
             children: label
           }
         ),
-        canAddChild || canAddSibling ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        showActions ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
           "div",
           {
             onClick: (event) => event.stopPropagation(),
@@ -5914,6 +5918,19 @@ var TreeRow = ({
                   }
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipContent2, { children: addSiblingTooltip ?? "Add sibling" })
+              ] }) : null,
+              canDelete ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Tooltip2, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  IconButton,
+                  {
+                    size: "small",
+                    isBare: true,
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons.Close, { "aria-hidden": "true" }),
+                    "aria-label": "Delete item",
+                    onClick: () => onDelete == null ? void 0 : onDelete(item.id)
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipContent2, { children: deleteTooltip ?? "Delete item" })
               ] }) : null
             ]
           }
@@ -5949,7 +5966,10 @@ var TreeSortableRow = ({
   onAddChild,
   onAddSibling,
   addChildTooltip,
-  addSiblingTooltip
+  addSiblingTooltip,
+  canDelete,
+  onDelete,
+  deleteTooltip
 }) => {
   const {
     attributes,
@@ -6007,7 +6027,10 @@ var TreeSortableRow = ({
       onAddChild,
       onAddSibling,
       addChildTooltip,
-      addSiblingTooltip
+      addSiblingTooltip,
+      canDelete,
+      onDelete,
+      deleteTooltip
     }
   );
 };
@@ -6190,6 +6213,53 @@ var addSiblingNode = (nodes, targetId, newNode) => {
   });
   return { nextNodes, inserted };
 };
+var collectNodeIds = (node, ids = /* @__PURE__ */ new Set()) => {
+  if (!node) return ids;
+  ids.add(normaliseId(node.id));
+  if (hasChildren(node)) {
+    node.children.forEach((child) => collectNodeIds(child, ids));
+  }
+  return ids;
+};
+var collectExpandableIds = (nodes, ids = /* @__PURE__ */ new Set()) => {
+  nodes.forEach((node) => {
+    if (!hasChildren(node)) return;
+    const nodeId = normaliseId(node.id);
+    ids.add(nodeId);
+    collectExpandableIds(node.children, ids);
+  });
+  return ids;
+};
+var collectExpandedIdsByLevel = (nodes, level, depth = 0, ids = /* @__PURE__ */ new Set()) => {
+  if (level <= 0) return ids;
+  nodes.forEach((node) => {
+    if (!hasChildren(node)) return;
+    if (depth < level) {
+      ids.add(normaliseId(node.id));
+    }
+    if (depth + 1 < level) {
+      collectExpandedIdsByLevel(node.children, level, depth + 1, ids);
+    }
+  });
+  return ids;
+};
+var getExpandedIds = (nodes, expanded) => {
+  if (!expanded) return /* @__PURE__ */ new Set();
+  if (expanded === true || expanded === "all") {
+    return collectExpandableIds(nodes);
+  }
+  if (typeof expanded === "number" && Number.isFinite(expanded)) {
+    const level = Math.max(Math.floor(expanded), 0);
+    return collectExpandedIdsByLevel(nodes, level);
+  }
+  if (expanded instanceof Set) {
+    return new Set(Array.from(expanded, normaliseId));
+  }
+  if (Array.isArray(expanded)) {
+    return new Set(expanded.map(normaliseId));
+  }
+  return /* @__PURE__ */ new Set();
+};
 
 // src/elements/treeSelectDrag.js
 var clamp2 = (value, min2, max2) => Math.min(Math.max(value, min2), max2);
@@ -6322,13 +6392,24 @@ function TreeSelect({
   allowDragAndDrop = false,
   allowMultiDrag = false,
   isEditable = false,
+  allowDelete = false,
   useChevron = false,
   maxDepth,
   addChildTooltip,
-  addSiblingTooltip
+  addSiblingTooltip,
+  deleteTooltip,
+  addChildTooltipByLevel,
+  addSiblingTooltipByLevel,
+  deleteTooltipByLevel,
+  defaultExpanded,
+  expanded,
+  onExpandedChange
 }) {
   var _a, _b;
-  const [expandedIds, setExpandedIds] = (0, import_react11.useState)(() => /* @__PURE__ */ new Set());
+  const [uncontrolledExpandedIds, setExpandedIds] = (0, import_react11.useState)(
+    () => getExpandedIds(data ?? [], defaultExpanded)
+  );
+  const isExpandedControlled = expanded !== void 0;
   const [activeId, setActiveId] = (0, import_react11.useState)(null);
   const [overId, setOverId] = (0, import_react11.useState)(null);
   const [horizontalOffset, setHorizontalOffset] = (0, import_react11.useState)(0);
@@ -6338,6 +6419,11 @@ function TreeSelect({
   const [draftLabel, setDraftLabel] = (0, import_react11.useState)("");
   const idCounterRef = (0, import_react11.useRef)(0);
   const treeData = data ?? [];
+  const controlledExpandedIds = (0, import_react11.useMemo)(
+    () => getExpandedIds(treeData, expanded),
+    [expanded, treeData]
+  );
+  const expandedIds = isExpandedControlled ? controlledExpandedIds : uncontrolledExpandedIds;
   const listRef = (0, import_react11.useRef)(null);
   const rowRefs = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
   const visibleItems = (0, import_react11.useMemo)(
@@ -6359,17 +6445,27 @@ function TreeSelect({
   const sensors = (0, import_core2.useSensors)(
     (0, import_core2.useSensor)(import_core2.PointerSensor, { activationConstraint: { distance: 4 } })
   );
+  const updateExpandedIds = (0, import_react11.useCallback)(
+    (updater) => {
+      if (isExpandedControlled) {
+        const next = updater(new Set(expandedIds));
+        onExpandedChange == null ? void 0 : onExpandedChange(next);
+        return;
+      }
+      setExpandedIds((prev) => updater(new Set(prev)));
+    },
+    [expandedIds, isExpandedControlled, onExpandedChange]
+  );
   const toggleExpanded = (0, import_react11.useCallback)((id) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
+    updateExpandedIds((prev) => {
+      if (prev.has(id)) {
+        prev.delete(id);
       } else {
-        next.add(id);
+        prev.add(id);
       }
-      return next;
+      return prev;
     });
-  }, []);
+  }, [updateExpandedIds]);
   const handleRowClick = (0, import_react11.useCallback)(
     (event, id) => {
       var _a2, _b2;
@@ -6497,10 +6593,9 @@ function TreeSelect({
     });
     onDataChange == null ? void 0 : onDataChange(nextTree);
     if (parentId && projectedDepth > 0) {
-      setExpandedIds((prev) => {
-        const next = new Set(prev);
-        next.add(parentId);
-        return next;
+      updateExpandedIds((prev) => {
+        prev.add(parentId);
+        return prev;
       });
     }
     setActiveId(null);
@@ -6514,7 +6609,9 @@ function TreeSelect({
     onDataChange,
     overId,
     treeData,
-    visibleItems
+    updateExpandedIds,
+    visibleItems,
+    maxDepth
   ]);
   const handleDragCancel = (0, import_react11.useCallback)(() => {
     setActiveId(null);
@@ -6533,13 +6630,12 @@ function TreeSelect({
       const newNode = createNewNode();
       const nextTree = addChildNode(treeData, parentId, newNode);
       onDataChange == null ? void 0 : onDataChange(nextTree);
-      setExpandedIds((prev) => {
-        const next = new Set(prev);
-        next.add(parentId);
-        return next;
+      updateExpandedIds((prev) => {
+        prev.add(parentId);
+        return prev;
       });
     },
-    [createNewNode, onDataChange, treeData]
+    [createNewNode, onDataChange, treeData, updateExpandedIds]
   );
   const handleAddSibling = (0, import_react11.useCallback)(
     (targetId) => {
@@ -6550,6 +6646,34 @@ function TreeSelect({
     },
     [createNewNode, onDataChange, treeData]
   );
+  const resolveTooltipByLevel = (0, import_react11.useCallback)((levels, depth, fallback) => {
+    if (!Array.isArray(levels)) return fallback;
+    if (depth < 0 || depth >= levels.length) return fallback;
+    return levels[depth] ?? fallback;
+  }, []);
+  const handleDelete = (0, import_react11.useCallback)(
+    (targetId) => {
+      const { nextNodes, removed } = removeNode(treeData, targetId);
+      if (!removed) return;
+      const removedIds = collectNodeIds(removed);
+      onDataChange == null ? void 0 : onDataChange(nextNodes);
+      updateExpandedIds((prev) => {
+        removedIds.forEach((id) => prev.delete(id));
+        return prev;
+      });
+      setSelectedIds((prev) => {
+        if (!prev.size) return prev;
+        const next = new Set(prev);
+        removedIds.forEach((id) => next.delete(id));
+        return next;
+      });
+      setLastSelectedId(
+        (prev) => prev && removedIds.has(prev) ? null : prev
+      );
+      setEditingId((prev) => prev && removedIds.has(prev) ? null : prev);
+    },
+    [onDataChange, treeData, updateExpandedIds]
+  );
   const startEdit = (0, import_react11.useCallback)(
     (id) => {
       var _a2, _b2, _c, _d;
@@ -6641,8 +6765,23 @@ function TreeSelect({
               canAddSibling: isEditable && (maxDepthLimit === null || item.depth <= maxDepthLimit),
               onAddChild: handleAddChild,
               onAddSibling: handleAddSibling,
-              addChildTooltip,
-              addSiblingTooltip
+              addChildTooltip: resolveTooltipByLevel(
+                addChildTooltipByLevel,
+                item.depth,
+                addChildTooltip
+              ),
+              addSiblingTooltip: resolveTooltipByLevel(
+                addSiblingTooltipByLevel,
+                item.depth,
+                addSiblingTooltip
+              ),
+              canDelete: isEditable && allowDelete,
+              onDelete: handleDelete,
+              deleteTooltip: resolveTooltipByLevel(
+                deleteTooltipByLevel,
+                item.depth,
+                deleteTooltip
+              )
             },
             item.id
           ))
@@ -6685,8 +6824,23 @@ function TreeSelect({
       canAddSibling: isEditable && (maxDepthLimit === null || item.depth <= maxDepthLimit),
       onAddChild: handleAddChild,
       onAddSibling: handleAddSibling,
-      addChildTooltip,
-      addSiblingTooltip
+      addChildTooltip: resolveTooltipByLevel(
+        addChildTooltipByLevel,
+        item.depth,
+        addChildTooltip
+      ),
+      addSiblingTooltip: resolveTooltipByLevel(
+        addSiblingTooltipByLevel,
+        item.depth,
+        addSiblingTooltip
+      ),
+      canDelete: isEditable && allowDelete,
+      onDelete: handleDelete,
+      deleteTooltip: resolveTooltipByLevel(
+        deleteTooltipByLevel,
+        item.depth,
+        deleteTooltip
+      )
     },
     item.id
   )) }) }) });

package/dist/index.mjs

@@ -5708,7 +5708,7 @@ function ButtonGroupItem(_props) {
 ButtonGroupItem.displayName = "ButtonGroupItem";
 
 // src/elements/TreeRow.jsx
-import { Chevron, Draghandle, List, Plus } from "@edux-design/icons";
+import { Chevron, Close, Draghandle, List, Plus } from "@edux-design/icons";
 
 // src/elements/treeSelectConstants.js
 var HANDLE_WIDTH = 28;
@@ -5744,13 +5744,17 @@ var TreeRow = ({
   onAddChild,
   onAddSibling,
   addChildTooltip,
-  addSiblingTooltip
+  addSiblingTooltip,
+  canDelete,
+  onDelete,
+  deleteTooltip
 }) => {
   const toggleLabel = isExpanded ? "Collapse item" : "Expand item";
   const label = item.node.label ?? item.node.id;
   const showToggle = item.hasChildren;
   const rowBackground = isDragging ? "rgba(0, 0, 0, 0.04)" : isSelected ? "rgba(15, 98, 254, 0.08)" : void 0;
   const rowPaddingLeft = depth * INDENT_WIDTH + 8 + (isDraggable ? 0 : HANDLE_WIDTH + 8);
+  const showActions = canAddChild || canAddSibling || canDelete;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -5863,7 +5867,7 @@ var TreeRow = ({
             children: label
           }
         ),
-        canAddChild || canAddSibling ? /* @__PURE__ */ jsxs3(
+        showActions ? /* @__PURE__ */ jsxs3(
           "div",
           {
             onClick: (event) => event.stopPropagation(),
@@ -5894,6 +5898,19 @@ var TreeRow = ({
                   }
                 ) }),
                 /* @__PURE__ */ jsx11(TooltipContent2, { children: addSiblingTooltip ?? "Add sibling" })
+              ] }) : null,
+              canDelete ? /* @__PURE__ */ jsxs3(Tooltip2, { children: [
+                /* @__PURE__ */ jsx11(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx11(
+                  IconButton,
+                  {
+                    size: "small",
+                    isBare: true,
+                    icon: /* @__PURE__ */ jsx11(Close, { "aria-hidden": "true" }),
+                    "aria-label": "Delete item",
+                    onClick: () => onDelete == null ? void 0 : onDelete(item.id)
+                  }
+                ) }),
+                /* @__PURE__ */ jsx11(TooltipContent2, { children: deleteTooltip ?? "Delete item" })
               ] }) : null
             ]
           }
@@ -5929,7 +5946,10 @@ var TreeSortableRow = ({
   onAddChild,
   onAddSibling,
   addChildTooltip,
-  addSiblingTooltip
+  addSiblingTooltip,
+  canDelete,
+  onDelete,
+  deleteTooltip
 }) => {
   const {
     attributes,
@@ -5987,7 +6007,10 @@ var TreeSortableRow = ({
       onAddChild,
       onAddSibling,
       addChildTooltip,
-      addSiblingTooltip
+      addSiblingTooltip,
+      canDelete,
+      onDelete,
+      deleteTooltip
     }
   );
 };
@@ -6170,6 +6193,53 @@ var addSiblingNode = (nodes, targetId, newNode) => {
   });
   return { nextNodes, inserted };
 };
+var collectNodeIds = (node, ids = /* @__PURE__ */ new Set()) => {
+  if (!node) return ids;
+  ids.add(normaliseId(node.id));
+  if (hasChildren(node)) {
+    node.children.forEach((child) => collectNodeIds(child, ids));
+  }
+  return ids;
+};
+var collectExpandableIds = (nodes, ids = /* @__PURE__ */ new Set()) => {
+  nodes.forEach((node) => {
+    if (!hasChildren(node)) return;
+    const nodeId = normaliseId(node.id);
+    ids.add(nodeId);
+    collectExpandableIds(node.children, ids);
+  });
+  return ids;
+};
+var collectExpandedIdsByLevel = (nodes, level, depth = 0, ids = /* @__PURE__ */ new Set()) => {
+  if (level <= 0) return ids;
+  nodes.forEach((node) => {
+    if (!hasChildren(node)) return;
+    if (depth < level) {
+      ids.add(normaliseId(node.id));
+    }
+    if (depth + 1 < level) {
+      collectExpandedIdsByLevel(node.children, level, depth + 1, ids);
+    }
+  });
+  return ids;
+};
+var getExpandedIds = (nodes, expanded) => {
+  if (!expanded) return /* @__PURE__ */ new Set();
+  if (expanded === true || expanded === "all") {
+    return collectExpandableIds(nodes);
+  }
+  if (typeof expanded === "number" && Number.isFinite(expanded)) {
+    const level = Math.max(Math.floor(expanded), 0);
+    return collectExpandedIdsByLevel(nodes, level);
+  }
+  if (expanded instanceof Set) {
+    return new Set(Array.from(expanded, normaliseId));
+  }
+  if (Array.isArray(expanded)) {
+    return new Set(expanded.map(normaliseId));
+  }
+  return /* @__PURE__ */ new Set();
+};
 
 // src/elements/treeSelectDrag.js
 var clamp2 = (value, min2, max2) => Math.min(Math.max(value, min2), max2);
@@ -6302,13 +6372,24 @@ function TreeSelect({
   allowDragAndDrop = false,
   allowMultiDrag = false,
   isEditable = false,
+  allowDelete = false,
   useChevron = false,
   maxDepth,
   addChildTooltip,
-  addSiblingTooltip
+  addSiblingTooltip,
+  deleteTooltip,
+  addChildTooltipByLevel,
+  addSiblingTooltipByLevel,
+  deleteTooltipByLevel,
+  defaultExpanded,
+  expanded,
+  onExpandedChange
 }) {
   var _a, _b;
-  const [expandedIds, setExpandedIds] = useState11(() => /* @__PURE__ */ new Set());
+  const [uncontrolledExpandedIds, setExpandedIds] = useState11(
+    () => getExpandedIds(data ?? [], defaultExpanded)
+  );
+  const isExpandedControlled = expanded !== void 0;
   const [activeId, setActiveId] = useState11(null);
   const [overId, setOverId] = useState11(null);
   const [horizontalOffset, setHorizontalOffset] = useState11(0);
@@ -6318,6 +6399,11 @@ function TreeSelect({
   const [draftLabel, setDraftLabel] = useState11("");
   const idCounterRef = useRef10(0);
   const treeData = data ?? [];
+  const controlledExpandedIds = useMemo8(
+    () => getExpandedIds(treeData, expanded),
+    [expanded, treeData]
+  );
+  const expandedIds = isExpandedControlled ? controlledExpandedIds : uncontrolledExpandedIds;
   const listRef = useRef10(null);
   const rowRefs = useRef10(/* @__PURE__ */ new Map());
   const visibleItems = useMemo8(
@@ -6339,17 +6425,27 @@ function TreeSelect({
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } })
   );
+  const updateExpandedIds = useCallback8(
+    (updater) => {
+      if (isExpandedControlled) {
+        const next = updater(new Set(expandedIds));
+        onExpandedChange == null ? void 0 : onExpandedChange(next);
+        return;
+      }
+      setExpandedIds((prev) => updater(new Set(prev)));
+    },
+    [expandedIds, isExpandedControlled, onExpandedChange]
+  );
   const toggleExpanded = useCallback8((id) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
+    updateExpandedIds((prev) => {
+      if (prev.has(id)) {
+        prev.delete(id);
       } else {
-        next.add(id);
+        prev.add(id);
       }
-      return next;
+      return prev;
     });
-  }, []);
+  }, [updateExpandedIds]);
   const handleRowClick = useCallback8(
     (event, id) => {
       var _a2, _b2;
@@ -6477,10 +6573,9 @@ function TreeSelect({
     });
     onDataChange == null ? void 0 : onDataChange(nextTree);
     if (parentId && projectedDepth > 0) {
-      setExpandedIds((prev) => {
-        const next = new Set(prev);
-        next.add(parentId);
-        return next;
+      updateExpandedIds((prev) => {
+        prev.add(parentId);
+        return prev;
       });
     }
     setActiveId(null);
@@ -6494,7 +6589,9 @@ function TreeSelect({
     onDataChange,
     overId,
     treeData,
-    visibleItems
+    updateExpandedIds,
+    visibleItems,
+    maxDepth
   ]);
   const handleDragCancel = useCallback8(() => {
     setActiveId(null);
@@ -6513,13 +6610,12 @@ function TreeSelect({
       const newNode = createNewNode();
       const nextTree = addChildNode(treeData, parentId, newNode);
       onDataChange == null ? void 0 : onDataChange(nextTree);
-      setExpandedIds((prev) => {
-        const next = new Set(prev);
-        next.add(parentId);
-        return next;
+      updateExpandedIds((prev) => {
+        prev.add(parentId);
+        return prev;
       });
     },
-    [createNewNode, onDataChange, treeData]
+    [createNewNode, onDataChange, treeData, updateExpandedIds]
   );
   const handleAddSibling = useCallback8(
     (targetId) => {
@@ -6530,6 +6626,34 @@ function TreeSelect({
     },
     [createNewNode, onDataChange, treeData]
   );
+  const resolveTooltipByLevel = useCallback8((levels, depth, fallback) => {
+    if (!Array.isArray(levels)) return fallback;
+    if (depth < 0 || depth >= levels.length) return fallback;
+    return levels[depth] ?? fallback;
+  }, []);
+  const handleDelete = useCallback8(
+    (targetId) => {
+      const { nextNodes, removed } = removeNode(treeData, targetId);
+      if (!removed) return;
+      const removedIds = collectNodeIds(removed);
+      onDataChange == null ? void 0 : onDataChange(nextNodes);
+      updateExpandedIds((prev) => {
+        removedIds.forEach((id) => prev.delete(id));
+        return prev;
+      });
+      setSelectedIds((prev) => {
+        if (!prev.size) return prev;
+        const next = new Set(prev);
+        removedIds.forEach((id) => next.delete(id));
+        return next;
+      });
+      setLastSelectedId(
+        (prev) => prev && removedIds.has(prev) ? null : prev
+      );
+      setEditingId((prev) => prev && removedIds.has(prev) ? null : prev);
+    },
+    [onDataChange, treeData, updateExpandedIds]
+  );
   const startEdit = useCallback8(
     (id) => {
       var _a2, _b2, _c, _d;
@@ -6621,8 +6745,23 @@ function TreeSelect({
               canAddSibling: isEditable && (maxDepthLimit === null || item.depth <= maxDepthLimit),
               onAddChild: handleAddChild,
               onAddSibling: handleAddSibling,
-              addChildTooltip,
-              addSiblingTooltip
+              addChildTooltip: resolveTooltipByLevel(
+                addChildTooltipByLevel,
+                item.depth,
+                addChildTooltip
+              ),
+              addSiblingTooltip: resolveTooltipByLevel(
+                addSiblingTooltipByLevel,
+                item.depth,
+                addSiblingTooltip
+              ),
+              canDelete: isEditable && allowDelete,
+              onDelete: handleDelete,
+              deleteTooltip: resolveTooltipByLevel(
+                deleteTooltipByLevel,
+                item.depth,
+                deleteTooltip
+              )
             },
             item.id
           ))
@@ -6665,8 +6804,23 @@ function TreeSelect({
       canAddSibling: isEditable && (maxDepthLimit === null || item.depth <= maxDepthLimit),
       onAddChild: handleAddChild,
       onAddSibling: handleAddSibling,
-      addChildTooltip,
-      addSiblingTooltip
+      addChildTooltip: resolveTooltipByLevel(
+        addChildTooltipByLevel,
+        item.depth,
+        addChildTooltip
+      ),
+      addSiblingTooltip: resolveTooltipByLevel(
+        addSiblingTooltipByLevel,
+        item.depth,
+        addSiblingTooltip
+      ),
+      canDelete: isEditable && allowDelete,
+      onDelete: handleDelete,
+      deleteTooltip: resolveTooltipByLevel(
+        deleteTooltipByLevel,
+        item.depth,
+        deleteTooltip
+      )
     },
     item.id
   )) }) }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/tree-select",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -18,8 +18,8 @@
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.js --format esm,cjs --dts",
-    "dev": "tsup src/index.js --watch --format esm,cjs --dts",
+    "build": "tsup src/index.js --format esm,cjs --dts --external react,react-dom",
+    "dev": "tsup src/index.js --watch --format esm,cjs --dts --external react,react-dom",
     "check-types": "tsc --noEmit"
   },
   "dependencies": {