@edux-design/tree-select 0.2.1 → 0.2.3

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`.
@@ -143,6 +143,27 @@ 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.
 

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, }: {
+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;
@@ -19,6 +19,7 @@ declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDr
     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, actionButtonsPosition, maxLabelLength, maxDepth, addChildTooltip, addSiblingTooltip, deleteTooltip, onLabelChange, levelConfig, 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;
@@ -19,6 +19,7 @@ declare function TreeSelect({ data, onDataChange, allowDragAndDrop, allowMultiDr
     defaultExpanded: any;
     expanded: any;
     onExpandedChange: any;
+    renderAdditionalActionsMenu: any;
 }): react_jsx_runtime.JSX.Element;
 
 export { TreeSelect };

package/dist/index.js

@@ -44,6 +44,7 @@ var import_react = __toESM(require("react"));
 var import_forms = require("@edux-design/forms");
 var import_buttons = require("@edux-design/buttons");
 var import_icons = require("@edux-design/icons");
+var import_menus = require("@edux-design/menus");
 var import_tooltips = require("@edux-design/tooltips");
 
 // src/elements/treeSelectConstants.js
@@ -85,14 +86,17 @@ var TreeRow = ({
   addSiblingTooltip,
   canDelete,
   onDelete,
-  deleteTooltip
+  deleteTooltip,
+  additionalActionsMenu
 }) => {
   const toggleLabel = isExpanded ? "Collapse item" : "Expand item";
   const label = item.node.label ?? item.node.id;
   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;
-  const rowPaddingLeft = depth * INDENT_WIDTH + 8 + (isDraggable ? 0 : HANDLE_WIDTH + 8);
-  const showActions = canAddChild || canAddSibling || canDelete;
+  const rowPaddingLeft = depth * INDENT_WIDTH + 8;
+  const hasAdditionalActionsMenu = Boolean(additionalActionsMenu);
+  const showActions = canAddChild || canAddSibling || canDelete || hasAdditionalActionsMenu;
   const actionsStyle = {
     display: "flex",
     gap: 4,
@@ -133,14 +137,13 @@ var TreeRow = ({
             ref: dragRef,
             "aria-label": "Drag item",
             onClick: (event) => event.stopPropagation(),
+            className: "border border-border-subtle bg-bg-base text-fg-base",
             style: {
               width: HANDLE_WIDTH,
               height: HANDLE_WIDTH,
               display: "grid",
               placeItems: "center",
-              border: "1px solid rgba(0, 0, 0, 0.2)",
               borderRadius: 6,
-              background: "white",
               cursor: "grab",
               fontSize: 12,
               lineHeight: 1
@@ -264,7 +267,25 @@ var TreeRow = ({
                   }
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltips.TooltipContent, { children: deleteTooltip ?? "Delete item" })
-              ] }) : null
+              ] }) : null,
+              hasAdditionalActionsMenu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_menus.Menu,
+                {
+                  align: "end",
+                  open: additionalMenuOpen,
+                  onOpenChange: setAdditionalMenuOpen,
+                  button: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_buttons.IconButton,
+                    {
+                      size: "small",
+                      isBare: true,
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MeatballVertical, { "aria-hidden": "true" }),
+                      "aria-label": "More actions"
+                    }
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onClick: () => setAdditionalMenuOpen(false), children: additionalActionsMenu })
+                }
+              ) : null
             ]
           }
         ) : null
@@ -304,7 +325,8 @@ var TreeSortableRow = ({
   addSiblingTooltip,
   canDelete,
   onDelete,
-  deleteTooltip
+  deleteTooltip,
+  additionalActionsMenu
 }) => {
   const {
     attributes,
@@ -367,7 +389,8 @@ var TreeSortableRow = ({
       addSiblingTooltip,
       canDelete,
       onDelete,
-      deleteTooltip
+      deleteTooltip,
+      additionalActionsMenu
     }
   );
 };
@@ -741,7 +764,8 @@ function TreeSelect({
   levelConfig,
   defaultExpanded,
   expanded,
-  onExpandedChange
+  onExpandedChange,
+  renderAdditionalActionsMenu
 }) {
   var _a, _b;
   const [uncontrolledExpandedIds, setExpandedIds] = (0, import_react3.useState)(
@@ -1111,6 +1135,13 @@ function TreeSelect({
           ) : null,
           visibleItems.map((item) => {
             const levelSettings = resolvedLevelConfig(item.depth);
+            const additionalActionsMenu = renderAdditionalActionsMenu == null ? void 0 : renderAdditionalActionsMenu({
+              id: item.id,
+              node: item.node,
+              depth: item.depth,
+              parentId: item.parentId,
+              hasChildren: item.hasChildren
+            });
             return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               TreeSortableRow,
               {
@@ -1142,7 +1173,8 @@ function TreeSelect({
                 addSiblingTooltip: levelSettings.tooltips.addSibling,
                 canDelete: levelSettings.actions.delete,
                 onDelete: handleDelete,
-                deleteTooltip: levelSettings.tooltips.delete
+                deleteTooltip: levelSettings.tooltips.delete,
+                additionalActionsMenu
               },
               item.id
             );
@@ -1151,10 +1183,10 @@ function TreeSelect({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.DragOverlay, { children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
+            className: "border border-border-subtle bg-bg-base text-fg-base",
             style: {
               padding: "6px 8px",
               borderRadius: 6,
-              background: "white",
               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
@@ -1164,6 +1196,13 @@ function TreeSelect({
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: listRef, style: { position: "relative" }, children: visibleItems.map((item) => {
     const levelSettings = resolvedLevelConfig(item.depth);
+    const additionalActionsMenu = renderAdditionalActionsMenu == null ? void 0 : renderAdditionalActionsMenu({
+      id: item.id,
+      node: item.node,
+      depth: item.depth,
+      parentId: item.parentId,
+      hasChildren: item.hasChildren
+    });
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       TreeRow,
       {
@@ -1194,7 +1233,8 @@ function TreeSelect({
         addSiblingTooltip: levelSettings.tooltips.addSibling,
         canDelete: levelSettings.actions.delete,
         onDelete: handleDelete,
-        deleteTooltip: levelSettings.tooltips.delete
+        deleteTooltip: levelSettings.tooltips.delete,
+        additionalActionsMenu
       },
       item.id
     );

package/dist/index.mjs

@@ -15,7 +15,15 @@ import { TooltipProvider } from "@edux-design/tooltips";
 import React from "react";
 import { Checkbox, Field, Label } from "@edux-design/forms";
 import { IconButton } from "@edux-design/buttons";
-import { Chevron, Close, Draghandle, List, Plus } from "@edux-design/icons";
+import {
+  Chevron,
+  Close,
+  Draghandle,
+  List,
+  MeatballVertical,
+  Plus
+} from "@edux-design/icons";
+import { Menu } from "@edux-design/menus";
 import {
   Tooltip,
   TooltipContent,
@@ -61,14 +69,17 @@ var TreeRow = ({
   addSiblingTooltip,
   canDelete,
   onDelete,
-  deleteTooltip
+  deleteTooltip,
+  additionalActionsMenu
 }) => {
   const toggleLabel = isExpanded ? "Collapse item" : "Expand item";
   const label = item.node.label ?? item.node.id;
   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;
-  const rowPaddingLeft = depth * INDENT_WIDTH + 8 + (isDraggable ? 0 : HANDLE_WIDTH + 8);
-  const showActions = canAddChild || canAddSibling || canDelete;
+  const rowPaddingLeft = depth * INDENT_WIDTH + 8;
+  const hasAdditionalActionsMenu = Boolean(additionalActionsMenu);
+  const showActions = canAddChild || canAddSibling || canDelete || hasAdditionalActionsMenu;
   const actionsStyle = {
     display: "flex",
     gap: 4,
@@ -109,14 +120,13 @@ var TreeRow = ({
             ref: dragRef,
             "aria-label": "Drag item",
             onClick: (event) => event.stopPropagation(),
+            className: "border border-border-subtle bg-bg-base text-fg-base",
             style: {
               width: HANDLE_WIDTH,
               height: HANDLE_WIDTH,
               display: "grid",
               placeItems: "center",
-              border: "1px solid rgba(0, 0, 0, 0.2)",
               borderRadius: 6,
-              background: "white",
               cursor: "grab",
               fontSize: 12,
               lineHeight: 1
@@ -240,7 +250,25 @@ var TreeRow = ({
                   }
                 ) }),
                 /* @__PURE__ */ jsx(TooltipContent, { children: deleteTooltip ?? "Delete item" })
-              ] }) : null
+              ] }) : null,
+              hasAdditionalActionsMenu ? /* @__PURE__ */ jsx(
+                Menu,
+                {
+                  align: "end",
+                  open: additionalMenuOpen,
+                  onOpenChange: setAdditionalMenuOpen,
+                  button: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      isBare: true,
+                      icon: /* @__PURE__ */ jsx(MeatballVertical, { "aria-hidden": "true" }),
+                      "aria-label": "More actions"
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { onClick: () => setAdditionalMenuOpen(false), children: additionalActionsMenu })
+                }
+              ) : null
             ]
           }
         ) : null
@@ -280,7 +308,8 @@ var TreeSortableRow = ({
   addSiblingTooltip,
   canDelete,
   onDelete,
-  deleteTooltip
+  deleteTooltip,
+  additionalActionsMenu
 }) => {
   const {
     attributes,
@@ -343,7 +372,8 @@ var TreeSortableRow = ({
       addSiblingTooltip,
       canDelete,
       onDelete,
-      deleteTooltip
+      deleteTooltip,
+      additionalActionsMenu
     }
   );
 };
@@ -717,7 +747,8 @@ function TreeSelect({
   levelConfig,
   defaultExpanded,
   expanded,
-  onExpandedChange
+  onExpandedChange,
+  renderAdditionalActionsMenu
 }) {
   var _a, _b;
   const [uncontrolledExpandedIds, setExpandedIds] = useState(
@@ -1087,6 +1118,13 @@ function TreeSelect({
           ) : null,
           visibleItems.map((item) => {
             const levelSettings = resolvedLevelConfig(item.depth);
+            const additionalActionsMenu = renderAdditionalActionsMenu == null ? void 0 : renderAdditionalActionsMenu({
+              id: item.id,
+              node: item.node,
+              depth: item.depth,
+              parentId: item.parentId,
+              hasChildren: item.hasChildren
+            });
             return /* @__PURE__ */ jsx3(
               TreeSortableRow,
               {
@@ -1118,7 +1156,8 @@ function TreeSelect({
                 addSiblingTooltip: levelSettings.tooltips.addSibling,
                 canDelete: levelSettings.actions.delete,
                 onDelete: handleDelete,
-                deleteTooltip: levelSettings.tooltips.delete
+                deleteTooltip: levelSettings.tooltips.delete,
+                additionalActionsMenu
               },
               item.id
             );
@@ -1127,10 +1166,10 @@ function TreeSelect({
         /* @__PURE__ */ jsx3(DragOverlay, { children: activeId ? /* @__PURE__ */ jsx3(
           "div",
           {
+            className: "border border-border-subtle bg-bg-base text-fg-base",
             style: {
               padding: "6px 8px",
               borderRadius: 6,
-              background: "white",
               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
@@ -1140,6 +1179,13 @@ function TreeSelect({
     }
   ) : /* @__PURE__ */ jsx3("div", { ref: listRef, style: { position: "relative" }, children: visibleItems.map((item) => {
     const levelSettings = resolvedLevelConfig(item.depth);
+    const additionalActionsMenu = renderAdditionalActionsMenu == null ? void 0 : renderAdditionalActionsMenu({
+      id: item.id,
+      node: item.node,
+      depth: item.depth,
+      parentId: item.parentId,
+      hasChildren: item.hasChildren
+    });
     return /* @__PURE__ */ jsx3(
       TreeRow,
       {
@@ -1170,7 +1216,8 @@ function TreeSelect({
         addSiblingTooltip: levelSettings.tooltips.addSibling,
         canDelete: levelSettings.actions.delete,
         onDelete: handleDelete,
-        deleteTooltip: levelSettings.tooltips.delete
+        deleteTooltip: levelSettings.tooltips.delete,
+        additionalActionsMenu
       },
       item.id
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/tree-select",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -29,6 +29,7 @@
     "@edux-design/buttons": "*",
     "@edux-design/forms": "*",
     "@edux-design/icons": "*",
+    "@edux-design/menus": "*",
     "@edux-design/tooltips": "*",
     "@edux-design/utils": "*"
   },