@keenmate/svelte-treeview 1.1.0-beta.1 → 1.1.0-beta.2

package/dist/Branch.svelte

@@ -21,7 +21,7 @@ export let draggedNode;
 export let highlightedNode;
 export let insertionType;
 export let focusedNode;
-export let useKeyboardNavigation;
+export let allowKeyboardNavigation;
 let liElements = {};
 const getNodeId = (node) => `${treeId}-${node.path}`;
 $: directChildren = helper.getDirectChildren(tree, branchRootNode?.path ?? null);
@@ -101,7 +101,7 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 			on:dragleave|stopPropagation={(e) => handleDragLeave(e, node, liElements[getNodeId(node)])}
 			bind:this={liElements[getNodeId(node)]}
 			on:keydown={(e) => handleKeyPress(e, node)}
-			tabindex={useKeyboardNavigation ? 1 : -1}
+			tabindex={allowKeyboardNavigation ? 1 : -1}
 		>
 			{#if effectiveHighlight == InsertionType.insertAbove}
 				<div class="insert-line-wrapper">
@@ -179,7 +179,7 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 					{highlightedNode}
 					{insertionType}
 					{focusedNode}
-					{useKeyboardNavigation}
+					{allowKeyboardNavigation}
 					on:open-ctxmenu
 					on:internal-expand
 					on:internal-selectionChanged

package/dist/Branch.svelte.d.ts

@@ -21,7 +21,7 @@ declare const __propDef: {
         highlightedNode: Node | null;
         insertionType: InsertionType;
         focusedNode: Node | null;
-        useKeyboardNavigation: boolean;
+        allowKeyboardNavigation: boolean;
     };
     events: {
         'open-ctxmenu': CustomEvent<any>;

package/dist/TreeView.svelte

@@ -147,7 +147,6 @@ export function expandToNode(nodePath) {
     }
     const parents = helper.getParents(computedTree, targetNode);
     debugLog("expanding to node '" + nodePath + "'" + ' parents', parents);
-    console.log('parents', parents);
     expandedIds = uniq([...expandedIds, ...parents.map((node) => node.id)]);
 }
 export function setNodeExpansion(nodePath, changeTo) {
@@ -333,9 +332,19 @@ function onKeyPress(detail) {
             onExpand({ node: node, changeTo: setExpansion });
         }
         dispatch('focus', node);
+        return;
     }
     if (event.key === 'Enter' || event.key === ' ') {
         onSelectionChanged({ node: targetNode });
+        return;
+    }
+    if (event.key === 'Escape') {
+        focusedNode = null;
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+        dispatch('focus-leave');
+        return;
     }
 }
 function debugLog(...data) {

package/dist/TreeView.svelte.d.ts

@@ -99,6 +99,7 @@ declare const __propDef: {
         unselected: CustomEvent<any>;
         moved: CustomEvent<any>;
         focus: CustomEvent<any>;
+        'focus-leave': CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/constants.js

@@ -22,4 +22,12 @@ export const defaultClasses = {
 export const defaultConfig = {
     separator: '.'
 };
-export const capturedKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', ' '];
+export const capturedKeys = [
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Enter',
+    ' ',
+    'Escape'
+];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "1.1.0-beta.1",
+	"version": "1.1.0-beta.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",