@neovici/cosmoz-treenode-navigator 4.0.0 → 5.1.0

package/.eslintrc

@@ -0,0 +1,7 @@
+{
+	"extends": "./node_modules/@neovici/cfg/eslint",
+	"rules": {
+		"max-lines-per-function": 0,
+		"import/group-exports": 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/.prettierrc

@@ -0,0 +1 @@
+"@neovici/cfg/prettier"

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+# [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)
+
+
+### Features
+
+* upgrade to cosmoz-utils@5 ([8c70d76](https://github.com/neovici/cosmoz-treenode-navigator/commit/8c70d76d8157e0793f10566a7f75e98f44d0a67f))
+
+
+### BREAKING CHANGES
+
+* Upgrade to cosmoz-utils@5
+
 # [4.0.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v3.1.1...v4.0.0) (2022-07-05)
 
 

package/cosmoz-treenode-navigator.js

@@ -1,25 +1,23 @@
 import { component, useEffect, useState, useMemo, useCallback } from 'haunted';
 import { html } from 'lit-html';
-import { when } from 'lit/directives/when.js';
-
+import { when } from 'lit-html/directives/when.js';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 import '@neovici/cosmoz-input';
-import '@neovici/cosmoz-autocomplete';
-import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 import {
 	computeDataPlane,
 	computeRowClass,
 	computeSearching,
-	getNodeName,
-	hasChildren,
-	nodeStyles,
 	normalizeNodes,
 	onNodeDblClicked,
 	renderLevel,
-	showGlobalSearchBtn
+	showGlobalSearchBtn,
 } from './helpers';
+import styles from './cosmoz-treenode-navigator.styles';
 
-const TreenodeNavigator = host => {
+const TreenodeNavigator = (host) => {
 	const {
 			/**
 			 * The main node structure
@@ -38,7 +36,7 @@ const TreenodeNavigator = host => {
 			 * Minimum length of searchValue to trigger a search
 			 */
 			searchMinLength,
-			nodePath
+			nodePath,
 		} = host,
 		/**
 		 * The path of the opened node
@@ -47,7 +45,16 @@ const TreenodeNavigator = host => {
 		/**
 		 * The nodes on the path of the opened node
 		 */
-		[nodesOnOpenNodePath, setNodesOnOpenNodePath] = useState([]),
+		nodesOnOpenNodePath = useMemo(
+			() =>
+				openNodePath
+					? normalizeNodes(
+							tree,
+							tree.getPathNodes(openNodePath).filter((item) => item)
+					  )
+					: [],
+			[tree, openNodePath]
+		),
 		/**
 		 * The highlighted (focused) node
 		 * This is the node which is currently selected in the list
@@ -57,168 +64,172 @@ const TreenodeNavigator = host => {
 		 * The search string
 		 */
 		[searchValue, setSearchValue] = useState(''),
+		isSearching = useMemo(
+			() => computeSearching(searchValue, searchMinLength),
+			[searchValue, searchMinLength]
+		),
+		renderedLevel = useMemo(
+			() => renderLevel(openNodePath, tree),
+			[openNodePath, tree]
+		),
 		/**
 		 * The currently displayed node list
 		 */
-		dataPlane = useMemo(() => {
-			return computeDataPlane(
-				computeSearching(searchValue, searchMinLength),
-				searchValue,
-				renderLevel(openNodePath, tree),
-				tree
-			);
-		}, [tree, openNodePath, highlightedNode, searchValue]),
+		dataPlane = useMemo(
+			() => computeDataPlane(isSearching, searchValue, renderedLevel, tree),
+			[isSearching, searchValue, renderedLevel, tree]
+		),
 		/**
 		 * 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('');
-				setSearchValue('');
-				setHighlightedNode(null);
-			}
-		}, []),
+		openNode = useCallback(
+			(clickedNode) => {
+				if (tree.hasChildren(clickedNode)) {
+					setOpenNodePath(clickedNode.path);
+					setSearchValue('');
+				}
+				if (!clickedNode) {
+					setOpenNodePath('');
+					setSearchValue('');
+					setHighlightedNode(null);
+				}
+			},
+			[tree]
+		),
 		/**
 		 * 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))
+		renderSection = useCallback(
+			(index, parentSectionName) => {
+				if (
+					!isSearching ||
+					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;
+			},
+			[isSearching, dataPlane]
 		);
-	}, [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: {}
+					detail: {},
 				})
 			);
 		}
 	}, [nodePath]);
 
 	useEffect(() => {
-		notifyProperty(
-			host,
-			'highlightedNodePath',
-			!highlightedNode ? '' : highlightedNode.path
-		);
+		notifyProperty(host, 'highlightedNodePath', highlightedNode?.path || '');
 	}, [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;
-			}
+	const meta = useMeta({ dataPlane, highlightedNode, openNode });
 
-			.path {
-				display: flex;
-				align-items: center;
-				flex-wrap: wrap;
+	useEffect(() => {
+		const handler = (e) => {
+			if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
+				return;
 			}
+			const { dataPlane: items, highlightedNode: node, openNode: open } = meta;
+			switch (e.key) {
+				case 'Up':
+				case 'ArrowUp':
+					{
+						const idx = items.findIndex((i) => i.path === node?.path);
+						e.preventDefault();
+						setHighlightedNode(items[Math.max(idx - 1, 0)]);
+					}
+					break;
+				case 'Down':
+				case 'ArrowDown':
+					{
+						const idx = items.findIndex((i) => i.path === node?.path);
+						if (idx < items.length - 1) {
+							e.preventDefault();
+							setHighlightedNode(items[idx + 1]);
+						}
+					}
+					break;
 
-			.slash {
-				margin: 0 2px;
+				case 'Right':
+				case 'ArrowRight':
+				case 'Enter':
+					if (node) {
+						e.preventDefault();
+						open(node);
+					}
+					break;
+				default:
+					break;
 			}
+		};
 
-			.pointer {
-				cursor: pointer;
-			}
+		document.addEventListener('keydown', handler, true);
+		return () => document.removeEventListener('keydown', handler, true);
+	}, [meta]);
 
-			cosmoz-listbox {
-				box-shadow: none;
-				display: block;
-				height: var(--cosmoz-treenode-navigator-list-height, 50vh);
-				position: static;
-				width: 100%;
-			}
+	const renderItem = (node, index) => html` <div class="item">
+		${when(
+			renderSection(index, node.parentSectionName),
+			() => html` <div class="section">${node.parentSectionName}</div> `
+		)}
+		<div
+			class=${computeRowClass('node', node, highlightedNode)}
+			@click=${() => setHighlightedNode(node)}
+			@dblclick=${(e) => onNodeDblClicked(e, host)}
+		>
+			<div class="name">${node.name}</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 +239,35 @@ 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
+				${nodesOnOpenNodePath.map((node) => {
+					return 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(
+			showGlobalSearchBtn(isSearching, 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,16 +1,4 @@
-import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
-import basicTree from './test/data/basicTree';
-import { tagged as css } from '@neovici/cosmoz-utils/lib/tagged';
-
-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);
-	},
+export const //
 	/**
 	 * Returns true, if a search string is eligable to trigger a search
 	 * @param {String} value - The search string
@@ -23,27 +11,30 @@ const tree = new DefaultTree(basicTree),
 	/**
 	 * Normalizes and returns an Array of nodes
 	 * with the properties name, path, parentSectionName, children
+	 * @param {Object} tree - The cosmoz tree
 	 * @param {Array} nodes - The input nodes
 	 * @return {Array} - The normalized nodes
 	 */
-	normalizeNodes = nodes => {
+	normalizeNodes = (tree, nodes) => {
 		if (!Array.isArray(nodes)) {
 			return [];
 		}
-		return nodes.map(node => {
+		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;
+				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
+				pathLocator: node.pathLocator,
 			};
 		});
 	},
@@ -58,7 +49,7 @@ const tree = new DefaultTree(basicTree),
 	computeDataPlane = (searching, searchString, renderedLevel, tree) => {
 		if (searching && tree) {
 			const results = tree.searchNodes(searchString, renderedLevel, false);
-			return normalizeNodes(results);
+			return normalizeNodes(tree, results);
 		}
 		return renderedLevel;
 	},
@@ -78,11 +69,11 @@ const tree = new DefaultTree(basicTree),
 			level = tree.hasChildren(node) ? children : node,
 			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
@@ -97,8 +88,7 @@ const tree = new DefaultTree(basicTree),
 				}
 				return 0;
 			};
-		return normalizeNodes(level)
-			.sort(sortFunc);
+		return normalizeNodes(tree, level).sort(sortFunc);
 	},
 	/**
 	 * Returns the classes of a row based its selection state
@@ -110,9 +100,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,19 +114,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];
+		host.dispatchEvent(
+			new CustomEvent('node-dblclicked', {
+				detail: {
+					model: event.model,
+				},
+			})
+		);
 	},
 	/**
 	 * Returns true, if the button should be visible
@@ -156,7 +141,7 @@ const tree = new DefaultTree(basicTree),
 		if (!tree || !pathLocator) {
 			return [];
 		}
-		return normalizeNodes(tree.getPathNodes(pathLocator));
+		return normalizeNodes(tree, tree.getPathNodes(pathLocator));
 	},
 	/**
 	 * Returns a node based on a given path locator.
@@ -175,78 +160,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": "4.0.0",
+	"version": "5.1.0",
 	"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
 	"keywords": [
 		"polymer",
@@ -54,30 +54,24 @@
 		}
 	},
 	"dependencies": {
-		"@neovici/cfg": "^1.15.2",
-		"@neovici/cosmoz-autocomplete": "^4.0.0",
+		"@lit-labs/virtualizer": "^0.7.1",
 		"@neovici/cosmoz-dialog": "^3.0.0",
 		"@neovici/cosmoz-i18next": "^3.2.0",
-		"@neovici/cosmoz-input": "^2.0.0",
+		"@neovici/cosmoz-input": "^3.0.0",
 		"@neovici/cosmoz-tree": "^3.0.0",
-		"@neovici/cosmoz-utils": "^4.0.0",
-		"@open-wc/lit-helpers": "^0.4.1",
+		"@neovici/cosmoz-utils": "^5.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/paper-input": "^3.2.0",
 		"@polymer/polymer": "^3.4.0",
-		"@web/dev-server": "^0.1.25",
-		"@web/test-runner": "^0.13.19",
-		"@web/test-runner-selenium": "^0.5.2",
 		"haunted": "^5.0.0",
-		"lit": "^2.2.7",
 		"lit-html": "^2.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.0",
 		"@commitlint/config-conventional": "^17.0.0",
-		"@neovici/eslint-config": "^1.3.0",
+		"@neovici/cfg": "^1.15.2",
 		"@open-wc/testing": "^3.0.0",
 		"@polymer/iron-ajax": "^3.0.0",
 		"@polymer/iron-component-page": "^4.0.0",
@@ -86,9 +80,10 @@
 		"@polymer/test-fixture": "^4.0.2",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
+		"@web/dev-server": "^0.1.25",
+		"@web/test-runner": "^0.13.19",
 		"@webcomponents/webcomponentsjs": "^2.0.0",
-		"eslint": "^7.0.0",
-		"husky": "^6.0.0",
+		"husky": "^8.0.0",
 		"semantic-release": "^19.0.3"
 	}
 }

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

@@ -2,7 +2,7 @@ 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, computeSearching, renderLevel } from '../helpers';
 
 suite('cosmoz-treenode-navigator', () => {
 	let navigator;
@@ -60,9 +60,9 @@ suite('cosmoz-treenode-navigator', () => {
 			parentSectionName: 'D:',
 			pathLocator: '1000'
 		};
-		assert.equal(hasChildren(node), true);
+		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(hasChildren(node2), false);
+		assert.equal(navigator.tree.hasChildren(node2), false);
 	});
 
 	test('match search string', () => {

package/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-	"extends": "@neovici"
-}

package/test/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-	"extends": "@neovici/eslint-config/test-config"
-}