@neovici/cosmoz-treenode-navigator 5.0.1 → 5.3.0

package/.github/workflows/workflow.yml

@@ -12,22 +12,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v1
-
-    - name: Use Node.js 14.x
-      uses: actions/setup-node@v1
+      uses: actions/checkout@v2
       with:
-        node-version: 14.x
+          fetch-depth: 0
 
-    - name: Restore npm cache
-      id: node-cache
-      uses: actions/cache@v2
+    - name: Use Node.js
+      uses: actions/setup-node@v2
       with:
-        path: node_modules
-        key: ${{ runner.os }}-node-0-${{ hashFiles('**/package-lock.json') }}
+        node-version: 16.x
+        cache: 'npm'
 
     - name: Install
-      if: steps.node-cache.outputs.cache-hit != 'true'
       run: npm ci
 
     - name: Lint commit messages

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [5.3.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.2.0...v5.3.0) (2022-08-01)
+
+
+### Bug Fixes
+
+* close on enter ([e7cd4d1](https://github.com/neovici/cosmoz-treenode-navigator/commit/e7cd4d191abdf1b9486a5d097154f530130d4a96))
+* **cosmoz-treenode-button-view:** pass opened to treenode ([4f43ade](https://github.com/neovici/cosmoz-treenode-navigator/commit/4f43ade0844fe5168cf84f6f7833dc61a608e176))
+* **renderLevel:** handle leaf nodes ([760f6bf](https://github.com/neovici/cosmoz-treenode-navigator/commit/760f6bf4888ccbec0184ca72ea21ab4781e66f46))
+
+
+### Features
+
+* **treenode-navigator:** autoscroll to highlighed node ([5c55a38](https://github.com/neovici/cosmoz-treenode-navigator/commit/5c55a38ad406b3d711405b8173c388fb26d5eb6c))
+
+# [5.2.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.1.0...v5.2.0) (2022-08-01)
+
+
+### Features
+
+* **cosmoz-treenode-navigator:** improve performance ([ac12d74](https://github.com/neovici/cosmoz-treenode-navigator/commit/ac12d74345501e34cdccde6962563a24d6efed4f))
+
+# [5.1.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.0.1...v5.1.0) (2022-07-28)
+
+
+### Bug Fixes
+
+* **ci:** worflow typo ([17b92aa](https://github.com/neovici/cosmoz-treenode-navigator/commit/17b92aa332f0411b6548729002fd9cf62a99d223))
+
+
+### Features
+
+* **cosmoz-treenode-navigator:** add keyboard navigation ([26b6d42](https://github.com/neovici/cosmoz-treenode-navigator/commit/26b6d42d99737d0b48a7fbc21a8677117b1d8a9e))
+* refactor with lit-virtualizer instead of listbox ([7b69ab4](https://github.com/neovici/cosmoz-treenode-navigator/commit/7b69ab4e0e049c9c7f8e03c3b781f02fab83eb18))
+* support `Right` key ([28a4df6](https://github.com/neovici/cosmoz-treenode-navigator/commit/28a4df6d35bc62ac49aba81135891ce8fcacfa05))
+
 ## [5.0.1](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.0.0...v5.0.1) (2022-07-27)
 
 

package/cosmoz-treenode-button-view.js

@@ -127,7 +127,8 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			<cosmoz-dialog
 				id="dialogTree"
 				class="treeDialog"
-				on-iron-overlay-opened="focusSearch"
+				on-iron-overlay-opened="onOpened"
+				on-iron-overlay-closed="onClosed"
 				modal
 				prerender
 			>
@@ -147,6 +148,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 						nodes-on-node-path="{{ nodesOnNodePath }}"
 						on-node-dblclicked="_selectNodeAndCloseDialog"
 						on-select-node="selectNode"
+						opened="[[ opened ]]"
 					>
 						<slot></slot>
 					</cosmoz-treenode-navigator>
@@ -174,13 +176,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		return {
 			multiSelection: {
 				type: Boolean,
-				value: false
+				value: false,
 			},
 			/*
 			 * The main node structure
 			 */
 			tree: {
-				type: Tree
+				type: Tree,
 			},
 			/*
 			 * Currently selected node object
@@ -190,7 +192,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 				value() {
 					return {};
 				},
-				notify: true
+				notify: true,
 			},
 			/**
 			 * Selected nodes
@@ -198,32 +200,40 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			selectedNodes: {
 				type: Array,
 				notify: true,
-				value: () => []
+				value: () => [],
 			},
 			/**
 			 * If true, reset button gets hidden
 			 */
 			noReset: {
 				type: Boolean,
-				value: false
+				value: false,
+			},
+			/**
+			 * If true opened
+			 */
+			opened: {
+				type: Boolean,
+				value: false,
 			},
+
 			/*
 			 * Placeholder for the search field
 			 */
 			searchPlaceholder: {
-				type: String
+				type: String,
 			},
 			/*
 			 * Placeholder for button text
 			 */
 			buttonTextPlaceholder: {
 				type: String,
-				computed: 'getButtonTextPlaceholder(multiSelection)'
+				computed: 'getButtonTextPlaceholder(multiSelection)',
 			},
 
 			buttonText: {
 				type: String,
-				computed: '_getButtonLabel(nodesOnNodePath, buttonTextPlaceholder)'
+				computed: '_getButtonLabel(nodesOnNodePath, buttonTextPlaceholder)',
 			},
 
 			/*
@@ -231,13 +241,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			 */
 			nodePath: {
 				type: String,
-				notify: true
+				notify: true,
 			},
 			/*
 			 * The nodes on the path of the selected node
 			 */
 			nodesOnNodePath: {
-				type: Array
+				type: Array,
 			},
 			/*
 			 * Text displayed when local search has finished
@@ -245,14 +255,14 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			 */
 			searchGlobalPlaceholder: {
 				type: String,
-				value: 'Click to search again but globally.'
+				value: 'Click to search again but globally.',
 			},
 			/*
 			 * Settable text for dialog title.
 			 */
 			dialogText: {
 				type: String,
-				value: 'Search or navigate to chosen destination'
+				value: 'Search or navigate to chosen destination',
 			},
 			/*
 			 * Minimum length before an search
@@ -260,14 +270,14 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			 */
 			searchMinLength: {
 				type: Number,
-				value: 1
+				value: 1,
 			},
 			/*
 			 * Path string of highlighted (focused) node
 			 */
 			highlightedNodePath: {
-				type: String
-			}
+				type: String,
+			},
 		};
 	}
 	/**
@@ -324,8 +334,8 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			return placeholder;
 		}
 		return pathParts
-			.filter(n => n)
-			.map(part => part[this.tree.searchProperty])
+			.filter((n) => n)
+			.map((part) => part[this.tree.searchProperty])
 			.join(' / ');
 	}
 	/**
@@ -348,7 +358,10 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 	 * @returns {void}
 	 */
 	focusSearch() {
-		this.$.dialogTree.paperDialog.querySelector('#treeNavigator').focus();
+		this.$.dialogTree.paperDialog
+			.querySelector('#treeNavigator')
+			.shadowRoot.querySelector('cosmoz-input')
+			.focus();
 	}
 	/**
 	 * Reset the component to make it ready for reuse
@@ -383,7 +396,7 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 		if (this.multiSelection) {
 			if (
 				!this.selectedNodes.some(
-					node => node.pathLocator === this.highlightedNodePath
+					(node) => node.pathLocator === this.highlightedNodePath
 				)
 			) {
 				this.push('selectedNodes', this.selectedNode);
@@ -423,5 +436,13 @@ class CosmozTreenodeButtonView extends translatable(PolymerElement) {
 			}
 		);
 	}
+
+	onOpened() {
+		this.opened = true;
+		this.focusSearch();
+	}
+	onClosed() {
+		this.opened = false;
+	}
 }
 customElements.define(CosmozTreenodeButtonView.is, CosmozTreenodeButtonView);

package/cosmoz-treenode-navigator.js

@@ -1,25 +1,30 @@
-import { component, useEffect, useState, useMemo, useCallback } from 'haunted';
+import {
+	component,
+	useEffect,
+	useState,
+	useMemo,
+	useCallback,
+	useRef,
+} from 'haunted';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
+import { guard } from 'lit-html/directives/guard.js';
+import { ref } from 'lit-html/directives/ref.js';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 
 import '@neovici/cosmoz-input';
-import '@neovici/cosmoz-autocomplete';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 import {
+	getParentPath,
 	computeDataPlane,
 	computeRowClass,
-	computeSearching,
-	getNodeName,
-	hasChildren,
-	nodeStyles,
-	normalizeNodes,
 	onNodeDblClicked,
-	renderLevel,
-	showGlobalSearchBtn
 } from './helpers';
+import styles from './cosmoz-treenode-navigator.styles';
 
-const TreenodeNavigator = host => {
+const TreenodeNavigator = (host) => {
 	const {
 			/**
 			 * The main node structure
@@ -38,16 +43,13 @@ const TreenodeNavigator = host => {
 			 * Minimum length of searchValue to trigger a search
 			 */
 			searchMinLength,
-			nodePath
+			nodePath,
+			opened,
 		} = host,
 		/**
 		 * The path of the opened node
 		 */
 		[openNodePath, setOpenNodePath] = useState(''),
-		/**
-		 * The nodes on the path of the opened node
-		 */
-		[nodesOnOpenNodePath, setNodesOnOpenNodePath] = useState([]),
 		/**
 		 * The highlighted (focused) node
 		 * This is the node which is currently selected in the list
@@ -57,90 +59,42 @@ const TreenodeNavigator = host => {
 		 * The search string
 		 */
 		[searchValue, setSearchValue] = useState(''),
+		search = useMemo(
+			() => (searchValue?.length > searchMinLength && searchValue) || undefined,
+			[searchValue, searchMinLength]
+		),
 		/**
 		 * The currently displayed node list
 		 */
-		dataPlane = useMemo(() => {
-			return computeDataPlane(
-				computeSearching(searchValue, searchMinLength),
-				searchValue,
-				renderLevel(openNodePath, tree),
-				tree
-			);
-		}, [tree, openNodePath, highlightedNode, searchValue]),
+		dataPlane = useMemo(
+			() => computeDataPlane(tree, search, openNodePath),
+			[tree, search, openNodePath]
+		),
 		/**
 		 * Opens a node (renderLevel) based on a given path
 		 * @param {object} clickedNode - The clicked node
 		 * @return {undefined}
 		 */
-		openNode = useCallback(clickedNode => {
-			if (hasChildren(clickedNode)) {
-				setOpenNodePath(clickedNode.path);
+		openNode = useCallback(
+			(clickedNode) => {
+				setOpenNodePath(clickedNode?.pathLocator || '');
 				setSearchValue('');
-			}
-			if (!clickedNode) {
-				setOpenNodePath('');
-				setSearchValue('');
-				setHighlightedNode(null);
-			}
-		}, []),
-		/**
-		 * Returns true, if the path of a node should be visible in the view
-		 * @param {Number} index - The node's current index in the list
-		 * @param {Object} parentSectionName - The nodes current parent section name
-		 * @return {Boolean} - If the path should be visible
-		 */
-		renderSection = (index, parentSectionName) => {
-			const _dataPlane = computeDataPlane(
-				computeSearching(searchValue, searchMinLength),
-				searchValue,
-				renderLevel(openNodePath, tree),
-				tree
-			);
-			if (
-				!computeSearching(searchValue, searchMinLength) ||
-				index == null ||
-				_dataPlane == null ||
-				index >= _dataPlane.length ||
-				parentSectionName == null
-			) {
-				return false;
-			}
-			if (index === 0) {
-				return true;
-			}
-			const prevItem = _dataPlane[index - 1];
-			return prevItem.parentSectionName !== parentSectionName;
-		};
+				setHighlightedNode();
+			},
+			[tree]
+		),
+		listRef = useRef();
 
 	useEffect(() => {
 		if (!openNodePath) {
 			notifyProperty(host, 'highlightedNodePath', '');
 			notifyProperty(host, 'nodesOnNodePath', []);
-			return;
-		}
-		setNodesOnOpenNodePath(
-			normalizeNodes(tree.getPathNodes(openNodePath).filter(item => item))
-		);
-	}, [openNodePath]);
-
-	useEffect(() => {
-		if (!openNodePath) {
-			notifyProperty(host, 'highlightedNodePath', '');
-			return;
 		}
-		setNodesOnOpenNodePath(
-			normalizeNodes(tree.getPathNodes(openNodePath).filter(item => item))
-		);
 	}, [openNodePath]);
 
 	useEffect(() => {
 		if (nodePath !== undefined) {
-			host.dispatchEvent(
-				new CustomEvent('select-node', {
-					detail: {}
-				})
-			);
+			host.dispatchEvent(new CustomEvent('select-node'));
 		}
 	}, [nodePath]);
 
@@ -148,77 +102,143 @@ const TreenodeNavigator = host => {
 		notifyProperty(
 			host,
 			'highlightedNodePath',
-			!highlightedNode ? '' : highlightedNode.path
+			highlightedNode?.pathLocator || ''
 		);
 	}, [highlightedNode]);
 
-	return html`
-		<style>
-			:host {
-				--cosmoz-treenode-navigator-select-node-icon-color: var(
-					--primary-color,
-					white
-				);
-				--cosmoz-treenode-navigator-list-item-focused-color: #f0f8ff;
-			}
+	const meta = useMeta({ dataPlane, highlightedNode, openNode });
 
-			#header {
-				margin: 0 16px;
-			}
+	useEffect(() => {
+		if (!opened) {
+			return;
+		}
 
-			#header a {
-				text-decoration: none;
-				color: inherit;
-			}
+		const getVlist = () => {
+				const list = listRef.current,
+					vlist = list[Object.getOwnPropertySymbols(list)[0]];
+				return vlist;
+			},
+			// eslint-disable-next-line max-lines-per-function, max-statements
+			handler = (e) => {
+				if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
+					return;
+				}
+				const {
+						dataPlane: items,
+						highlightedNode: node,
+						openNode: open,
+					} = meta,
+					vlist = getVlist(),
+					getIndex = () =>
+						items.findIndex((i) => i.pathLocator === node?.pathLocator);
 
-			.icon {
-				display: inline-block;
-				position: relative;
-				padding: 8px;
-				outline: none;
-				user-select: none;
-				cursor: pointer;
-				z-index: 0;
-				line-height: 1;
-				width: 40px;
-				height: 40px;
-				box-sizing: border-box;
-			}
+				switch (e.key) {
+					case 'Up':
+					case 'ArrowUp':
+						{
+							const idx = getIndex(),
+								nidx = Math.max(idx - 1, 0);
+							e.preventDefault();
+							setHighlightedNode(items[nidx]);
+							if (nidx < vlist._firstVisible) {
+								vlist.scrollToIndex = { index: nidx, position: 'start' };
+							}
+						}
+						break;
+					case 'Down':
+					case 'ArrowDown':
+						{
+							const idx = getIndex();
+							if (idx < items.length - 1) {
+								const nidx = idx + 1;
+								e.preventDefault();
+								setHighlightedNode(items[nidx]);
+								if (nidx > vlist._lastVisible) {
+									vlist.scrollToIndex = { index: nidx, position: 'end' };
+								}
+							}
+						}
+						break;
 
-			.path {
-				display: flex;
-				align-items: center;
-				flex-wrap: wrap;
-			}
+					case 'Enter':
+						if (node) {
+							e.preventDefault();
+							host.dispatchEvent(new CustomEvent('node-dblclicked'));
+						}
+						break;
 
-			.slash {
-				margin: 0 2px;
-			}
+					case 'Right':
+					case 'ArrowRight':
+						if (node && tree.hasChildren(node)) {
+							e.preventDefault();
+							open(node);
+						}
+						break;
+					default:
+						break;
+				}
+			};
 
-			.pointer {
-				cursor: pointer;
-			}
+		// autoscroll on open
+		(() => {
+			getVlist().scrollToIndex = {
+				index: meta.dataPlane?.indexOf(meta.highlightedNode),
+				position: 'center',
+			};
+		})();
 
-			cosmoz-listbox {
-				box-shadow: none;
-				display: block;
-				height: var(--cosmoz-treenode-navigator-list-height, 50vh);
-				position: static;
-				width: 100%;
-			}
+		document.addEventListener('keydown', handler, true);
+		return () => document.removeEventListener('keydown', handler, true);
+	}, [opened, meta]);
 
-			.btn-ghost {
-				background: transparent;
-				border: none;
-				cursor: pointer;
-				margin: 0 0.29em;
-				padding: 0.7em 0.57em;
-				text-transform: uppercase;
-			}
+	const renderItem = (node, index) => html` <div class="item">
+		${((parentPath) =>
+			when(
+				search &&
+					(index === 0 ||
+						parentPath !== getParentPath(tree, dataPlane[index - 1])),
+				() =>
+					html`
+						<div class="section">
+							${tree.getPathString(parentPath, tree.searchProperty)}
+						</div>
+					`
+			))(getParentPath(tree, node))}
+		<div
+			class=${computeRowClass('node', node, highlightedNode)}
+			@click=${() => setHighlightedNode(node)}
+			@dblclick=${(e) => onNodeDblClicked(e, host)}
+		>
+			<div class="name">${node[tree.searchProperty]}</div>
+			${when(
+				tree.hasChildren(node),
+				() => html`
+					<span class="icon" @click=${() => openNode(node)}>
+						<svg
+							viewBox="0 0 24 24"
+							preserveAspectRatio="xMidYMid meet"
+							focusable="false"
+							style="pointer-events: none; display: block; width: 100%; height: 100%;"
+						>
+							<g>
+								<path
+									d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+								></path>
+							</g>
+						</svg>
+					</span>
+				`
+			)}
+		</div>
+	</div>`;
+
+	return html`
+		<style>
+			${styles}
 		</style>
-		<div id="header">
+		<div class="header">
 			<h3 class="path">
-				<span class="icon" @click=${ () => openNode() }>
+				<span class="icon" @click=${() => openNode()}>
 					<svg
 						viewBox="0 0 24 24"
 						preserveAspectRatio="xMidYMid meet"
@@ -228,83 +248,43 @@ const TreenodeNavigator = host => {
 						<g><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
 					</svg>
 				</span>
-				${ nodesOnOpenNodePath.map(node => {
-		return html` <span class="slash">/</span>
-						<span class="pointer" tabindex="0" @click="${ () => openNode(node) }"
-							>${ getNodeName(node) }</span
-						>`;
-	}) }
+				${guard([tree, openNodePath], () =>
+					((openNodePath && tree.getPathNodes(openNodePath)) || []).map(
+						(node) => html`
+							<span class="slash">/</span>
+							<span class="pointer" tabindex="0" @click=${() => openNode(node)}
+								>${node[tree.searchProperty]}</span
+							>
+						`
+					)
+				)}
 			</h3>
 			<cosmoz-input
 				tabindex="0"
-				.value=${ searchValue }
-				.placeholder="${ searchPlaceholder }"
-				@input="${ ({ target }) => setSearchValue(target.value) }"
+				.value=${searchValue}
+				.placeholder=${searchPlaceholder}
+				@input=${(e) => setSearchValue(e.target.value)}
 			/>
 		</div>
-		${ when(
-		tree,
-		() => html`
-			<cosmoz-listbox
-					.query="${ searchValue }"
-					.items="${ dataPlane }"
-					.textual="${ item => item.name }"
-					.itemRenderer=${ (node, index) => html`
-						<div class="node-item-wrapper">
-							<style>
-								${ nodeStyles }
-							</style>
-							${ when(
-		renderSection(index, node.parentSectionName),
-		() => html`
-									<div class="section">${ node.parentSectionName }</div>
-								`
-	) }
-							<div
-								class="${ computeRowClass(
-		'node-item pointer',
-		node,
-		highlightedNode
-	) }"
-								@click="${ () => setHighlightedNode(node) }"
-								@dblclick="${ e => onNodeDblClicked(e, host) }"
-							>
-								<div style="flex: auto">${ node.name }</div>
-								${ when(
-		hasChildren(node),
-		() => html`
-										<span class="icon" @click="${ () => openNode(node) }">
-											<svg
-												viewBox="0 0 24 24"
-												preserveAspectRatio="xMidYMid meet"
-												focusable="false"
-												style="pointer-events: none; display: block; width: 100%; height: 100%;"
-											>
-												<g>
-													<path
-														d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-													></path>
-												</g>
-											</svg>
-										</span>
-									`
-	) }
-							</div>
-						</div>
-					` }
-			</cosmoz-listbox>`
-	) }
-		${ when(
-		showGlobalSearchBtn(
-			computeSearching(searchValue, searchMinLength),
-			openNodePath
-		),
-		() => html`
-				<button class="btn-ghost" @click="${ () => setOpenNodePath('') }">
-					${ searchGlobalPlaceholder }
+		${when(
+			tree,
+			() => html` <div class="items" ${ref((el) => (listRef.current = el))}>
+				<div virtualizer-sizer></div>
+				${virtualize({
+					items: dataPlane,
+					renderItem,
+					scroller: true,
+				})}
+			</div>`
+		)}
+		${when(
+			search && openNodePath,
+			() => html`
+				<button class="btn-ghost" @click=${() => setOpenNodePath('')}>
+					${searchGlobalPlaceholder}
 				</button>
 			`
-	) }
+		)}
 	`;
 };
 

package/cosmoz-treenode-navigator.styles.js

@@ -0,0 +1,119 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+
+export default css`
+	:host {
+		--cosmoz-treenode-navigator-select-node-icon-color: var(
+			--primary-color,
+			white
+		);
+		--cosmoz-treenode-navigator-list-item-focused-color: #f0f8ff;
+	}
+
+	.header {
+		margin: 0 16px;
+	}
+
+	.header a {
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.icon {
+		display: inline-block;
+		position: relative;
+		padding: 8px;
+		outline: none;
+		user-select: none;
+		cursor: pointer;
+		z-index: 0;
+		line-height: 1;
+		width: 40px;
+		height: 40px;
+		box-sizing: border-box;
+	}
+
+	.path {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.slash {
+		margin: 0 2px;
+	}
+
+	.pointer {
+	}
+
+	.items {
+		height: var(--cosmoz-treenode-navigator-list-height, 50vh);
+		width: 100%;
+	}
+
+	.section {
+		background-color: #f5f5f5;
+		padding: 5px;
+	}
+
+	.pointer {
+		cursor: pointer;
+	}
+
+	.item {
+		width: 100%;
+	}
+
+	.node {
+		align-items: center;
+		display: flex;
+		font-family: 'Roboto', 'Noto', sans-serif;
+		font-size: 16px;
+		font-weight: 400;
+		height: 40px;
+		line-height: 24px;
+		padding: 6px 12px;
+		cursor: pointer;
+	}
+	.name {
+		flex: auto;
+	}
+	.icon {
+		box-sizing: border-box;
+		cursor: pointer;
+		display: inline-block;
+		height: 40px;
+		line-height: 1;
+		outline: none;
+		padding: 8px;
+		position: relative;
+		user-select: none;
+		width: 40px;
+		z-index: 0;
+	}
+
+	.node.selected {
+		background-color: var(
+			--cosmoz-listbox-active-color,
+			var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
+		);
+		transition: background-color 0.2s ease-out;
+	}
+
+	.node.selected .icon svg {
+		fill: var(--cosmoz-treenode-navigator-select-node-icon-color);
+		transition: color 0.8s ease-out;
+	}
+
+	.btn-ghost {
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		margin: 0 20px;
+		padding: 0.7em 0.57em;
+		width: calc(100% - 50px);
+		border: solid 1px #a4abae;
+		border-radius: 16px;
+		font-size: 14px;
+		font-family: inherit;
+	}
+`;

package/helpers.js

@@ -1,93 +1,37 @@
-import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
-import basicTree from './test/data/basicTree';
-import { tagged as css } from '@neovici/cosmoz-utils';
-
-const tree = new DefaultTree(basicTree),
-	/**
-	 * Returns true if a given node has children
-	 * @param {Object} node - The node
-	 * @return {Boolean} - True if node has children
-	 */
-	hasChildren = node => {
-		return tree.hasChildren(node);
-	},
-	/**
-	 * Returns true, if a search string is eligable to trigger a search
-	 * @param {String} value - The search string
-	 * @param {Number} searchMinLength - The minimum length of value to be valid
-	 * @return {Boolean} - If a search should be triggered
-	 */
-	computeSearching = (value, searchMinLength) => {
-		return value && value.length >= searchMinLength && value !== '';
-	},
-	/**
-	 * Normalizes and returns an Array of nodes
-	 * with the properties name, path, parentSectionName, children
-	 * @param {Array} nodes - The input nodes
-	 * @return {Array} - The normalized nodes
-	 */
-	normalizeNodes = nodes => {
-		if (!Array.isArray(nodes)) {
-			return [];
-		}
-		return nodes.map(node => {
-			if (!node) {
-				return node;
-			}
-			const path = node.pathLocator || node.path,
-				pathLocatorSeparator = tree.pathLocatorSeparator,
-				parentPath = path.includes(pathLocatorSeparator) ? path.substring(0, path.lastIndexOf(pathLocatorSeparator)) : path;
-			return {
-				name: node[tree.searchProperty],
-				path,
-				children: node[tree.childProperty],
-				parentSectionName: tree.getPathString(parentPath, tree.searchProperty),
-				id: node.id,
-				pathLocator: node.pathLocator
-			};
-		});
-	},
-	/**
-	 * Returns the found nodes based on a search string and a given tree to be searched
-	 * @param {Boolean} searching - If true, a search should be executed
-	 * @param {String} searchString - The search string
-	 * @param {Array} renderedLevel - The node list on which the search should be executed
-	 * @param {Tree} tree - The main tree
-	 * @return {Array} - The found nodes
-	 */
-	computeDataPlane = (searching, searchString, renderedLevel, tree) => {
-		if (searching && tree) {
-			const results = tree.searchNodes(searchString, renderedLevel, false);
-			return normalizeNodes(results);
-		}
-		return renderedLevel;
+export const //
+	getParentPath = (tree, node) => {
+		const path = node.pathLocator || node.path,
+			pathLocatorSeparator = tree.pathLocatorSeparator;
+		return path.includes(pathLocatorSeparator)
+			? path.substring(0, path.lastIndexOf(pathLocatorSeparator))
+			: path;
 	},
 	/**
 	 * Returns a node array with the children of a node on the given path
 	 * If the node doesn't have children, the node gets returned
-	 * @param {String} pathLocator - The separated address parts of a node
 	 * @param {Tree} tree - The main tree
+	 * @param {String} pathLocator - The separated address parts of a node
 	 * @return {Array} - Nodes
 	 */
-	renderLevel = (pathLocator, tree) => {
+	renderLevel = (tree, pathLocator) => {
 		if (!tree) {
 			return;
 		}
 		const node = tree.getNodeByPathLocator(pathLocator),
 			children = tree.getChildren(node),
-			level = tree.hasChildren(node) ? children : node,
+			searchProperty = tree.searchProperty,
 			sortFunc = (a, b) => {
 				// First sort based on "folder" status (containing children)
-				if (hasChildren(a)) {
-					if (!hasChildren(b)) {
+				if (tree.hasChildren(a)) {
+					if (!tree.hasChildren(b)) {
 						return -1;
 					}
-				} else if (hasChildren(b)) {
+				} else if (tree.hasChildren(b)) {
 					return 1;
 				}
 				// Then sort on searchProperty
-				const val1 = a[tree.searchProperty],
-					val2 = b[tree.searchProperty];
+				const val1 = a[searchProperty],
+					val2 = b[searchProperty];
 
 				if (val1 > val2) {
 					return 1;
@@ -97,8 +41,21 @@ const tree = new DefaultTree(basicTree),
 				}
 				return 0;
 			};
-		return normalizeNodes(level)
-			.sort(sortFunc);
+		return children.length > 0 ? children.sort(sortFunc) : node;
+	},
+	/**
+	 * Returns the found nodes based on a search string and a given tree to be searched
+	 * @param {Tree} tree - The main tree
+	 * @param {String|undefined} search - The search string
+	 * @param {String} pathLocator - The separated address parts of a node
+	 * @return {Array} - The found nodes
+	 */
+	computeDataPlane = (tree, search, pathLocator) => {
+		if (!tree) {
+			return [];
+		}
+		const nodes = renderLevel(tree, pathLocator);
+		return search ? tree.searchNodes(search, nodes, false) : nodes;
 	},
 	/**
 	 * Returns the classes of a row based its selection state
@@ -110,9 +67,10 @@ const tree = new DefaultTree(basicTree),
 	computeRowClass = (classes, node, highlightedNode) => {
 		let selected = false;
 		if (highlightedNode) {
-			selected = node === highlightedNode
-							|| node.id && node.id === highlightedNode.id
-							|| node.pathLocator === highlightedNode.pathLocator;
+			selected =
+				node === highlightedNode ||
+				(node.id && node.id === highlightedNode.id) ||
+				node.pathLocator === highlightedNode.pathLocator;
 		}
 		return selected ? classes + ' selected' : classes;
 	},
@@ -123,28 +81,13 @@ const tree = new DefaultTree(basicTree),
 	 * @return {undefined}
 	 */
 	onNodeDblClicked = (event, host) => {
-		host.dispatchEvent(new CustomEvent('node-dblclicked', {
-			detail: {
-				model: event.model
-			}
-		}));
-	},
-	/**
-	 * Returns the name of a given node
-	 * @param {Object} node - The node
-	 * @return {String} - The name
-	 */
-	getNodeName = node => {
-		return node[tree.searchProperty];
-	},
-	/**
-	 * Returns true, if the button should be visible
-	 * @param {Boolean} searching - If a search is currently executed
-	 * @param {String} openNodeLevelPath - The open node level
-	 * @return {Boolean} - The visibility of the button
-	 */
-	showGlobalSearchBtn = (searching, openNodeLevelPath) => {
-		return searching && openNodeLevelPath !== '';
+		host.dispatchEvent(
+			new CustomEvent('node-dblclicked', {
+				detail: {
+					model: event.model,
+				},
+			})
+		);
 	},
 	/**
 	 * Returns the nodes on a path specified by a given path locator
@@ -156,7 +99,7 @@ const tree = new DefaultTree(basicTree),
 		if (!tree || !pathLocator) {
 			return [];
 		}
-		return normalizeNodes(tree.getPathNodes(pathLocator));
+		return tree.getPathNodes(pathLocator);
 	},
 	/**
 	 * Returns a node based on a given path locator.
@@ -175,78 +118,7 @@ const tree = new DefaultTree(basicTree),
 		let nodes;
 
 		if (!node) {
-			nodes = tree.getPathNodes(pathLocator).filter(n => n != null);
+			nodes = tree.getPathNodes(pathLocator).filter((n) => n != null);
 		}
 		return nodes && nodes.length > 0 ? nodes.pop() : node;
-	},
-	nodeStyles = css`
-	  .section {
-			background-color: #f5f5f5;
-			padding: 5px;
-	  }
-
-		.pointer {
-			cursor: pointer;
-		}
-
-	  .item {
-			padding: 0;
-	  }
-
-	  .item[data-index] {
-			background: transparent;
-	  }
-
-	  .node-item {
-			align-items: center;
-			display: flex;
-			font-family: 'Roboto', 'Noto', sans-serif;
-			font-size: 16px;
-			font-weight: 400;
-			height: 40px;
-			line-height: 24px;
-			padding: 6px 12px;
-	  }
-
-	  .node-item-wrapper {
-			width: 100%;
-	  }
-
-	  .icon {
-			box-sizing: border-box;
-			cursor: pointer;
-			display: inline-block;
-			height: 40px;
-			line-height: 1;
-			outline: none;
-			padding: 8px;
-			position: relative;
-			user-select: none;
-			width: 40px;
-			z-index: 0;
-	  }
-
-	  .node-item.selected {
-			background-color: var(--cosmoz-listbox-active-color, var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1)));
-			transition: background-color 0.2s ease-out;
-	  }
-
-	  .node-item.selected .icon svg {
-			fill: var(--cosmoz-treenode-navigator-select-node-icon-color);
-			transition: color 0.8s ease-out;
-	  }`;
-
-export {
-	hasChildren,
-	computeSearching,
-	normalizeNodes,
-	renderLevel,
-	computeDataPlane,
-	computeRowClass,
-	onNodeDblClicked,
-	getNodeName,
-	showGlobalSearchBtn,
-	getTreePathParts,
-	getNode,
-	nodeStyles
-};
+	};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-treenode-navigator",
-	"version": "5.0.1",
+	"version": "5.3.0",
 	"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
 	"keywords": [
 		"polymer",
@@ -54,7 +54,7 @@
 		}
 	},
 	"dependencies": {
-		"@neovici/cosmoz-autocomplete": "^5.0.0",
+		"@lit-labs/virtualizer": "^0.7.1",
 		"@neovici/cosmoz-dialog": "^3.0.0",
 		"@neovici/cosmoz-i18next": "^3.2.0",
 		"@neovici/cosmoz-input": "^3.0.0",
@@ -80,9 +80,9 @@
 		"@polymer/test-fixture": "^4.0.2",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"@webcomponents/webcomponentsjs": "^2.0.0",
 		"@web/dev-server": "^0.1.25",
 		"@web/test-runner": "^0.13.19",
+		"@webcomponents/webcomponentsjs": "^2.0.0",
 		"husky": "^8.0.0",
 		"semantic-release": "^19.0.3"
 	}

package/test/cosmoz-treenode-navigator.test.js

@@ -2,18 +2,17 @@ import { assert, fixture, html } from '@open-wc/testing';
 import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
 import basicTree from './data/basicTree.js';
 import '../cosmoz-treenode-navigator';
-import { computeDataPlane, computeSearching, hasChildren, renderLevel } from '../helpers';
+import { computeDataPlane } from '../helpers';
 
 suite('cosmoz-treenode-navigator', () => {
 	let navigator;
 
 	setup(async () => {
-		navigator = await fixture(html`
-			<cosmoz-treenode-navigator
-					.tree=${ new DefaultTree(basicTree) }
-					.searchPlaceholder="${ 'Custom search placeholder' }"
-					.searchMinLength="${ 2 }"
-			>`);
+		navigator = await fixture(html` <cosmoz-treenode-navigator
+			.tree=${new DefaultTree(basicTree)}
+			.searchPlaceholder="${'Custom search placeholder'}"
+			.searchMinLength="${2}"
+		></cosmoz-treenode-navigator>`);
 	});
 
 	test('instantiating the element', () => {
@@ -27,10 +26,9 @@ suite('cosmoz-treenode-navigator', () => {
 		navigator.openNodePath = '1000';
 
 		const dataPlane = computeDataPlane(
-			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.tree,
 			navigator.searchValue,
-			renderLevel(navigator.openNodePath, navigator.tree),
-			navigator.tree
+			navigator.openNodePath
 		);
 		// then I can see the contents of the node
 		// and it is ordered folder-first, then alphabetically
@@ -41,28 +39,35 @@ suite('cosmoz-treenode-navigator', () => {
 
 	test('set proper search placeholder', () => {
 		assert.equal(
-			navigator.shadowRoot.querySelector('cosmoz-input')
-				.shadowRoot
-				.querySelector('input').placeholder,
-			'Custom search placeholder');
-	});
-
-	test('compute search if value is bigger than searchMinLength', () => {
-		assert.equal(computeSearching('long string', navigator.searchMinLength), true);
-		assert.equal(computeSearching('a', navigator.searchMinLength), false);
+			navigator.shadowRoot
+				.querySelector('cosmoz-input')
+				.shadowRoot.querySelector('input').placeholder,
+			'Custom search placeholder'
+		);
 	});
 
 	test('should check if node has children', () => {
 		const node = {
 			name: 'D:',
 			path: '1000',
-			children: { 1001: { name: 'Data', pathLocator: '1000.1001', children: { 1002: { name: 'John', pathLocator: '1000.1001.1002' }}}},
+			children: {
+				1001: {
+					name: 'Data',
+					pathLocator: '1000.1001',
+					children: { 1002: { name: 'John', pathLocator: '1000.1001.1002' } },
+				},
+			},
 			parentSectionName: 'D:',
-			pathLocator: '1000'
+			pathLocator: '1000',
 		};
-		assert.equal(hasChildren(node), true);
-		const node2 = { name: 'Git', path: '1.5.7', parentSectionName: 'C:/Program Files', pathLocator: '1.5.7' };
-		assert.equal(hasChildren(node2), false);
+		assert.equal(navigator.tree.hasChildren(node), true);
+		const node2 = {
+			name: 'Git',
+			path: '1.5.7',
+			parentSectionName: 'C:/Program Files',
+			pathLocator: '1.5.7',
+		};
+		assert.equal(navigator.tree.hasChildren(node2), false);
 	});
 
 	test('match search string', () => {
@@ -71,16 +76,14 @@ suite('cosmoz-treenode-navigator', () => {
 		navigator.searchValue = 'John';
 
 		const dataPlane = computeDataPlane(
-			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.tree,
 			navigator.searchValue,
-			renderLevel('1000', navigator.tree),
-			navigator.tree
+			'1000'
 		);
 
 		//then I can see only 1 item matching 'John'
 		assert.lengthOf(dataPlane, 1);
 		assert.equal(dataPlane[0].name, 'John');
-
 	});
 
 	test('not match search string', () => {
@@ -88,10 +91,9 @@ suite('cosmoz-treenode-navigator', () => {
 		// when I search for 'NONEXISTING'
 		navigator.searchValue = 'NONEXISTING';
 		const dataPlane = computeDataPlane(
-			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.tree,
 			navigator.searchValue,
-			renderLevel('1000', navigator.tree),
-			navigator.tree
+			'1000'
 		);
 
 		//then I can see that is no contents