From 2062f9c17da9b1886ff5330f2e8f6f1363509b8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roberto=20Pi=C3=B1on?= <rpinon@hearsaycorp.com>
Date: Thu, 21 Nov 2024 16:04:44 -0600
Subject: [PATCH 1/2] chore: add render item prop

---
 src/SortableTree/SortableTree.tsx                 | 13 ++++++++++++-
 src/SortableTree/components/TreeItem/TreeItem.tsx |  3 +++
 src/SortableTree/types.ts                         |  8 ++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/SortableTree/SortableTree.tsx b/src/SortableTree/SortableTree.tsx
index 5d879cf..56c1ba7 100644
--- a/src/SortableTree/SortableTree.tsx
+++ b/src/SortableTree/SortableTree.tsx
@@ -84,6 +84,7 @@ function PrivateSortableTree({
   onAddItem,
   onDragEnd,
   onItemClick,
+  renderItem,
 }: SortableTreeProps) {
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
   const [overId, setOverId] = useState<UniqueIdentifier | null>(null);
@@ -339,7 +340,16 @@ function PrivateSortableTree({
     >
       <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
         {flattenedItems.map(
-          ({ id, label, children, collapsed, depth, canFetchChildren, disableDragging }) => (
+          ({
+            id,
+            label,
+            children,
+            collapsed,
+            depth,
+            canFetchChildren,
+            disableDragging,
+            ...rest
+          }) => (
             <SortableTreeItem
               key={id}
               id={id}
@@ -359,6 +369,7 @@ function PrivateSortableTree({
               }
               onAdd={allowNestedItemAddition ? () => onAddItem?.(id) : undefined}
               onLabelClick={onItemClick ? () => onItemClick(id) : undefined}
+              renderedItem={renderItem?.({ id, label, children, ...rest })}
             />
           ),
         )}
diff --git a/src/SortableTree/components/TreeItem/TreeItem.tsx b/src/SortableTree/components/TreeItem/TreeItem.tsx
index 0afef50..661bafc 100644
--- a/src/SortableTree/components/TreeItem/TreeItem.tsx
+++ b/src/SortableTree/components/TreeItem/TreeItem.tsx
@@ -24,6 +24,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
   onAdd?(): void;
   onLabelClick?(): void;
   wrapperRef?(node: HTMLLIElement): void;
+  renderedItem?: React.ReactNode;
 }
 
 export const _TreeItem = forwardRef<HTMLDivElement, Props>(
@@ -47,6 +48,7 @@ export const _TreeItem = forwardRef<HTMLDivElement, Props>(
       style,
       value,
       wrapperRef,
+      renderedItem,
       ...props
     },
     ref,
@@ -82,6 +84,7 @@ export const _TreeItem = forwardRef<HTMLDivElement, Props>(
           <span onClick={onLabelClick} className={styles.Text}>
             {value}
           </span>
+          {!clone && renderedItem && renderedItem}
           {!clone && onRemove && <Remove onClick={onRemove} />}
           {!clone && onAdd && <Add onClick={onAdd} />}
           {clone && childCount && childCount > 1 ?
diff --git a/src/SortableTree/types.ts b/src/SortableTree/types.ts
index 60283e3..be28639 100644
--- a/src/SortableTree/types.ts
+++ b/src/SortableTree/types.ts
@@ -135,6 +135,14 @@ export interface SortableTreeProps {
    * @param id - The id of the clicked item.
    */
   onItemClick?: (id: UniqueIdentifier) => void;
+
+  /**
+   * You can place a react component next to the item's label. This is temporal while we
+   * figure out a way of rendering a whole custom item
+   * @param item
+   * @returns
+   */
+  renderItem?: (item: TreeItem) => React.ReactNode;
 }
 
 /**

From 404553c0e6848a7a27c0f4da8a2836b140bcd3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roberto=20Pi=C3=B1on?= <rpinon@hearsaycorp.com>
Date: Thu, 21 Nov 2024 16:06:51 -0600
Subject: [PATCH 2/2] chore: update package.json version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5f4ba6a..5969691 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@clevertask/react-sortable-tree",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@clevertask/react-sortable-tree",
-      "version": "0.0.5",
+      "version": "0.0.6",
       "license": "MIT",
       "dependencies": {
         "@dnd-kit/core": "^6.1.0",
diff --git a/package.json b/package.json
index 688fedf..d805f57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clevertask/react-sortable-tree",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "license": "MIT",
   "author": "CleverTask",