@keenmate/svelte-treeview 4.2.1 → 4.3.1

package/dist/components/Tree.svelte

@@ -69,7 +69,7 @@
 		onNodeDragStart?: (node: LTreeNode<T>, event: DragEvent) => void;
 		onNodeDragOver?: (node: LTreeNode<T>, event: DragEvent) => void;
 		onNodeDrop?: (node: LTreeNode<T>, draggedNode: LTreeNode<T>, event: DragEvent) => void;
-		contextMenuCallback?: (node: LTreeNode<T>) => ContextMenuItem[];
+		contextMenuCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[];
 
 		// VISUALS
 		bodyClass?: string | null | undefined;
@@ -178,6 +178,13 @@
 		return tree?.searchNodes(searchText, searchOptions) || [];
 	}
 
+	// svelte-ignore non_reactive_update
+	export function closeContextMenu() {
+		contextMenuVisible = false;
+		contextMenuNode = null;
+		isDebugMenuActive = false;
+	}
+
 	export async function scrollToPath(
 		path: string,
 		options?: { expand?: boolean; highlight?: boolean; scrollOptions?: ScrollIntoViewOptions }
@@ -325,11 +332,6 @@
 		isDebugMenuActive = false; // This is a user-triggered menu, not debug menu
 	}
 
-	function closeContextMenu() {
-		contextMenuVisible = false;
-		contextMenuNode = null;
-		isDebugMenuActive = false;
-	}
 
 	function _onNodeDragStart(node: LTreeNode<T>, event: DragEvent) {
 		draggedNode = node;
@@ -529,15 +531,23 @@
 	{#if contextMenuVisible && contextMenuNode}
 		<div class="ltree-context-menu" style="left: {contextMenuX}px; top: {contextMenuY}px;">
 			{#if contextMenuCallback}
-				{@const menuItems = contextMenuCallback(contextMenuNode)}
+				{@const menuItems = contextMenuCallback(contextMenuNode, closeContextMenu)}
 				{#each menuItems as item}
 					{#if item.isDivider}
 						<div class="ltree-context-menu-divider"></div>
 					{:else}
 						<div
-							class="ltree-context-menu-item"
+							class="ltree-context-menu-item {item.className || ''}"
 							class:ltree-context-menu-item-disabled={item.isDisabled}
-							onclick={() => !item.isDisabled && item.callback()}
+							onclick={async () => {
+								if (!item.isDisabled) {
+									try {
+										await item.callback();
+									} catch (error) {
+										console.error('Context menu callback error:', error);
+									}
+								}
+							}}
 						>
 							{#if item.icon}
 								<span class="ltree-context-menu-icon">{item.icon}</span>

package/dist/components/Tree.svelte.d.ts

@@ -43,7 +43,7 @@ declare function $$render<T>(): {
         onNodeDragStart?: (node: LTreeNode<T>, event: DragEvent) => void;
         onNodeDragOver?: (node: LTreeNode<T>, event: DragEvent) => void;
         onNodeDrop?: (node: LTreeNode<T>, draggedNode: LTreeNode<T>, event: DragEvent) => void;
-        contextMenuCallback?: (node: LTreeNode<T>) => ContextMenuItem[];
+        contextMenuCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[];
         bodyClass?: string | null | undefined;
         selectedNodeClass?: string | null | undefined;
         dragOverNodeClass?: string | null | undefined;
@@ -62,6 +62,7 @@ declare function $$render<T>(): {
         collapseAll: (nodePath?: string | null | undefined) => void;
         filterNodes: (searchText: string, searchOptions?: SearchOptions) => void;
         searchNodes: (searchText: string | null | undefined, searchOptions?: SearchOptions) => LTreeNode<T>[];
+        closeContextMenu: () => void;
         scrollToPath: (path: string, options?: {
             expand?: boolean;
             highlight?: boolean;
@@ -84,6 +85,7 @@ declare class __sveltets_Render<T> {
         collapseAll: (nodePath?: string | null | undefined) => void;
         filterNodes: (searchText: string, searchOptions?: SearchOptions) => void;
         searchNodes: (searchText: string | null | undefined, searchOptions?: SearchOptions) => LTreeNode<T>[];
+        closeContextMenu: () => void;
         scrollToPath: (path: string, options?: {
             expand?: boolean;
             highlight?: boolean;

package/dist/ltree/types.d.ts

@@ -5,8 +5,9 @@ export interface ContextMenuItem {
     icon?: string;
     title: string;
     isDisabled?: boolean;
-    callback: () => void;
+    callback: () => void | Promise<void>;
     isDivider?: boolean;
+    className?: string;
 }
 export interface InsertArrayResult<T> {
     successful: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.2.1",
+	"version": "4.3.1",
 	"scripts": {
 		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",