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

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) {
@@ -177,9 +176,11 @@ export function focusFirstNode() {
     const rootChildren = helper.getDirectChildren(computedTree, null);
     if (rootChildren.length === 0) {
         focusedNode = null;
-        return;
+        return null;
     }
     focusedNode = rootChildren[0];
+    dispatch('focus', focusedNode);
+    return focusedNode;
 }
 function computeTree(helper, selectionProvider, userProvidedTree, filter, props, expandedIds, value) {
     if (!Array.isArray(userProvidedTree) || !Array.isArray(value)) {
@@ -333,9 +334,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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes as SelectionModes, type Props, type CustomizableClasses, type DragEnterCallback, type ExpandedCallback, type NodeId, type ProvidedTree, type FilterFunction } from './types.js';
+import { SelectionModes as SelectionModes, type Node, type Props, type CustomizableClasses, type DragEnterCallback, type ExpandedCallback, type NodeId, type ProvidedTree, type FilterFunction } from './types.js';
 declare const __propDef: {
     props: {
         treeId: string;
@@ -87,9 +87,10 @@ declare const __propDef: {
         setNodeExpansion?: ((nodePath: string, changeTo: boolean) => void) | undefined;
         setExpansions?: ((expansions: NodeId[]) => void) | undefined;
         focusNode?: ((nodePath: string | null) => void) | undefined;
-        focusFirstNode?: (() => void) | undefined;
+        focusFirstNode?: (() => Node | null) | undefined;
     };
     events: {
+        focus: CustomEvent<any>;
         expansion: CustomEvent<any>;
         expanded: CustomEvent<any>;
         closed: CustomEvent<any>;
@@ -98,7 +99,7 @@ declare const __propDef: {
         selected: CustomEvent<any>;
         unselected: CustomEvent<any>;
         moved: CustomEvent<any>;
-        focus: CustomEvent<any>;
+        'focus-leave': CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -121,6 +122,6 @@ export default class TreeView extends SvelteComponent<TreeViewProps, TreeViewEve
     get setNodeExpansion(): (nodePath: string, changeTo: boolean) => void;
     get setExpansions(): (expansions: NodeId[]) => void;
     get focusNode(): (nodePath: string | null) => void;
-    get focusFirstNode(): () => void;
+    get focusFirstNode(): () => Node | null;
 }
 export {};

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.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",