@rokkit/actions 1.0.0-next.36 → 1.0.0-next.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.36",
+  "version": "1.0.0-next.38",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,17 +13,17 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@testing-library/svelte": "^4.0.3",
     "@vitest/coverage-v8": "^0.33.0",
     "@vitest/ui": "~0.33.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.5",
+    "svelte": "^4.1.1",
     "typescript": "^5.1.6",
     "validators": "latest",
-    "vite": "^4.4.4",
+    "vite": "^4.4.7",
     "vitest": "~0.33.0",
-    "shared-config": "1.0.0-next.36"
+    "shared-config": "1.0.0-next.38"
   },
   "files": [
     "src/**/*.js",

package/src/dismissable.js

@@ -1,5 +1,12 @@
 const KEYCODE_ESC = 27
 
+/**
+ * A svelte action function that captures clicks outside the element or escape keypress
+ * emits a `dismiss` event. This is useful for closing a modal or dropdown.
+ *
+ * @param {HTMLElement} node
+ * @returns {import('./types').SvelteActionReturn}
+ */
 export function dismissable(node) {
 	const handleClick = (event) => {
 		if (node && !node.contains(event.target) && !event.defaultPrevented) {
@@ -7,7 +14,9 @@ export function dismissable(node) {
 		}
 	}
 	const keyup = (event) => {
-		if (event.keyCode === KEYCODE_ESC) {
+		if (event.keyCode === KEYCODE_ESC || event.key === 'Escape') {
+			event.stopPropagation()
+
 			node.dispatchEvent(new CustomEvent('dismiss', node))
 		}
 	}

package/src/fillable.js

@@ -1,14 +1,8 @@
-/**
- * @typedef FillOptions
- * @property {Array<string>} options available options to fill
- * @property {integer} current       index of option to be filled
- * @property {boolean} check         validate filled values
- */
 /**
  * Action for filling a <del>?</del> element in html block.
  *
- * @param {*} node
- * @param {FillOptions} options
+ * @param {HTMLElement} node
+ * @param {import('./types').FillOptions} options
  * @returns
  */
 export function fillable(node, { options, current, check }) {
@@ -43,8 +37,8 @@ export function fillable(node, { options, current, check }) {
 /**
  * Initialize empty fillable element style and add listener for click
  *
- * @param {*} blanks
- * @param {*} click
+ * @param {HTMLCollection} blanks
+ * @param {EventListener} click
  */
 function initialize(blanks, click) {
 	Object.keys(blanks).map((ref) => {
@@ -58,8 +52,8 @@ function initialize(blanks, click) {
 /**
  * Fill current blank with provided option
  *
- * @param {*} blanks
- * @param {*} options
+ * @param {HTMLCollection} blanks
+ * @param {Array<import('./types.js').FillableData>} options
  * @param {*} current
  */
 function fill(blanks, options, current) {
@@ -76,8 +70,8 @@ function fill(blanks, options, current) {
 /**
  * Clear all fillable elements
  *
- * @param {*} event
- * @param {*} node
+ * @param {EventListener} event
+ * @param {HTMLElement} node
  */
 function clear(event, node) {
 	event.target.innerHTML = '?'
@@ -98,8 +92,8 @@ function clear(event, node) {
 /**
  * Validate the filled values
  *
- * @param {*} blanks
- * @param {*} data
+ * @param {HTMLCollection} blanks
+ * @param {import('./types').FillOptions} data
  */
 function validate(blanks, data) {
 	Object.keys(blanks).map((ref) => {

package/src/hierarchy.js

@@ -1,61 +1,9 @@
-/**
- * A part of the path to node in hierarchy
- *
- * @typedef PathFragment
- * @property {integer}                             index  - Index to item in array
- * @property {Array<*>}                            items  - Array of items
- * @property {import('../constants').FieldMapping} fields - Field mapping for the data
- */
-
-/**
- * Check if the current item is a parent
- *
- * @param {*} item
- * @param {import('../constants').FieldMapping} fields
- * @returns {boolean}
- */
-export function hasChildren(item, fields) {
-	return (
-		typeof item === 'object' &&
-		fields.children in item &&
-		Array.isArray(item[fields.children])
-	)
-}
-
-/**
- * Check if the current item is a parent and is expanded
- *
- * @param {*} item
- * @param {import('../constants').FieldMapping} fields
- * @returns {boolean}
- */
-export function isExpanded(item, fields) {
-	if (item == null) return false
-	if (!hasChildren(item, fields)) return false
-	if (fields.isOpen in item) {
-		return item[fields.isOpen]
-	}
-	return false
-}
-
-/**
- * Verify if at least one item has children
- *
- * @param {Array<*>} items
- * @param {import('../constants').FieldMapping} fields
- * @returns {boolean}
- */
-export function isNested(items, fields) {
-	for (let i = 0; i < items.length; i++) {
-		if (hasChildren(items[i], fields)) return true
-	}
-	return false
-}
+import { isExpanded } from '@rokkit/core'
 
 /**
  * Navigate to last visible child in the hirarchy starting with the provided path
  *
- * @param {Array<PathFragment>} path - path to a node in the hierarchy
+ * @param {Array<import('./types').PathFragment>} path - path to a node in the hierarchy
  * @returns
  */
 export function navigateToLastVisibleChild(path) {
@@ -78,9 +26,9 @@ export function navigateToLastVisibleChild(path) {
 /**
  * Navigate to the next item
  *
- * @param {Array<PathFragment>}                 path  - path to a node in the hierarchy
+ * @param {Array<import('./types').PathFragment>}                 path  - path to a node in the hierarchy
  * @param {Array<*>}                            items - array of items
- * @param {import('../constants').FieldMapping} fields - field mapping
+ * @param {import('@rokkit/core').FieldMapping} fields - field mapping
  * @returns
  */
 export function moveNext(path, items, fields) {
@@ -115,7 +63,7 @@ export function moveNext(path, items, fields) {
 /**
  * Navigate to the previous item
  *
- * @param {Array<PathFragment>} path  - path to a node in the hierarchy
+ * @param {Array<import('./types').PathFragment>} path  - path to a node in the hierarchy
  * @returns
  */
 export function movePrevious(path) {
@@ -139,7 +87,7 @@ export function movePrevious(path) {
  *
  * @param {Array<integer>} indices
  * @param {Array<*>} items
- * @param {import('../constants').FieldMapping} fields
+ * @param {import('@rokkit/core').FieldMapping} fields
  * @returns
  */
 export function pathFromIndices(indices, items, fields) {
@@ -160,15 +108,34 @@ export function pathFromIndices(indices, items, fields) {
 	return path
 }
 
+/**
+ * Get the indices from the path
+ * @param {Array<import('./types').PathFragment>} path
+ * @returns {Array<integer>}
+ */
 export function indicesFromPath(path) {
 	return path.map(({ index }) => index)
 }
+
+/**
+ * Get the current node from the path
+ * @param {Array<import('./types').PathFragment>} path
+ * @returns {*}
+ */
 export function getCurrentNode(path) {
 	if (path.length === 0) return null
 	const lastIndex = path.length - 1
 	return path[lastIndex].items[path[lastIndex].index]
 }
 
+/**
+ * Find the item in the hierarchy using the indices
+ *
+ * @param {Array<*>} items
+ * @param {Array<integer>} indices
+ * @param {import('@rokkit/core').FieldMapping} fields
+ * @returns {*}
+ */
 export function findItem(items, indices, fields) {
 	let item = items[indices[0]]
 	let levelFields = fields

package/src/index.js

@@ -1,3 +1,4 @@
+import './types'
 export { fillable } from './fillable'
 export { pannable } from './pannable'
 export { navigable } from './navigable'

package/src/lib/index.js

@@ -0,0 +1 @@
+export * from './internal'

package/src/lib/internal.js

@@ -0,0 +1,63 @@
+import { compact } from '@rokkit/core'
+
+/**
+ * @typedef {Object} ActionHandlers
+ * @property {Function} [next]
+ * @property {Function} [previous]
+ * @property {Function} [select]
+ * @property {Function} [escape]
+ * @property {Function} [collapse]
+ * @property {Function} [expand]
+ */
+
+/**
+ * @typedef {Object} NavigationOptions
+ * @property {Boolean} [horizontal]
+ * @property {Boolean} [nested]
+ * @property {Boolean} [enabled]
+ */
+
+/**
+ * @typedef {Object} KeyboardActions
+ * @property {Function} [ArrowDown]
+ * @property {Function} [ArrowUp]
+ * @property {Function} [ArrowRight]
+ * @property {Function} [ArrowLeft]
+ * @property {Function} [Enter]
+ * @property {Function} [Escape]
+ * @property {Function} [" "]
+ */
+
+/**
+ * Maps keyboard events to actions based on the given handlers and options.
+ *
+ * @param {ActionHandlers} handlers
+ * @param {NavigationOptions} options
+ * @returns {KeyboardActions}
+ */
+export function mapKeyboardEventsToActions(handlers, options) {
+	const { next, previous, select, escape } = handlers
+	const { horizontal, nested } = {
+		horizontal: false,
+		nested: false,
+		...options
+	}
+	let expand = nested ? handlers.expand : null
+	let collapse = nested ? handlers.collapse : null
+
+	return compact({
+		ArrowDown: horizontal ? expand : next,
+		ArrowUp: horizontal ? collapse : previous,
+		ArrowRight: horizontal ? next : expand,
+		ArrowLeft: horizontal ? previous : collapse,
+		Enter: select,
+		Escape: escape,
+		' ': select
+	})
+}
+
+export function getClosestAncestorWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.getAttribute(attribute)) return element
+	return getClosestAncestorWithAttribute(element.parentElement, attribute)
+}

package/src/navigable.js

@@ -1,42 +1,47 @@
-export function navigable(
-	node,
-	{ horizontal = true, nested = false, enabled = true } = {}
-) {
-	if (!enabled) return { destroy() {} }
-	const previous = () => node.dispatchEvent(new CustomEvent('previous'))
-	const next = () => node.dispatchEvent(new CustomEvent('next'))
-	const collapse = () => node.dispatchEvent(new CustomEvent('collapse'))
-	const expand = () => node.dispatchEvent(new CustomEvent('expand'))
-	const select = () => node.dispatchEvent(new CustomEvent('select'))
+import { handleAction, getKeyboardActions } from './utils'
 
-	const movement = horizontal
-		? { ArrowLeft: previous, ArrowRight: next }
-		: { ArrowUp: previous, ArrowDown: next }
-	const change = nested
-		? horizontal
-			? { ArrowUp: collapse, ArrowDown: expand }
-			: { ArrowLeft: collapse, ArrowRight: expand }
-		: {}
-	const actions = {
-		Enter: select,
-		' ': select,
-		...movement,
-		...change
+const defaultOptions = { horizontal: true, nested: false, enabled: true }
+/**
+ * A svelte action function that captures keyboard evvents and emits event for corresponding movements.
+ *
+ * @param {HTMLElement} node
+ * @param {import('./types').NavigableOptions} options
+ * @returns {import('./types').SvelteActionReturn}
+ */
+export function navigable(node, options) {
+	options = { ...defaultOptions, ...options }
+
+	let listening = false
+	const handlers = {
+		previous: () => node.dispatchEvent(new CustomEvent('previous')),
+		next: () => node.dispatchEvent(new CustomEvent('next')),
+		collapse: () => node.dispatchEvent(new CustomEvent('collapse')),
+		expand: () => node.dispatchEvent(new CustomEvent('expand')),
+		select: () => node.dispatchEvent(new CustomEvent('select'))
 	}
 
-	function handleKeydown(event) {
-		if (actions[event.key]) {
-			event.preventDefault()
-			event.stopPropagation()
-			actions[event.key]()
-		}
+	let actions = {} //getKeyboardActions(node, { horizontal, nested })
+	const handleKeydown = (event) => handleAction(actions, event)
+
+	function updateListeners(options) {
+		if (options.enabled) actions = getKeyboardActions(node, options, handlers)
+
+		if (options.enabled && !listening)
+			node.addEventListener('keydown', handleKeydown)
+		else if (!options.enabled && listening)
+			node.removeEventListener('keydown', handleKeydown)
+		listening = options.enabled
 	}
 
-	node.addEventListener('keydown', handleKeydown)
+	updateListeners(options)
 
 	return {
-		destroy() {
-			node.removeEventListener('keydown', handleKeydown)
+		update: (config) => {
+			options = { ...options, ...config }
+			updateListeners(options)
+		},
+		destroy: () => {
+			updateListeners({ enabled: false })
 		}
 	}
 }

package/src/navigator.js

@@ -1,87 +1,70 @@
-import { getId } from '@rokkit/core'
+import { handleAction } from './utils'
+import { isNested, hasChildren, isExpanded } from '@rokkit/core'
 import {
 	moveNext,
 	movePrevious,
-	isNested,
-	hasChildren,
 	pathFromIndices,
 	indicesFromPath,
 	getCurrentNode
 } from './hierarchy'
 
-/**
- * @typedef NavigatorOptions
- * @property {Array<*>}     items           - An array containing the data set to navigate
- * @property {boolean}      [vertical=true] - Identifies whether navigation shoud be vertical or horizontal
- * @property {string}       [idPrefix='id-'] - id prefix used for identifying individual node
- * @property {import('../constants').FieldMapping} fields - Field mapping to identify attributes to be used for state and identification of children
- */
-
 /**
  * Keyboard navigation for Lists and NestedLists. The data is either nested or not and is not
  * expected to switch from nested to simple list or vice-versa.
  *
- * @param {HTMLElement}      node    - The node on which the action is to be used on
- * @param {NavigatorOptions} options - Configuration options for the action
+ * @param {HTMLElement}                        element - Root element for the actionn
+ * @param {import('./types').NavigatorOptions} options - Configuration options for the action
  * @returns
  */
-export function navigator(node, options) {
+export function navigator(element, options) {
 	const { fields, enabled = true, vertical = true, idPrefix = 'id-' } = options
 	let items, path, currentNode
 
 	if (!enabled) return { destroy: () => {} }
 
+	// todo: Update should handle selection value change
+	// should we wait a tick before updating?
 	const update = (options) => {
+		const previousNode = currentNode
 		items = options.items
 		path = pathFromIndices(options.indices ?? [], items, fields)
 		currentNode = getCurrentNode(path)
+
+		if (previousNode !== currentNode && currentNode) {
+			const indices = indicesFromPath(path)
+			let current = element.querySelector('#' + idPrefix + indices.join('-'))
+			if (current) {
+				current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+			}
+		}
 	}
 
 	const next = () => {
 		const previousNode = currentNode
 		path = moveNext(path, items, fields)
 		currentNode = getCurrentNode(path)
-
 		if (previousNode !== currentNode)
-			moveTo(node, path, currentNode, idPrefix, fields)
+			moveTo(element, path, currentNode, idPrefix)
 	}
+
 	const previous = () => {
 		const previousNode = currentNode
 		path = movePrevious(path)
 		if (path.length > 0) {
 			currentNode = getCurrentNode(path)
 			if (previousNode !== currentNode)
-				moveTo(node, path, currentNode, idPrefix, fields)
+				moveTo(element, path, currentNode, idPrefix)
 		}
 	}
 	const select = () => {
-		if (currentNode)
-			node.dispatchEvent(
-				new CustomEvent('select', {
-					detail: {
-						path: indicesFromPath(path),
-						node: currentNode,
-						id: getId(currentNode, fields)
-					}
-				})
-			)
+		if (currentNode) emit('select', element, indicesFromPath(path), currentNode)
 	}
 	const collapse = () => {
 		if (currentNode) {
-			const collapse =
-				hasChildren(currentNode, path[path.length - 1].fields) &&
-				currentNode[path[path.length - 1].fields.isOpen]
+			const collapse = isExpanded(currentNode, path[path.length - 1].fields)
 			if (collapse) {
 				currentNode[path[path.length - 1].fields.isOpen] = false
-				node.dispatchEvent(
-					new CustomEvent('collapse', {
-						detail: {
-							path: indicesFromPath(path),
-							node: currentNode,
-							id: getId(currentNode, fields)
-						}
-					})
-				)
+				emit('collapse', element, indicesFromPath(path), currentNode)
 			} else if (path.length > 0) {
 				path = path.slice(0, -1)
 				currentNode = getCurrentNode(path)
@@ -92,41 +75,20 @@ export function navigator(node, options) {
 	const expand = () => {
 		if (currentNode && hasChildren(currentNode, path[path.length - 1].fields)) {
 			currentNode[path[path.length - 1].fields.isOpen] = true
-			node.dispatchEvent(
-				new CustomEvent('expand', {
-					detail: {
-						path: indicesFromPath(path),
-						node: currentNode,
-						id: getId(currentNode, fields)
-					}
-				})
-			)
+			emit('expand', element, indicesFromPath(path), currentNode)
 		}
 	}
+	const handlers = { next, previous, select, collapse, expand }
 
 	update(options)
 
 	const nested = isNested(items, fields)
-	const movement = vertical
-		? { ArrowDown: next, ArrowUp: previous }
-		: { ArrowRight: next, ArrowLeft: previous }
-	const states = !nested
-		? {}
-		: vertical
-		? { ArrowRight: expand, ArrowLeft: collapse }
-		: { ArrowDown: expand, ArrowUp: collapse }
-	const actions = { ...movement, Enter: select, ...states }
-
-	const handleKeyDown = (event) => {
-		if (actions[event.key]) {
-			event.preventDefault()
-			event.stopPropagation()
-			actions[event.key]()
-		}
-	}
+	const actions = mapKeyboardEventsToActions(vertical, nested, handlers)
+
+	const handleKeyDown = (event) => handleAction(actions, event)
 
 	const handleClick = (event) => {
-		let target = findParentWithDataPath(event.target)
+		let target = findParentWithDataPath(event.target, element)
 		let indices = !target
 			? []
 			: target.dataset.path
@@ -143,65 +105,96 @@ export function navigator(node, options) {
 				const event = currentNode[path[path.length - 1].fields.isOpen]
 					? 'expand'
 					: 'collapse'
-				node.dispatchEvent(
-					new CustomEvent(event, {
-						detail: {
-							path: indices,
-							node: currentNode,
-							id: getId(currentNode, fields)
-						}
-					})
-				)
-			}
-			node.dispatchEvent(
-				new CustomEvent('select', {
-					detail: {
-						path: indices,
-						node: currentNode,
-						id: getId(currentNode, fields)
-					}
-				})
-			)
+				emit(event, element, indices, currentNode)
+			} else if (currentNode) emit('select', element, indices, currentNode)
 		}
 	}
 
-	node.addEventListener('keydown', handleKeyDown)
-	node.addEventListener('click', handleClick)
+	element.addEventListener('keydown', handleKeyDown)
+	element.addEventListener('click', handleClick)
 
 	return {
 		update,
 		destroy() {
-			node.removeEventListener('keydown', handleKeyDown)
-			node.removeEventListener('click', handleClick)
+			element.removeEventListener('keydown', handleKeyDown)
+			element.removeEventListener('click', handleClick)
 		}
 	}
 }
 
-export function moveTo(node, path, currentNode, idPrefix, fields) {
+/**
+ * Move to the element with the given path
+ *
+ * @param {HTMLElement} element
+ * @param {*} path
+ * @param {*} currentNode
+ * @param {*} idPrefix
+ */
+export function moveTo(element, path, currentNode, idPrefix) {
 	const indices = indicesFromPath(path)
-
-	let current = node.querySelector('#' + idPrefix + indices.join('-'))
+	let current = element.querySelector('#' + idPrefix + indices.join('-'))
 	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 
-	const id = getId(currentNode, fields)
-	node.dispatchEvent(
-		new CustomEvent('move', {
+	emit('move', element, indices, currentNode)
+}
+
+/**
+ * Find the parent element with data-path attribute
+ *
+ * @param {HTMLElement} element
+ * @param {HTMLElement} root
+ * @returns {HTMLElement}
+ */
+export function findParentWithDataPath(element, root) {
+	if (element.hasAttribute('data-path')) return element
+	let parent = element.parentNode
+
+	while (parent && parent !== root && !parent.hasAttribute('data-path')) {
+		parent = parent.parentNode
+	}
+
+	return parent !== root ? parent : null
+}
+
+/**
+ * Emit a custom event on the element with the path and node as detail
+ *
+ * @param {string} event
+ * @param {HTMLElement} element
+ * @param {Array<integer>} indices
+ * @param {*} node
+ */
+function emit(event, element, indices, node) {
+	element.dispatchEvent(
+		new CustomEvent(event, {
 			detail: {
 				path: indices,
-				node: currentNode,
-				id
+				node: node
 			}
 		})
 	)
 }
 
-export function findParentWithDataPath(element) {
-	if (element.hasAttribute('data-path')) return element
-	let parent = element.parentNode
+function mapKeyboardEventsToActions(vertical, nested, handlers) {
+	let actions = { Enter: handlers.select }
 
-	while (parent && !parent.hasAttribute('data-path')) {
-		parent = parent.parentNode
+	if (vertical) {
+		actions = {
+			...actions,
+			...{ ArrowDown: handlers.next, ArrowUp: handlers.previous },
+			...(nested
+				? { ArrowRight: handlers.expand, ArrowLeft: handlers.collapse }
+				: {})
+		}
+	} else {
+		actions = {
+			...actions,
+			...{ ArrowRight: handlers.next, ArrowLeft: handlers.previous },
+			...(nested
+				? { ArrowDown: handlers.expand, ArrowUp: handlers.collapse }
+				: {})
+		}
 	}
 
-	return parent
+	return actions
 }

package/src/pannable.js

@@ -1,9 +1,8 @@
-// pannable.js
 /**
  * Handle drag and move events
  *
- * @param {*} node
- * @returns
+ * @param {HTMLElement} node
+ * @returns {import('./types').SvelteActionReturn}
  */
 export function pannable(node) {
 	let x

package/src/swipeable.js

@@ -1,3 +1,11 @@
+/**
+ * A svelte action function that captures swipe actions and emits event for corresponding movements.
+ *
+ * @param {HTMLElement} node
+ * @param {import(./types).SwipeableOptions} options
+ * @returns {import('./types').SvelteActionReturn}
+ */
+
 export function swipeable(
 	node,
 	{
@@ -8,8 +16,7 @@ export function swipeable(
 		minSpeed = 300
 	} = {}
 ) {
-	if (!enabled) return { destroy() {} }
-
+	let listening = false
 	let startX
 	let startY
 	let startTime
@@ -49,17 +56,37 @@ export function swipeable(
 		}
 	}
 
-	node.addEventListener('touchstart', touchStart)
-	node.addEventListener('touchend', touchEnd)
-	node.addEventListener('mousedown', touchStart)
-	node.addEventListener('mouseup', touchEnd)
-
-	return {
-		destroy() {
+	const updateListeners = (enabled) => {
+		if (enabled && !listening) {
+			node.addEventListener('touchstart', touchStart)
+			node.addEventListener('touchend', touchEnd)
+			node.addEventListener('mousedown', touchStart)
+			node.addEventListener('mouseup', touchEnd)
+			listening = true
+		}
+		if (!enabled && listening) {
 			node.removeEventListener('touchstart', touchStart)
 			node.removeEventListener('touchend', touchEnd)
 			node.removeEventListener('mousedown', touchStart)
 			node.removeEventListener('mouseup', touchEnd)
+			listening = false
+		}
+	}
+
+	updateListeners(enabled)
+
+	return {
+		update: (options) => {
+			horizontal = options.horizontal
+			vertical = options.vertical
+			threshold = options.threshold
+			enabled = options.enabled
+			minSpeed = options.minSpeed
+
+			updateListeners(enabled)
+		},
+		destroy() {
+			updateListeners(false)
 		}
 	}
 }

package/src/themeable.js

@@ -1,7 +1,7 @@
 import { theme } from '@rokkit/stores'
 
 /**
- * Sets theme level classes based on the theme store
+ * A svelte action function that adds theme classes to the element
  *
  * @param {HTMLElement} node
  */
@@ -16,6 +16,14 @@ export function themable(node) {
 	})
 }
 
+/**
+ * Switch the class on the node
+ *
+ * @param {HTMLElement} node
+ * @param {string} current
+ * @param {string} previous
+ * @returns
+ */
 function switchClass(node, current, previous) {
 	if (current && current !== previous) {
 		node.classList.remove(previous)

package/src/traversable.js

@@ -0,0 +1,77 @@
+import {
+	getClosestAncestorWithAttribute,
+	mapKeyboardEventsToActions
+} from './lib'
+
+const defaultOptions = {
+	horizontal: false,
+	nested: false,
+	enabled: true
+}
+export function traversable(element, data) {
+	let listening = false
+	let options = {}
+	let tracker = {}
+	let handlers = {}
+
+	let actions = {
+		next: () => emit(element, 'move', tracker),
+		previous: () => emit(element, 'move', tracker),
+		select: () => emit(element, 'select', tracker),
+		escape: () => emit(element, 'escape', tracker),
+		collapse: () => emit(element, 'collapse', tracker),
+		expand: () => emit(element, 'expand', tracker)
+	}
+
+	let listeners = {
+		keydown: (event) => {
+			const action = handlers[event.key]
+			if (action) action(event)
+		},
+		click: (event) => {
+			const target = getClosestAncestorWithAttribute(event.target, 'data-index')
+
+			if (target) {
+				const index = parseInt(target.getAttribute('data-index'))
+				tracker.index = index
+				actions.select()
+			}
+		}
+	}
+
+	const configure = (data) => {
+		// const valueChanged = options.value !== data.value
+		options = { ...options, ...data }
+
+		listening = setupEventHandlers(element, options, listening, listeners)
+		handlers = mapKeyboardEventsToActions(actions, options)
+		// if (valueChanged) handleValueChange(element, options)
+	}
+
+	configure({ ...defaultOptions, ...data })
+
+	return {
+		update: configure,
+		destroy: () => configure({ enabled: false })
+	}
+}
+
+function setupEventHandlers(element, options, listening, handlers) {
+	const { enabled } = options
+
+	if (enabled && !listening) {
+		Object.entries(handlers).forEach(([event, handler]) =>
+			element.addEventListener(event, handler)
+		)
+	} else if (!enabled && listening) {
+		Object.entries(handlers).forEach(([event, handler]) =>
+			element.removeEventListener(event, handler)
+		)
+	}
+	return enabled
+}
+
+function emit(element, event, tracker) {
+	element.dispatchEvent(new CustomEvent(event, { detail: tracker }))
+}
+// function handleValueChange(element, options) {}

package/src/types.js

@@ -0,0 +1,53 @@
+/**
+ * @typedef SvelteActionReturn
+ * @property {() => void} destroy
+ * @property {() => void} [update]
+ */
+
+/**
+ * @typedef FillableData
+ * @property {string} value
+ * @property {integer} actualIndex
+ * @property {integer} expectedIndex
+ */
+
+/**
+ * @typedef FillOptions
+ * @property {Array<FillableData>} options available options to fill
+ * @property {integer} current       index of option to be filled
+ * @property {boolean} check         validate filled values
+ */
+
+/**
+ * A part of the path to node in hierarchy
+ *
+ * @typedef PathFragment
+ * @property {integer}                             index  - Index to item in array
+ * @property {Array<*>}                            items  - Array of items
+ * @property {import('@rokkit/core').FieldMapping} fields - Field mapping for the data
+ */
+
+/**
+ * Options for the Navigable action
+ * @typedef NavigableOptions
+ * @property {boolean} horizontal - Navigate horizontally
+ * @property {boolean} nested     - Navigate nested items
+ * @property {boolean} enabled    - Enable navigation
+ */
+
+/**
+ * @typedef NavigatorOptions
+ * @property {Array<*>}     items           - An array containing the data set to navigate
+ * @property {boolean}      [vertical=true] - Identifies whether navigation shoud be vertical or horizontal
+ * @property {string}       [idPrefix='id-'] - id prefix used for identifying individual node
+ * @property {import('../constants').FieldMapping} fields - Field mapping to identify attributes to be used for state and identification of children
+ */
+
+/**
+ * @typedef SwipeableOptions
+ * @property {boolean} horizontal - Swipe horizontally
+ * @property {boolean} vertical   - Swipe vertically
+ * @property {boolean} enabled    - Enable swiping
+ * @property {number}  threshold  - Threshold for swipe
+ * @property {number}  minSpeed   - Minimum speed for swipe
+ */

package/src/utils.js

@@ -0,0 +1,24 @@
+export function handleAction(actions, event) {
+	if (event.key in actions) {
+		event.preventDefault()
+		event.stopPropagation()
+		actions[event.key]()
+	}
+}
+
+export function getKeyboardActions(node, options, handlers) {
+	const movement = options.horizontal
+		? { ArrowLeft: handlers.previous, ArrowRight: handlers.next }
+		: { ArrowUp: handlers.previous, ArrowDown: handlers.next }
+	const change = options.nested
+		? options.horizontal
+			? { ArrowUp: handlers.collapse, ArrowDown: handlers.expand }
+			: { ArrowLeft: handlers.collapse, ArrowRight: handlers.expand }
+		: {}
+	return {
+		Enter: handlers.select,
+		' ': handlers.select,
+		...movement,
+		...change
+	}
+}