@neovici/cosmoz-treenode-navigator 5.0.0 → 5.2.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,31 @@
+# [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)
+
+
+### Bug Fixes
+
+* **search:** remove label ([950ed7c](https://github.com/neovici/cosmoz-treenode-navigator/commit/950ed7cef3ab282f5fea8925dae121c771723eab))
+
 # [5.0.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v4.0.0...v5.0.0) (2022-07-19)
 
 

package/cosmoz-treenode-navigator.js

@@ -1,25 +1,21 @@
 import { component, useEffect, useState, useMemo, useCallback } from 'haunted';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
-
+import { guard } from 'lit-html/directives/guard.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 +34,12 @@ const TreenodeNavigator = host => {
 			 * Minimum length of searchValue to trigger a search
 			 */
 			searchMinLength,
-			nodePath
+			nodePath,
 		} = 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 +49,41 @@ 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);
-				setSearchValue('');
-			}
-			if (!clickedNode) {
-				setOpenNodePath('');
+		openNode = useCallback(
+			(clickedNode) => {
+				setOpenNodePath(clickedNode?.pathLocator || '');
 				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;
-		};
-
-	useEffect(() => {
-		if (!openNodePath) {
-			notifyProperty(host, 'highlightedNodePath', '');
-			notifyProperty(host, 'nodesOnNodePath', []);
-			return;
-		}
-		setNodesOnOpenNodePath(
-			normalizeNodes(tree.getPathNodes(openNodePath).filter(item => item))
+				setHighlightedNode();
+			},
+			[tree]
 		);
-	}, [openNodePath]);
 
 	useEffect(() => {
 		if (!openNodePath) {
 			notifyProperty(host, 'highlightedNodePath', '');
-			return;
+			notifyProperty(host, 'nodesOnNodePath', []);
 		}
-		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 +91,113 @@ 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;
-			}
-
-			#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;
-			}
+	const meta = useMeta({ dataPlane, highlightedNode, openNode });
 
-			.slash {
-				margin: 0 2px;
+	useEffect(() => {
+		// eslint-disable-next-line max-lines-per-function
+		const handler = (e) => {
+			if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
+				return;
 			}
-
-			.pointer {
-				cursor: pointer;
+			const { dataPlane: items, highlightedNode: node, openNode: open } = meta,
+				getIndex = () =>
+					items.findIndex((i) => i.pathLocator === node?.pathLocator);
+
+			switch (e.key) {
+				case 'Up':
+				case 'ArrowUp':
+					{
+						const idx = getIndex();
+						e.preventDefault();
+						setHighlightedNode(items[Math.max(idx - 1, 0)]);
+					}
+					break;
+				case 'Down':
+				case 'ArrowDown':
+					{
+						const idx = getIndex();
+						if (idx < items.length - 1) {
+							e.preventDefault();
+							setHighlightedNode(items[idx + 1]);
+						}
+					}
+					break;
+
+				case 'Enter':
+					if (node) {
+						e.preventDefault();
+						host.dispatchEvent(new CustomEvent('select-node'));
+					}
+					break;
+
+				case 'Right':
+				case 'ArrowRight':
+					if (node) {
+						e.preventDefault();
+						open(node);
+					}
+					break;
+				default:
+					break;
 			}
+		};
 
-			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);
+	}, [meta]);
+
+	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>`;
 
-			.btn-ghost {
-				background: transparent;
-				border: none;
-				cursor: pointer;
-				margin: 0 0.29em;
-				padding: 0.7em 0.57em;
-				text-transform: uppercase;
-			}
+	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,84 +207,39 @@ 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 }"
-				.label="${ 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">
+				<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,38 @@
-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,
+			level = children.length > 0 ? 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 +42,21 @@ const tree = new DefaultTree(basicTree),
 				}
 				return 0;
 			};
-		return normalizeNodes(level)
-			.sort(sortFunc);
+		return level.sort(sortFunc);
+	},
+	/**
+	 * 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 +68,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 +82,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 +100,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 +119,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.0",
+	"version": "5.2.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