@edux-design/tree-select 0.2.0 → 0.2.2

package/README.md

@@ -7,9 +7,9 @@ TreeSelect renders hierarchical data with expand/collapse controls, optional inl
 ## Installation
 
 ```bash
-pnpm add @edux-design/tree-select @edux-design/forms @edux-design/buttons @edux-design/icons @edux-design/tooltips @dnd-kit/core @dnd-kit/sortable
+pnpm add @edux-design/tree-select @edux-design/forms @edux-design/buttons @edux-design/icons @edux-design/menus @edux-design/tooltips @dnd-kit/core @dnd-kit/sortable
 # or
-npm install @edux-design/tree-select @edux-design/forms @edux-design/buttons @edux-design/icons @edux-design/tooltips @dnd-kit/core @dnd-kit/sortable
+npm install @edux-design/tree-select @edux-design/forms @edux-design/buttons @edux-design/icons @edux-design/menus @edux-design/tooltips @dnd-kit/core @dnd-kit/sortable
 ```
 
 Peer deps include `react@^19.1.0` and `react-dom@^19.1.0`.
@@ -125,6 +125,9 @@ Tree data to render. This component is controlled; updates are emitted through `
 ### `onDataChange` (function)
 Called with the updated tree when edits, add actions, or drag-and-drop reordering occur.
 
+### `onLabelChange` (function)
+Called with `(id, nextLabel)` when a label edit is committed. When provided, label edits do not emit `onDataChange`.
+
 ### `allowDragAndDrop` (boolean, default `false`)
 Enables drag-and-drop. When `false`, drag handles are hidden and items cannot be reordered.
 
@@ -137,6 +140,33 @@ 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).
 
+### `actionButtonsPosition` (`"start"` | `"end"`, default `"start"`)
+Positions the action buttons within a row. `"end"` pushes the actions to the end of the row.
+
+### `renderAdditionalActionsMenu` (function)
+Renders a kebab (more actions) menu per row. Return `null`/`undefined` to hide the menu for a given item.
+
+```jsx
+import { MenuList, MenuItem } from "@edux-design/menus";
+
+<TreeSelect
+  data={data}
+  renderAdditionalActionsMenu={({ id, node }) => (
+    <MenuList>
+      <MenuItem onClick={() => console.log("View", id)}>
+        View {node.label ?? id}
+      </MenuItem>
+      <MenuItem onClick={() => console.log("Duplicate", id)}>
+        Duplicate
+      </MenuItem>
+    </MenuList>
+  )}
+/>;
+```
+
+### `maxLabelLength` (number)
+Limits label width by character count and truncates with an ellipsis when exceeded.
+
 ### `useChevron` (boolean, default `false`)
 Uses a chevron control for expand/collapse instead of the checkbox toggle.
 
@@ -155,20 +185,35 @@ Limits how deep new items can be added. For example, `maxDepth={3}` allows at mo
 ### `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.
+### `levelConfig` (object)
+Per-level configuration for editing, actions, and tooltips. Use `default` for global settings and `levels` to override by depth.
+Values in `levelConfig` override `isEditable`, `allowDelete`, and tooltip props for the matching depth.
+
+```js
+levelConfig={{
+  default: {
+    editable: true,
+    actions: { addChild: true, addSibling: true, delete: false },
+    tooltips: {
+      addChild: "Add child",
+      addSibling: "Add sibling",
+      delete: "Delete item",
+    },
+  },
+  levels: {
+    0: {
+      editable: false,
+      tooltips: { addChild: "Add chapter" },
+    },
+  },
+}}
+```
 
 ---
 
@@ -181,6 +226,7 @@ Tooltip copy for delete, keyed by depth. Overrides `deleteTooltip` when provided
 - `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.
+- `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.
 

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, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, addChildTooltipByLevel, addSiblingTooltipByLevel, deleteTooltipByLevel, defaultExpanded, expanded, onExpandedChange, }: {
+declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, actionButtonsPosition, maxLabelLength, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, onLabelChange, levelConfig, defaultExpanded, expanded, onExpandedChange, renderAdditionalActionsMenu, }: {
     data: any;
     onDataChange: any;
     allowDragAndDrop?: boolean;
@@ -8,16 +8,18 @@ declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDr
     isEditable?: boolean;
     allowDelete?: boolean;
     useChevron?: boolean;
+    actionButtonsPosition?: string;
+    maxLabelLength: any;
     maxDepth: any;
     addChildTooltip: any;
     addSiblingTooltip: any;
     deleteTooltip: any;
-    addChildTooltipByLevel: any;
-    addSiblingTooltipByLevel: any;
-    deleteTooltipByLevel: any;
+    onLabelChange: any;
+    levelConfig: any;
     defaultExpanded: any;
     expanded: any;
     onExpandedChange: any;
+    renderAdditionalActionsMenu: 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, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, addChildTooltipByLevel, addSiblingTooltipByLevel, deleteTooltipByLevel, defaultExpanded, expanded, onExpandedChange, }: {
+declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDrag, isEditable, allowDelete, useChevron, actionButtonsPosition, maxLabelLength, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, onLabelChange, levelConfig, defaultExpanded, expanded, onExpandedChange, renderAdditionalActionsMenu, }: {
     data: any;
     onDataChange: any;
     allowDragAndDrop?: boolean;
@@ -8,16 +8,18 @@ declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDr
     isEditable?: boolean;
     allowDelete?: boolean;
     useChevron?: boolean;
+    actionButtonsPosition?: string;
+    maxLabelLength: any;
     maxDepth: any;
     addChildTooltip: any;
     addSiblingTooltip: any;
     deleteTooltip: any;
-    addChildTooltipByLevel: any;
-    addSiblingTooltipByLevel: any;
-    deleteTooltipByLevel: any;
+    onLabelChange: any;
+    levelConfig: any;
     defaultExpanded: any;
     expanded: any;
     onExpandedChange: any;
+    renderAdditionalActionsMenu: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { TreeSelect };