@edux-design/tree-select 0.2.4 → 0.2.5

package/README.md

@@ -179,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.
 
@@ -244,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)
       };
@@ -863,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;
@@ -893,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]);
           }
@@ -954,13 +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 _a2;
+    var _a;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -976,7 +991,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
-    const sourceParentId = ((_a2 = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a2.parentId) ?? null;
+    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);
@@ -1089,8 +1104,8 @@ function TreeSelect({
   );
   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));
     },
@@ -1118,6 +1133,21 @@ function TreeSelect({
   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({
@@ -1206,7 +1236,8 @@ function TreeSelect({
                 canDelete: levelSettings.actions.delete,
                 onDelete: handleDelete,
                 deleteTooltip: levelSettings.tooltips.delete,
-                additionalActionsMenu
+                additionalActionsMenu,
+                renderLabel
               },
               item.id
             );
@@ -1221,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 })
       ]
@@ -1266,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)
       };
@@ -846,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;
@@ -876,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]);
           }
@@ -937,13 +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 _a2;
+    var _a;
     const projection = getDropProjection({
       items: visibleItems,
       activeId,
@@ -959,7 +974,7 @@ function TreeSelect({
       return;
     }
     const { parentId, siblingIndex, projectedDepth } = projection;
-    const sourceParentId = ((_a2 = itemById.get(draggedRootIds[0] ?? activeId)) == null ? void 0 : _a2.parentId) ?? null;
+    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);
@@ -1072,8 +1087,8 @@ function TreeSelect({
   );
   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));
     },
@@ -1101,6 +1116,21 @@ function TreeSelect({
   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({
@@ -1189,7 +1219,8 @@ function TreeSelect({
                 canDelete: levelSettings.actions.delete,
                 onDelete: handleDelete,
                 deleteTooltip: levelSettings.tooltips.delete,
-                additionalActionsMenu
+                additionalActionsMenu,
+                renderLabel
               },
               item.id
             );
@@ -1204,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 })
       ]
@@ -1249,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.4",
+  "version": "0.2.5",
   "private": false,
   "sideEffects": [
     "**/*.css"