@rokkit/core 1.0.0-next.11 → 1.0.0-next.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.11",
+  "version": "1.0.0-next.12",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/NestedList.svelte

@@ -2,9 +2,9 @@
 	import { Node, Text } from './items'
 	import { defaultFields } from './constants'
 	import { createEventDispatcher } from 'svelte'
-	import { navigator } from './actions/navigator'
+	// import { navigator } from './actions/navigator'
 
-	const dispatch = createEventDispatcher()
+	// const dispatch = createEventDispatcher()
 
 	export let items = []
 	export let fields = defaultFields
@@ -15,29 +15,17 @@
 	export let rtl = false
 	export let hierarchy = []
 
-	let indices = []
+	// let indices = []
 
-	function handle(event) {
-		value = event.detail.node
-		indices = event.detail.path
-		if (['collapse', 'expand'].includes(event.type)) {
-			items = items
-		}
-		dispatch(event.type, value)
-	}
-	// function handleExpand(event) {
+	// function handle(event) {
 	// 	value = event.detail.node
 	// 	indices = event.detail.path
-	// 	items = items // tell svelte data has changed
-	// 	dispatch('expand', value)
-	// }
-	// function handleCollapse(event) {
-	// 	// console.log(event)
-	// 	value = event.detail.node
-	// 	indices = event.detail.path
-	// 	items = items // tell svelte data has changed
-	// 	dispatch('collapse', value)
+	// 	if (['collapse', 'expand'].includes(event.type)) {
+	// 		items = items
+	// 	}
+	// 	dispatch(event.type, value)
 	// }
+
 	$: using = { default: Text, ...using }
 	$: fields = { ...defaultFields, ...fields }
 	$: nodeTypes = items.map((_, index) =>
@@ -49,13 +37,15 @@
 	class="flex flex-col w-full"
 	role="listbox"
 	class:rtl
-	tabindex={hierarchy.length == 0 ? 0 : -1}
+	tabindex="-1"
+>
+	<!-- tabindex={hierarchy.length == 0 ? 0 : -1}
 	use:navigator={{ items, fields, indices, enabled: hierarchy.length == 0 }}
 	on:select={handle}
 	on:move={handle}
 	on:expand={handle}
 	on:collapse={handle}
->
+> -->
 	{#each items as content, index}
 		{@const type = nodeTypes[index] === 'middle' ? 'line' : 'empty'}
 		{@const hasChildren = fields.children in content}

package/src/Tree.svelte

@@ -1,19 +1,45 @@
 <script>
+	import { createEventDispatcher } from 'svelte'
 	import NestedList from './NestedList.svelte'
 	import { Text } from './items'
 	import { defaultFields } from './constants'
+	import { navigator } from './actions/navigator'
+
+	const dispatch = createEventDispatcher()
 
 	export let items = []
 	export let fields = {}
 	export let using = { default: Text }
-	export let root = 'root'
+	export let root = null
 	export let rtl = false
+	export let value
+
+	let indices = []
+
+	function handle(event) {
+		value = event.detail.node
+		indices = event.detail.path
+		if (['collapse', 'expand'].includes(event.type)) {
+			items = items
+		}
+		dispatch(event.type, value)
+	}
 
 	$: fields = { ...defaultFields, ...fields }
 	$: items =
-		items.length == 1
+		items.length == 1 || root == null
 			? items
 			: [{ [fields.text]: root, [fields.children]: items }]
 </script>
 
-<NestedList {items} {fields} {using} {rtl} />
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<tree
+	use:navigator={{ items, fields, indices }}
+	on:select={handle}
+	on:move={handle}
+	on:expand={handle}
+	on:collapse={handle}
+	tabindex="0"
+>
+	<NestedList {items} {fields} {using} {rtl} {value} />
+</tree>

package/src/actions/navigator.js

@@ -119,7 +119,7 @@ export function navigator(node, options) {
 					.filter((item) => item !== '')
 					.map((item) => +item)
 
-		if (indices.length > 0) {
+		if (indices.length > 0 && event.target.tagName != 'DETAIL') {
 			path = pathFromIndices(indices, items, fields)
 			currentNode = getCurrentNode(path)
 			if (hasChildren(currentNode, path[path.length - 1].fields)) {
@@ -158,7 +158,7 @@ export function moveTo(node, path, currentNode, idPrefix) {
 	const indices = indicesFromPath(path)
 
 	let current = node.querySelector('#' + idPrefix + indices.join('-'))
-	if (current) current.scrollIntoView({ behavior: 'auto' })
+	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 
 	node.dispatchEvent(
 		new CustomEvent('move', {