@neovici/cosmoz-treenode-navigator 8.5.0 → 9.0.1

package/NOTICE

@@ -0,0 +1,6 @@
+The internal tree renderer in src/tree-view is adapted from the
+@neovici/cosmoz-tree-view implementation by Max and Neovici contributors:
+https://github.com/Neovici/cosmoz-tree-view/commit/781185fb185c4d1f4c7abf0cea197ffcb0168fd0
+
+Both implementations are distributed under the Apache License, Version 2.0.
+See LICENSE.

package/README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://github.com/Neovici/cosmoz-treenode-navigator/workflows/CI/badge.svg)](https://github.com/Neovici/cosmoz-treenode-navigator/actions?workflow=CI)
 
-A [PionJS](https://github.com/nicholaspmccracken/pion)-based web component for navigating, searching, and selecting nodes in a hierarchical tree structure.
+A [PionJS](https://github.com/pionjs/pion)-based web component for browsing, searching, and selecting nodes in a hierarchical tree structure. The expandable tree follows the Untitled UI tree view, with the highlighted node's path above the search so you keep your bearings in deep trees.
 
 ## Installation
 
@@ -86,36 +86,85 @@ The data is a nested object keyed by node IDs:
 
 The property names `name` and `children` are configurable via `DefaultTree` options (`searchProperty`, `childProperty`). The `pathLocatorSeparator` defaults to `"."`.
 
-## Loading nodes on demand
+## Modes
 
-A `Tree` holds the whole hierarchy in memory, which stops being an option once it is a few hundred thousand nodes. Pass a `source` instead and the components ask for one level at a time. Every method may answer synchronously or with a promise.
+Every mode has a live story and play-tests in Storybook (`npm start`).
 
-```ts
-import type { NodeSource } from '@neovici/cosmoz-treenode-navigator/source';
+### Browse
 
-const source: NodeSource = {
-	getLevel: (pathLocator) => fetchChildren(pathLocator), // roots when empty
-	getPath: (pathLocator) => fetchAncestors(pathLocator), // outermost first
-	search: (query, scope) => fetchMatches(query),
-	hasChildren: () => undefined, // undefined renders the arrow anyway
-	label: (node) => node.name,
-	pathLabel: () => undefined, // heading above a group of search results
-	parentOf: (node) =>
-		node.pathLocator.slice(0, node.pathLocator.lastIndexOf('.')),
-	scopedSearch: false, // true if `search` honours `scope`
-};
+With no current node, every root is open. The chevron expands a node, a click **highlights** it (the dialog's Select button confirms it), and double-click or <kbd>Enter</kbd> **selects** it straight away.
+
+```js
+html`<cosmoz-treenode-navigator
+	.tree=${tree}
+	.opened=${true}
+></cosmoz-treenode-navigator>`;
+```
 
-html`<cosmoz-treenode-button-view
-	.source=${source}
-></cosmoz-treenode-button-view>`;
+Story: _CosmozTreenodeNavigator › Browse_.
+
+### Current node
+
+With a `nodePath`, the navigator opens on it: highlighted, its ancestors and its own children open, and scrolled into view. A path that is only partly valid (`1.2.999`) opens its last valid node with nothing highlighted; an invalid one falls back to the open roots.
+
+```js
+html`<cosmoz-treenode-navigator
+	.tree=${tree}
+	.nodePath=${'1.100.300'}
+	.opened=${true}
+></cosmoz-treenode-navigator>`;
 ```
 
-Two things are worth getting right:
+Story: _Open On Current Node_.
 
-- `search` results are rendered in the order they arrive. A server that ranks its matches has already decided which one the user meant, and re-sorting throws that away.
-- `scopedSearch: false` hides the "search again but globally" button, which has nothing to offer when the search was global to begin with.
+### Path
+
+Above the search sits the highlighted node's path — `C: / Users / John` — with the node itself in bold. Each step is a button that selects that ancestor and scrolls the tree to it.
+
+Story: _Open On Current Node_.
+
+### Search
+
+Typing at least `searchMinLength` characters (debounced by `searchDebounceTimeout`) searches the **whole** tree. Matches show in place, under their ancestors, all open, so you see where each match lives; their own children are hidden. With no matches a message replaces the tree. Clearing the search brings the tree back.
+
+```js
+html`<cosmoz-treenode-navigator
+	.tree=${tree}
+	.searchMinLength=${2}
+	.searchDebounceTimeout=${300}
+></cosmoz-treenode-navigator>`;
+```
 
-`tree` keeps working on its own — it is served through the built-in `treeSource` adapter, which is also exported if you want to wrap one yourself.
+Story: _Searching_.
+
+### Large trees
+
+Children are sorted (folders first, then by name) once per node and cached; only expanded branches are read and rows are virtualized. A node with 274,000 children expands in under 100 ms. Sorting works on a copy: the tree's own child arrays are never reordered.
+
+Story: _Large Tree_ (100,000 children).
+
+### Dialog
+
+In `<cosmoz-treenode-button-view>`, highlighting changes nothing until it is confirmed with **Select**, double-click or <kbd>Enter</kbd>. **Cancel** or <kbd>Esc</kbd> closes without changing `nodePath`.
+
+Story: _CosmozTreenodeButtonView › With Preselected Node_.
+
+## Keyboard
+
+| Key                            | Where  | Action                                                  |
+| ------------------------------ | ------ | ------------------------------------------------------- |
+| <kbd>↓</kbd>                   | Search | Move into the tree, on the highlighted node             |
+| <kbd>Enter</kbd>               | Search | Select the highlighted node                             |
+| <kbd>↑</kbd> <kbd>↓</kbd>      | Tree   | Previous / next row                                     |
+| <kbd>→</kbd> / <kbd>←</kbd>    | Tree   | Expand or enter children / collapse or go to the parent |
+| <kbd>Home</kbd> <kbd>End</kbd> | Tree   | First / last row                                        |
+| <kbd>Space</kbd>               | Tree   | Highlight the focused row                               |
+| <kbd>Enter</kbd>               | Tree   | Select the focused row                                  |
+| <kbd>Esc</kbd>                 | Dialog | Close without changing the selection                    |
+
+## Updating the tree
+
+Pass a new `tree` when the data changes. Nodes added to the same tree object in place are picked up the next time the navigator opens.
 
 ## Components
 
@@ -194,18 +243,18 @@ The host element is declared as a CSS container (`container-type: inline-size`).
 
 ### `<cosmoz-treenode-navigator>`
 
-The inner navigator component that provides tree browsing, search, and keyboard navigation. Typically used inside `<cosmoz-treenode-button-view>`, but can be used standalone.
+The inner navigator: the highlighted node's path, a search field and the tree. Typically used inside `<cosmoz-treenode-button-view>`, but can be used standalone.
 
 #### Properties
 
-| Property                | Type      | Default     | Description                                     |
-| ----------------------- | --------- | ----------- | ----------------------------------------------- |
-| `tree`                  | `Tree`    | --          | The tree data structure (set via JS)            |
-| `nodePath`              | `string`  | `''`        | Selected node's path locator (two-way bindable) |
-| `highlightedNodePath`   | `string`  | `''`        | Currently highlighted node's path (notify only) |
-| `opened`                | `boolean` | `undefined` | Controls keyboard listeners and scroll behavior |
-| `searchMinLength`       | `number`  | `3`         | Minimum characters to trigger search            |
-| `searchDebounceTimeout` | `number`  | `500`       | Debounce timeout (ms) before search triggers    |
+| Property                | Type      | Default     | Description                                                            |
+| ----------------------- | --------- | ----------- | ---------------------------------------------------------------------- |
+| `tree`                  | `Tree`    | --          | The tree data structure (set via JS)                                   |
+| `nodePath`              | `string`  | `''`        | Selected node's path locator (two-way bindable)                        |
+| `highlightedNodePath`   | `string`  | `''`        | Currently highlighted node's path (notify only)                        |
+| `opened`                | `boolean` | `undefined` | Resets the view to the current node on open; `false` unmounts the tree |
+| `searchMinLength`       | `number`  | `3`         | Minimum characters to trigger search                                   |
+| `searchDebounceTimeout` | `number`  | `500`       | Debounce timeout (ms) before search triggers                           |
 
 #### Events
 
@@ -216,13 +265,15 @@ The inner navigator component that provides tree browsing, search, and keyboard
 
 #### CSS Custom Properties
 
-| Property                                             | Default                        | Description                                 |
-| ---------------------------------------------------- | ------------------------------ | ------------------------------------------- |
-| `--cosmoz-treenode-navigator-icon-color`             | `currentColor`                 | Color of navigation icons (home, arrow)     |
-| `--cosmoz-treenode-navigator-select-node-icon-color` | `var(--cz-color-fg-secondary)` | Color of the selected/highlighted node icon |
-| `--cosmoz-treenode-navigator-list-height`            | `50vh`                         | Height of the scrollable node list          |
-| `--cz-text-color`                                    | `inherit`                      | General text color                          |
-| `--cz-bg-color`                                      | `var(--cz-color-bg-secondary)` | Section header background color             |
+| Property                                  | Default | Description                  |
+| ----------------------------------------- | ------- | ---------------------------- |
+| `--cosmoz-treenode-navigator-list-height` | `50vh`  | Height of the scrolling tree |
+
+Colors, type and spacing come from `@neovici/cosmoz-tokens` (`--cz-*`). The tree renderer and its row styles are internal to this package.
+
+#### Test ids
+
+`search-input`, `path`, `tree` and `no-results`. Tree rows are `role="treeitem"`, with `aria-selected` and `aria-expanded`.
 
 ## Internationalization
 
@@ -244,7 +295,9 @@ i18next.addResourceBundle('sv', 'translation', {
 	'Search or navigate to chosen destination':
 		'Sok eller navigera till vald destination',
 	'Search...': 'Sok...',
-	'Click to search again but globally': 'Klicka for att soka igen men globalt',
+	Path: 'Sökväg',
+	Nodes: 'Noder',
+	'No nodes match the search': 'Inga noder matchar sökningen',
 	Select: 'Valj',
 	Cancel: 'Avbryt',
 });
@@ -252,14 +305,39 @@ i18next.addResourceBundle('sv', 'translation', {
 
 ### Translation Keys
 
-| Key                                        | Used in                                     |
-| ------------------------------------------ | ------------------------------------------- |
-| `Select a node`                            | Button placeholder when no node is selected |
-| `Search or navigate to chosen destination` | Dialog heading                              |
-| `Search...`                                | Search input placeholder                    |
-| `Click to search again but globally`       | Global search button label                  |
-| `Select`                                   | Dialog confirm button                       |
-| `Cancel`                                   | Dialog cancel button                        |
+| Key                         | Used in                                      |
+| --------------------------- | -------------------------------------------- |
+| `Select a node`             | Button placeholder and dialog heading        |
+| `Close`                     | Accessible name of the dialog close button   |
+| `Search nodes`              | Search input label                           |
+| `Search...`                 | Search input placeholder                     |
+| `Path`                      | Accessible name of the path above the search |
+| `Nodes`                     | Accessible name of the tree                  |
+| `No nodes match the search` | Shown when a search has no matches           |
+| `Select`                    | Dialog confirm button                        |
+| `Cancel`                    | Dialog cancel button                         |
+| `Loading...`                | Loading status                               |
+| `Could not load nodes.`     | Failed request status                        |
+| `Try again`                 | Retry button                                 |
+| `Search to find a node.`    | Empty root level status                      |
+
+## Migrating from v8
+
+The one-level drill-down list is replaced by an expandable tree. The public properties and events, and the button view's slots and CSS parts, are unchanged.
+
+| Before                                                                          | After                                                                       |
+| ------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Drill-down list with a home icon and the open folder's breadcrumb               | Expandable tree; the path above the search follows the **highlighted** node |
+| Search in the open folder, then "search again globally"                         | Search is always global, matches shown in place                             |
+| `--cosmoz-treenode-navigator-icon-color`                                        | _removed_ (tokens)                                                          |
+| `--cosmoz-treenode-navigator-select-node-icon-color`                            | _removed_ (tokens)                                                          |
+| `--cosmoz-treenode-navigator-list-item-focused-color`                           | _removed_; row styling uses semantic design tokens                          |
+| Test ids `node`, `node-name`, `node-arrow`, `home-icon`, `global-search-button` | `role="treeitem"` rows; test ids `tree`, `path`, `no-results`               |
+| Translation key `Click to search again but globally`                            | _removed_; new keys `Path`, `Nodes`, `No nodes match the search`            |
+| Capturing `keydown` listener on `document`                                      | Keys handled by the search field and the tree                               |
+| The tree's `children` arrays sorted in place                                    | Sorted on a copy, cached per node                                           |
+
+The tree renderer is an internal module in this package. It is not a separate dependency or public entry point. The navigator owns selection, source loading, and the tree interaction.
 
 ## Migrating from v7
 
@@ -325,3 +403,20 @@ Tests use [Vitest](https://vitest.dev/) with two projects: `unit` (jsdom) for he
 ## License
 
 [Apache-2.0](LICENSE)
+
+## API-backed sources
+
+The `source` property introduced in v8.5 remains supported. Its `getPath`,
+`getLevel`, `search`, `hasChildren`, `label`, and `parentOf` methods drive the
+expandable tree without loading the whole hierarchy. With a source, the initial
+view shows the current node's ancestor chain immediately, then loads the levels
+of those expanded ancestors and the current node. Expanding another branch loads
+its immediate children. Sources
+that cannot enumerate roots can return an empty root level; search remains
+available.
+
+Search calls `search(query, '')` globally and resolves the returned nodes' paths.
+Sources should reuse ancestor data included with search responses in `getPath`
+to avoid extra requests. Matches appear under their ancestors in match order.
+Missing paths leave their matches selectable. Loading and error messages are
+announced, and failed levels and searches offer Try again.

package/dist/cosmoz-treenode-button-view.js

@@ -66,6 +66,7 @@ const CosmozNodeButtonView = ({ tree, source, showReset = false, searchMinLength
     };
     const onOpen = () => setOpened(true);
     const onClose = () => {
+        setHighlightedNodePath('');
         setOpened(false);
         setTooltipDisabled(true);
         clearTimeout(tooltipTimeoutRef.current);
@@ -154,12 +155,22 @@ const CosmozNodeButtonView = ({ tree, source, showReset = false, searchMinLength
 		<dialog
 			part="dialog"
 			data-testid="dialog"
+			aria-labelledby="node-picker-heading"
 			${ref((el) => {
         dialogRef.current = el;
     })}
 		>
 			<header part="header" @mousedown=${onHeaderMouseDown}>
-				<h1 part="heading">${t('Search or navigate to chosen destination')}</h1>
+				<h1 id="node-picker-heading" part="heading">${t('Select a node')}</h1>
+				<cosmoz-button
+					variant="tertiary"
+					size="sm"
+					icon-only
+					aria-label=${t('Close')}
+					@mousedown=${(event) => event.stopPropagation()}
+					@click=${onClose}
+					>${xIcon()}</cosmoz-button
+				>
 			</header>
 			<main part="main">
 				<cosmoz-treenode-navigator

package/dist/cosmoz-treenode-button-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-treenode-button-view.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cosmoz-treenode-button-view.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"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"}

package/dist/cosmoz-treenode-button-view.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-treenode-button-view.styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":";AAGA,wBAyFE"}
+{"version":3,"file":"cosmoz-treenode-button-view.styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":";AAGA,wBA4GE"}

package/dist/cosmoz-treenode-button-view.styles.js

@@ -53,11 +53,15 @@ export default css `
 	}
 
 	dialog {
-		width: 550px;
-		min-width: 250px;
+		width: min(36rem, calc(100vw - 32px));
+		max-height: calc(100dvh - 32px);
+		box-sizing: border-box;
 		padding: 0;
-		border-radius: 10px;
-		border: none;
+		border-radius: var(--cz-radius-xl);
+		border: 1px solid var(--cz-color-border-secondary);
+		background: var(--cz-color-bg-primary);
+		color: var(--cz-color-text-primary);
+		box-shadow: var(--cz-shadow-xl);
 	}
 
 	dialog::backdrop {
@@ -65,29 +69,44 @@ export default css `
 	}
 
 	dialog > header {
-		padding: 10px 10px 0 10px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: calc(var(--cz-spacing) * 3);
+		padding: calc(var(--cz-spacing) * 5) calc(var(--cz-spacing) * 5)
+			calc(var(--cz-spacing) * 4);
 		cursor: move;
 		user-select: none;
 	}
 
 	dialog h1 {
-		margin-bottom: 2rem;
-		padding: 0 8px;
-		font-size: 1.25rem;
-		font-weight: normal;
-		color: var(--cz-text-color, inherit);
+		margin: 0;
+		font-size: var(--cz-text-lg);
+		line-height: var(--cz-text-lg-line-height);
+		font-weight: var(--cz-font-weight-semibold);
 	}
 
 	dialog > footer {
-		padding: 0 10px 10px 10px;
-		text-align: right;
+		padding: calc(var(--cz-spacing) * 4) calc(var(--cz-spacing) * 5);
+		border-top: 1px solid var(--cz-color-border-secondary);
 	}
 
 	dialog > footer > div {
 		display: flex;
-		gap: 8px;
-		justify-content: flex-end;
-		margin: 0;
+		flex-direction: row-reverse;
+		gap: calc(var(--cz-spacing) * 2);
+		justify-content: flex-start;
+	}
+
+	@media (max-width: 480px) {
+		dialog {
+			width: calc(100vw - 16px);
+			max-height: calc(100dvh - 16px);
+		}
+		dialog > header,
+		dialog > footer {
+			padding: calc(var(--cz-spacing) * 4);
+		}
 	}
 `;
 //# sourceMappingURL=cosmoz-treenode-button-view.styles.js.map

package/dist/cosmoz-treenode-button-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-treenode-button-view.styles.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkCd,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDX,CAAC"}
+{"version":3,"file":"cosmoz-treenode-button-view.styles.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkCd,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EX,CAAC"}

package/dist/cosmoz-treenode-navigator.d.ts

@@ -1,3 +1,3 @@
-import '@neovici/cosmoz-button/cosmoz-button';
 import '@neovici/cosmoz-input';
+import './tree-view/tree-view';
 //# sourceMappingURL=cosmoz-treenode-navigator.d.ts.map

package/dist/cosmoz-treenode-navigator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-treenode-navigator.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.ts"],"names":[],"mappings":"AAeA,OAAO,sCAAsC,CAAC;AAC9C,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"cosmoz-treenode-navigator.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAoB/B,OAAO,uBAAuB,CAAC"}