@rokkit/actions 1.0.0-next.93 → 1.0.0-next.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.93",
+  "version": "1.0.0-next.95",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -14,22 +14,20 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/svelte": "^4.1.0",
-    "@types/ramda": "^0.29.11",
+    "@types/ramda": "^0.29.12",
     "@vitest/coverage-v8": "^1.4.0",
     "@vitest/ui": "~1.4.0",
     "jsdom": "^24.0.0",
     "svelte": "^4.2.12",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.7",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
     "vitest": "~1.4.0",
-    "shared-config": "1.0.0-next.93",
-    "validators": "1.0.0-next.93"
+    "shared-config": "1.0.0-next.95",
+    "validators": "1.0.0-next.95"
   },
   "files": [
     "src/**/*.js",
-    "src/**/*.svelte",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "src/**/*.svelte"
   ],
   "exports": {
     "./src": "./src",
@@ -42,13 +40,12 @@
   },
   "dependencies": {
     "ramda": "^0.29.1",
-    "@rokkit/core": "1.0.0-next.93",
-    "@rokkit/stores": "1.0.0-next.93"
+    "@rokkit/core": "1.0.0-next.95",
+    "@rokkit/stores": "1.0.0-next.95"
   },
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint --fix .",
-    "test:ct": "playwright test -c playwright.config.js",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
     "test": "vitest",

package/src/fillable.js

@@ -6,8 +6,8 @@
  * @returns
  */
 export function fillable(node, { options, current, check }) {
-	let data = { options, current, check }
-	let blanks = node.getElementsByTagName('del')
+	const data = { options, current, check }
+	const blanks = node.getElementsByTagName('del')
 
 	function click(event) {
 		if (event.target.innerHTML !== '?') {
@@ -18,16 +18,16 @@ export function fillable(node, { options, current, check }) {
 	initialize(blanks, click)
 
 	return {
-		update({ options, current }) {
-			data.options = options
-			data.current = current
+		update(input) {
+			data.options = input.options
+			data.current = input.current
 			data.check = check
 
 			fill(blanks, data.options, data.current)
 			if (data.check) validate(blanks, data)
 		},
 		destroy() {
-			Object.keys(blanks).map((ref) => {
+			Object.keys(blanks).forEach((ref) => {
 				blanks[ref].removeEventListener('click', click)
 			})
 		}
@@ -41,10 +41,10 @@ export function fillable(node, { options, current, check }) {
  * @param {EventListener} click
  */
 function initialize(blanks, click) {
-	Object.keys(blanks).map((ref) => {
+	Object.keys(blanks).forEach((ref) => {
 		blanks[ref].addEventListener('click', click)
 		blanks[ref].classList.add('empty')
-		blanks[ref].name = 'fill-' + ref
+		blanks[ref].name = `fill-${ref}`
 		blanks[ref]['data-index'] = ref
 	})
 }
@@ -58,7 +58,7 @@ function initialize(blanks, click) {
  */
 function fill(blanks, options, current) {
 	if (current > -1 && current < Object.keys(blanks).length) {
-		let index = options.findIndex(({ actualIndex }) => actualIndex === current)
+		const index = options.findIndex(({ actualIndex }) => actualIndex === current)
 		if (index > -1) {
 			blanks[current].innerHTML = options[index].value
 			blanks[current].classList.remove('empty')
@@ -96,8 +96,8 @@ function clear(event, node) {
  * @param {import('./types').FillOptions} data
  */
 function validate(blanks, data) {
-	Object.keys(blanks).map((ref) => {
-		let index = data.options.findIndex(({ actualIndex }) => actualIndex == ref)
+	Object.keys(blanks).forEach((_, ref) => {
+		const index = data.options.findIndex(({ actualIndex }) => actualIndex === ref)
 		if (index > -1)
 			blanks[ref].classList.add(
 				data.options[index].expectedIndex === data.options[index].actualIndex ? 'pass' : 'fail'

package/src/hierarchy.js

@@ -100,9 +100,9 @@ export function movePrevious(path) {
  * @returns
  */
 export function pathFromIndices(indices, items, fields) {
-	let path = []
-	let fragment
-	indices.map((index, level) => {
+	const path = []
+	let fragment = {}
+	indices.forEach((index, level) => {
 		if (level === 0) {
 			fragment = { index, items, fields }
 		} else {

package/src/index.js

@@ -1,5 +1,4 @@
-import './types'
-export * from './lib/constants'
+export * from './types'
 export * from './lib'
 export { fillable } from './fillable'
 export { pannable } from './pannable'
@@ -10,4 +9,3 @@ export { themable } from './themeable'
 export { swipeable } from './swipeable'
 export { switchable } from './switchable'
 export { delegateKeyboardEvents } from './delegate'
-export { virtualListViewport } from './lib/viewport'

package/src/lib/index.js

@@ -1,4 +1,4 @@
-// export * from './constants'
+export * from './constants'
 export * from './internal'
 export * from './event-manager'
 export * from './viewport'

package/src/lib/internal.js

@@ -1,5 +1,4 @@
-import { compact } from '@rokkit/core'
-import { hasChildren, isExpanded } from '@rokkit/core'
+import { compact, hasChildren, isExpanded } from '@rokkit/core'
 
 /**
  * Emits a custom event with the given data.
@@ -27,8 +26,8 @@ export function mapKeyboardEventsToActions(handlers, options) {
 		nested: false,
 		...options
 	}
-	let expand = nested ? handlers.expand : null
-	let collapse = nested ? handlers.collapse : null
+	const expand = nested ? handlers.expand : null
+	const collapse = nested ? handlers.collapse : null
 
 	return compact({
 		ArrowDown: horizontal ? expand : next,
@@ -140,7 +139,7 @@ export function calculateSum(sizes, lower, upper, defaultSize = 40, gap = 0) {
  * @returns {Array<number|null>}
  */
 export function updateSizes(sizes, values, offset = 0) {
-	let result = [...sizes.slice(0, offset), ...values, ...sizes.slice(offset + values.length)]
+	const result = [...sizes.slice(0, offset), ...values, ...sizes.slice(offset + values.length)]
 
 	return result
 }

package/src/lib/viewport.js

@@ -15,13 +15,32 @@ export function virtualListViewport(options) {
 		before: 0,
 		after: 0
 	})
-	let items
+	let items = null
 	let averageSize = minSize
 	let visibleCount = maxVisible
 	let value = null
 	let cache = []
 	let index = -1
 
+	const updateBounds = ({ lower, upper }) => {
+		const previous = get(bounds)
+		if (maxVisible > 0) {
+			const visible = calculateSum(cache, lower, upper, averageSize, gap)
+			space.update((state) => (state = { ...state, visible }))
+		}
+		if (previous.lower !== lower) {
+			const before = calculateSum(cache, 0, lower, averageSize)
+			space.update((state) => (state = { ...state, before }))
+		}
+		if (previous.upper !== upper) {
+			const after = calculateSum(cache, upper, cache.length, averageSize)
+			space.update((state) => (state = { ...state, after }))
+		}
+		if (previous.lower !== lower || previous.upper !== upper) {
+			bounds.set({ lower, upper })
+		}
+	}
+
 	const update = (data) => {
 		// const previous = get(bounds)
 
@@ -76,24 +95,6 @@ export function virtualListViewport(options) {
 			updateBounds(current)
 		}
 	}
-	const updateBounds = ({ lower, upper }) => {
-		const previous = get(bounds)
-		if (maxVisible > 0) {
-			let visible = calculateSum(cache, lower, upper, averageSize, gap)
-			space.update((value) => (value = { ...value, visible }))
-		}
-		if (previous.lower !== lower) {
-			let before = calculateSum(cache, 0, lower, averageSize)
-			space.update((value) => (value = { ...value, before }))
-		}
-		if (previous.upper !== upper) {
-			let after = calculateSum(cache, upper, cache.length, averageSize)
-			space.update((value) => (value = { ...value, after }))
-		}
-		if (previous.lower !== lower || previous.upper !== upper) {
-			bounds.set({ lower, upper })
-		}
-	}
 
 	const scrollTo = (position) => {
 		const start = Math.round(position / averageSize)

package/src/navigable.js

@@ -23,23 +23,24 @@ export function navigable(node, options) {
 	let actions = {} //getKeyboardActions(node, { horizontal, nested })
 	const handleKeydown = (event) => handleAction(actions, event)
 
-	function updateListeners(options) {
-		if (options.enabled) actions = getKeyboardActions(node, options, handlers)
+	/**
+	 * Update the listeners based on the input configuration.
+	 * @param {import('./types').NavigableOptions} input
+	 */
+	function updateListeners(input) {
+		options = { ...options, ...input }
+		if (listening) node.removeEventListener('keydown', handleKeydown)
 
-		if (options.enabled && !listening) node.addEventListener('keydown', handleKeydown)
-		else if (!options.enabled && listening) node.removeEventListener('keydown', handleKeydown)
-		listening = options.enabled
+		actions = getKeyboardActions(node, input, handlers)
+		if (input.enabled) node.addEventListener('keydown', handleKeydown)
+
+		listening = input.enabled
 	}
 
 	updateListeners(options)
 
 	return {
-		update: (config) => {
-			options = { ...options, ...config }
-			updateListeners(options)
-		},
-		destroy: () => {
-			updateListeners({ enabled: false })
-		}
+		update: (config) => updateListeners(config),
+		destroy: () => updateListeners({ enabled: false })
 	}
 }

package/src/navigator.js

@@ -1,5 +1,5 @@
 import { handleAction } from './utils'
-import { isNested, hasChildren, isExpanded } from '@rokkit/core'
+import { noop, isNested, hasChildren, isExpanded } from '@rokkit/core'
 import {
 	moveNext,
 	movePrevious,
@@ -18,21 +18,23 @@ import { mapKeyboardEventsToActions } from './lib'
  */
 export function navigator(element, options) {
 	const { fields, enabled = true, vertical = true, idPrefix = 'id-' } = options
-	let items, path, currentNode
+	let items = [],
+		path = null,
+		currentNode = null
 
-	if (!enabled) return { destroy: () => {} }
+	if (!enabled) return { destroy: noop }
 
 	// todo: Update should handle selection value change
 	// should we wait a tick before updating?
-	const update = (options) => {
+	const update = (input) => {
 		const previousNode = currentNode
-		items = options.items
-		path = pathFromIndices(options.indices ?? [], items, fields)
+		items = input.items
+		path = pathFromIndices(input.indices ?? [], items, fields)
 		currentNode = getCurrentNode(path)
 
 		if (previousNode !== currentNode && currentNode) {
 			const indices = indicesFromPath(path)
-			let current = element.querySelector('#' + idPrefix + indices.join('-'))
+			const current = element.querySelector(`#${idPrefix}${indices.join('-')}`)
 			if (current) {
 				current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 			}
@@ -59,8 +61,8 @@ export function navigator(element, options) {
 	}
 	const collapse = () => {
 		if (currentNode) {
-			const collapse = isExpanded(currentNode, path[path.length - 1].fields)
-			if (collapse) {
+			const expanded = isExpanded(currentNode, path[path.length - 1].fields)
+			if (expanded) {
 				toggle()
 			} else if (path.length > 0) {
 				path = path.slice(0, -1)
@@ -94,8 +96,8 @@ export function navigator(element, options) {
 
 	const handleClick = (event) => {
 		event.stopPropagation()
-		let target = findParentWithDataPath(event.target, element)
-		let indices = !target
+		const target = findParentWithDataPath(event.target, element)
+		const indices = !target
 			? []
 			: target.dataset.path
 					.split(',')
@@ -108,8 +110,8 @@ export function navigator(element, options) {
 			if (hasChildren(currentNode, path[path.length - 1].fields)) {
 				currentNode[path[path.length - 1].fields.isOpen] =
 					!currentNode[path[path.length - 1].fields.isOpen]
-				const event = currentNode[path[path.length - 1].fields.isOpen] ? 'expand' : 'collapse'
-				emit(event, element, indices, currentNode)
+				const eventName = currentNode[path[path.length - 1].fields.isOpen] ? 'expand' : 'collapse'
+				emit(eventName, element, indices, currentNode)
 			} else if (currentNode !== null) emit('select', element, indices, currentNode)
 			emit('move', element, indices, currentNode)
 			// emit('select', element, indices, currentNode)
@@ -138,7 +140,7 @@ export function navigator(element, options) {
  */
 export function moveTo(element, path, currentNode, idPrefix) {
 	const indices = indicesFromPath(path)
-	let current = element.querySelector('#' + idPrefix + indices.join('-'))
+	const current = element.querySelector(`#${idPrefix}${indices.join('-')}`)
 	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 
 	emit('move', element, indices, currentNode)
@@ -175,7 +177,7 @@ function emit(event, element, indices, node) {
 		new CustomEvent(event, {
 			detail: {
 				path: indices,
-				node: node
+				node
 			}
 		})
 	)

package/src/pannable.js

@@ -1,14 +1,14 @@
+import { omit } from 'ramda'
 import { removeListeners, setupListeners } from './lib'
 /**
- * Handle drag and move events
+ * Makes an element pannable with mouse or touch events.
  *
- * @param {HTMLElement} node
+ * @param {HTMLElement} node The DOM element to apply the panning action.
  * @returns {import('./types').SvelteActionReturn}
  */
 export function pannable(node) {
-	let x
-	let y
-	let listeners = {
+	let coords = { x: 0, y: 0 }
+	const listeners = {
 		primary: {
 			mousedown: start,
 			touchstart: start
@@ -21,32 +21,17 @@ export function pannable(node) {
 		}
 	}
 
-	function track(event, name, delta = {}) {
-		x = event.clientX || event.touches[0].clientX
-		y = event.clientY || event.touches[0].clientY
-		event.stopPropagation()
-		event.preventDefault()
-		node.dispatchEvent(
-			new CustomEvent(name, {
-				detail: { x, y, ...delta }
-			})
-		)
-	}
-
 	function start(event) {
-		track(event, 'panstart')
+		coords = handleEvent(node, event, 'panstart', coords)
 		setupListeners(window, listeners.secondary)
 	}
 
 	function move(event) {
-		const dx = (event.clientX || event.touches[0].clientX) - x
-		const dy = (event.clientY || event.touches[0].clientY) - y
-
-		track(event, 'panmove', { dx, dy })
+		coords = handleEvent(node, event, 'panmove', coords)
 	}
 
 	function stop(event) {
-		track(event, 'panend')
+		coords = handleEvent(node, event, 'panend', coords)
 		removeListeners(window, listeners.secondary)
 	}
 
@@ -56,3 +41,27 @@ export function pannable(node) {
 		destroy: () => removeListeners(node, listeners.primary)
 	}
 }
+
+/**
+ * Handles the panning event.
+ *
+ * @param {HTMLElement}              node   - The node where the event is dispatched.
+ * @param {Event}                    event  - The event object.
+ * @param {string}                   name   - The name of the event.
+ * @param {import('./types').Coords} coords - The previous coordinates of the event.
+ */
+function handleEvent(node, event, name, coords) {
+	const x = event.clientX || event.touches[0].clientX
+	const y = event.clientY || event.touches[0].clientY
+	const detail = { x, y }
+
+	if (name === 'panmove') {
+		detail.dx = x - coords.x
+		detail.dy = y - coords.y
+	}
+
+	event.stopPropagation()
+	event.preventDefault()
+	node.dispatchEvent(new CustomEvent(name, { detail }))
+	return omit(['dx', 'dy'], detail)
+}

package/src/swipeable.js

@@ -16,13 +16,13 @@ const defaultOptions = {
  * @returns {import('./types').SvelteActionReturn}
  */
 export function swipeable(node, options = defaultOptions) {
-	let track = {}
+	const track = {}
 	let listeners = {}
 
-	const updateListeners = (options) => {
+	const updateListeners = (props) => {
 		removeListeners(node, listeners)
-		listeners = getListeners(node, options, track)
-		setupListeners(node, listeners, options)
+		listeners = getListeners(node, props, track)
+		setupListeners(node, listeners, props)
 	}
 
 	options = { ...defaultOptions, ...options }
@@ -49,7 +49,7 @@ export function swipeable(node, options = defaultOptions) {
 function getListeners(node, options, track) {
 	if (!options.enabled) return {}
 
-	let listeners = {
+	const listeners = {
 		touchend: (e) => touchEnd(e, node, options, track),
 		touchstart: (e) => touchStart(e, track),
 		mousedown: (e) => touchStart(e, track),
@@ -72,31 +72,75 @@ function touchStart(event, track) {
 }
 
 /**
- * Handles the touch end event.
+ * Handles the touch end event and triggers a swipe event if the criteria are met.
  *
- * @param {Event} event - The touch event.
- * @param {HTMLElement} node - The node where the event is dispatched.
- * @param {import(./types).SwipeableOptions} options options - The options for the swipe.
- * @param {import(./types).TouchTracker} track - The tracking object.
+ * @param {Event}       event   - The event object representing the touch or mouse event.
+ * @param {HTMLElement} node    - The HTML element on which the swipe event will be dispatched.
+ * @param {object}      options - Configuration options for determining swipe behavior.
+ * @param {object}      track   - An object tracking the start point and time of the touch or swipe action.
  */
 function touchEnd(event, node, options, track) {
+	const { distance, duration } = getTouchMetrics(event, track)
+	if (!isSwipeFastEnough(distance, duration, options.minSpeed)) return
+
+	const swipeDetails = getSwipeDetails(distance, options)
+	if (!swipeDetails.isValid) return
+	node.dispatchEvent(new CustomEvent(`swipe${swipeDetails.direction}`))
+}
+
+/**
+ * Calculates and returns the distance and duration of the swipe.
+ *
+ * @param {Event} event - The event object that initiated the touchEnd.
+ * @param {object} track - The tracking object holding the start of the touch action.
+ * @returns {{distance: {x: number, y: number}, duration: number}} The distance swiped (x and y) and the duration of the swipe.
+ */
+function getTouchMetrics(event, track) {
 	const touch = event.changedTouches ? event.changedTouches[0] : event
 	const distX = touch.clientX - track.startX
 	const distY = touch.clientY - track.startY
 	const duration = (new Date().getTime() - track.startTime) / 1000
-	const speed = Math.max(Math.abs(distX), Math.abs(distY)) / duration
-
-	if (speed <= options.minSpeed) return
-
-	const isHorizontalSwipe = options.horizontal && Math.abs(distX) >= options.threshold
-	const isVerticalSwipe = options.vertical && Math.abs(distY) >= options.threshold
-
-	if (!isHorizontalSwipe && !isVerticalSwipe) return
+	return { distance: { x: distX, y: distY }, duration }
+}
 
-	const swipeDirection = getSwipeDirection(distX, distY)
-	node.dispatchEvent(new CustomEvent(`swipe${swipeDirection}`))
+/**
+ * Checks if the swipe was fast enough according to the minimum speed requirement.
+ *
+ * @param {{x: number, y: number}} distance - The distance of the swipe action.
+ * @param {number}                 duration - The duration of the swipe action in seconds.
+ * @param {number}                 minSpeed - The minimum speed threshold for the swipe action.
+ * @returns {boolean}              True if the swipe is fast enough, otherwise false.
+ */
+function isSwipeFastEnough(distance, duration, minSpeed) {
+	const speed = Math.max(Math.abs(distance.x), Math.abs(distance.y)) / duration
+	return speed > minSpeed
 }
 
+/**
+ * Determines swipe validity and direction based on horizontal/vertical preferences and thresholds.
+ *
+ * @param {{x: number, y: number}} distance - The distance of the swipe.
+ * @param {object} options - Configuration options such as direction preferences and thresholds.
+ * @returns {{isValid: boolean, direction?: string}} Object indicating whether the swipe is valid, and if so, its direction.
+ */
+function getSwipeDetails(distance, options) {
+	const isHorizontalSwipe = options.horizontal && Math.abs(distance.x) >= options.threshold
+	const isVerticalSwipe = options.vertical && Math.abs(distance.y) >= options.threshold
+	if (isHorizontalSwipe || isVerticalSwipe) {
+		return {
+			isValid: true,
+			direction: getSwipeDirection(distance.x, distance.y)
+		}
+	}
+	return { isValid: false }
+}
+/**
+ * Returns the swipe direction based on the distance in the x and y axis.
+ *
+ * @param {number} distX - The distance in the x axis.
+ * @param {number} distY - The distance in the y axis.
+ * @returns {string} The swipe direction.
+ */
 function getSwipeDirection(distX, distY) {
 	if (Math.abs(distX) > Math.abs(distY)) {
 		return distX > 0 ? 'Right' : 'Left'

package/src/switchable.js

@@ -1,13 +1,19 @@
 import { removeListeners, setupListeners } from './lib'
 
+/**
+ * A switchable action that allows the user to cycle through a list of options
+ *
+ * @param {HTMLElement} node
+ * @param {Object}      data
+ */
 export function switchable(node, data) {
 	let index = 0
 	let { value, options, disabled } = data
 
-	const update = (data) => {
-		value = data.value === null || data.value === undefined ? options[0] : data.value
-		options = data.options
-		disabled = data.disabled
+	const update = (input) => {
+		value = input.value === null || input.value === undefined ? options[0] : input.value
+		options = input.options
+		disabled = input.disabled
 		index = options.indexOf(value)
 	}
 
@@ -17,6 +23,22 @@ export function switchable(node, data) {
 		node.dispatchEvent(new CustomEvent('change', { detail: value }))
 	}
 
+	const listeners = getEventHandlers(options, toggle)
+
+	update(data)
+	setupListeners(node, listeners, { enabled: !disabled })
+
+	return {
+		update,
+		destroy: () => removeListeners(node, listeners)
+	}
+}
+/**
+ * Returns a keydown handler for the switchable component
+ *
+ * @param {Object} options
+ */
+function getEventHandlers(options, toggle) {
 	const keydown = (e) => {
 		if ([' ', 'Enter', 'ArrowRight', 'ArrowLeft'].includes(e.key)) {
 			e.preventDefault()
@@ -25,16 +47,6 @@ export function switchable(node, data) {
 			toggle(e.key === 'ArrowLeft' ? options.length - 1 : 1)
 		}
 	}
-	const listeners = {
-		click: () => toggle(1),
-		keydown
-	}
-
-	update(data)
-	setupListeners(node, listeners, { enabled: !disabled })
 
-	return {
-		update,
-		destroy: () => removeListeners(node, listeners)
-	}
+	return { keydown, click: () => toggle(1) }
 }

package/src/traversable.js

@@ -1,103 +1,396 @@
-import { mappedList, isNested } from '@rokkit/core'
-import { pick } from 'ramda'
-import {
-	// getClosestAncestorWithAttribute,
-	mapKeyboardEventsToActions,
-	emit,
-	// handleItemClick,
-	EventManager
-} from './lib'
-
-const defaultOptions = {
+import { has } from 'ramda'
+import { EventManager } from './lib'
+const defaultConfig = {
+	allowDrag: false,
+	allowDrop: false,
+	pageSize: 10,
 	horizontal: false,
-	nested: false,
-	enabled: true
+	vertical: true,
+	multiselect: false
 }
 
 /**
- * An action that can be used to traverse a nested list of items using keyboard and mouse.
+ * A svelte action to add keyboard navigation to a list/tree/grid
  *
- * @param {HTMLElement} element
- * @param {import('./types').TraversableOptions} data
- * @returns
+ * @param {HTMLElement} root   - The DOM root node to add the action to
+ * @param {Object}      config - The configuration object
+ * @param {Object}      config.store  - The store object with navigation methods
+ * @param {Object}      config.options - The configuration options
+ * @param {number}      config.options.pageSize   - The number of items to move on page up/down
+ * @param {boolean}     config.options.horizontal - The orientation of the list/tree
+ * @param {boolean}     config.options.vertical   - The orientation of the list/tree
  */
-export function traversable(element, options) {
-	const content = mappedList(options.items, options.fields)
-	const manager = EventManager(element)
+export function traversable(root, config) {
+	let store = config.store
+	const manager = EventManager(root, {})
 
-	let current = { position: [], item: null }
-	let handlers = {}
+	/**
+	 * Update the event handlers based on the configuration
+	 * @param {Object} config - The configuration object
+	 */
+	function update(config) {
+		store = config.store
+		const options = { ...defaultConfig, ...config.options }
 
-	const moveCursor = (direction) => {
-		const result = content[direction](current.position)
-		if (result) {
-			current = result
-			checkAndEmit('move')
+		const listeners = {
+			keydown: getKeydownHandler(store, options, root),
+			click: getClickHandler(store, options)
 		}
+		if (options.allowDrag) listeners.dragstart = getDragStartHandler(store)
+		if (options.allowDrop) {
+			listeners.dragover = getDragOverHandler(store)
+			listeners.drop = getDropHandler(store)
+		}
+		manager.update(listeners)
 	}
 
-	const checkAndEmit = (event) => {
-		if (current?.item) {
-			emit(element, event, pick(['item', 'position'], current))
-		}
+	/**
+	 * Cleanup action on destroy
+	 */
+	function destroy() {
+		manager.reset()
+		// store.onNavigate(null)
 	}
 
+	update(config)
+
+	return { destroy, update }
+}
+
+/**
+ * Get a map of actions for various key combinations
+ *
+ * @param {Object} store    - The store object with navigation methods
+ * @param {number} pageSize - The number of items to move on page up/down
+ */
+function getKeyHandlers(store, options) {
+	const { pageSize, horizontal, vertical } = options
+	const isGrid = horizontal && vertical
+	const arrowActions = isGrid
+		? getArrowKeyActionsForGrid(store)
+		: getArrowKeyActions(store, horizontal)
+
 	const actions = {
-		next: () => moveCursor('next'),
-		previous: () => moveCursor('previous'),
-		select: () => checkAndEmit('select'),
-		escape: () => checkAndEmit('escape'),
-		collapse: () => checkAndEmit('collapse'),
-		expand: () => checkAndEmit('expand')
+		...arrowActions,
+		PageUp: () => store.moveByOffset(-pageSize),
+		PageDown: () => store.moveByOffset(pageSize),
+		Home: () => store.moveFirst(),
+		End: () => store.moveLast(),
+		Enter: () => store.select(),
+		Escape: () => store.escape(),
+		' ': () => store.select()
+	}
+
+	const modifierActions = {
+		ctrl: getMetaKeyActions(store, horizontal),
+		meta: getMetaKeyActions(store, horizontal),
+		shift: isGrid ? getShiftKeyActionsForGrid(store) : getShiftKeyActions(store, horizontal)
+	}
+
+	return { actions, modifierActions }
+}
+
+/**
+ * Get action handlers based on direction
+ *
+ * @param {Object} store       - The store object with navigation methods
+ * @param {boolean} horizontal - if the content is navigable horizontally
+ */
+function getArrowKeyActions(store, horizontal = false) {
+	if (horizontal) {
+		return {
+			ArrowUp: () => store.collapse(),
+			ArrowDown: () => store.expand(),
+			ArrowRight: () => store.moveByOffset(1),
+			ArrowLeft: () => store.moveByOffset(-1)
+		}
+	} else {
+		return {
+			ArrowUp: () => store.moveByOffset(-1),
+			ArrowDown: () => store.moveByOffset(1),
+			ArrowRight: () => store.expand(),
+			ArrowLeft: () => store.collapse()
+		}
 	}
+}
 
-	const listeners = {
-		keydown: (event) => {
-			if (event.key in handlers) handlers[event.key](event)
+/**
+ * Get the handler function for the keydown event
+ *
+ * @param {Object}      store   - The store object with navigation methods
+ * @param {Object}      options - The configuration options
+ */
+function getClickHandler(store, options) {
+	const { multiselect = false } = options
+
+	function handleClick(event) {
+		const modifiers = identifyModifiers(event)
+		const indexPath = getTargetIndex(event)
+
+		if (!indexPath) return
+		event.stopPropagation()
+
+		if (isToggleStateIcon(event.target)) {
+			store.toggleExpansion(indexPath)
+		} else {
+			if (multiselect) {
+				handleMultiSelect(store, indexPath, modifiers)
+			} else {
+				store.moveTo(indexPath)
+				store.select(indexPath)
+			}
 		}
-		// click: (event) => {
-		// 	const target = getClosestAncestorWithAttribute(event.target, 'data-path')
-		// 	if (target) {
-		// 		const position = target
-		// 			.getAttribute('data-path')
-		// 			.split(',')
-		// 			.map((i) => +i)
-		// 		current = content.findByPosition(position)
-		// 		current = handleItemClick(element, current)
-		// 	}
-		// }
-	}
-
-	const update = (data) => {
-		options = { ...defaultOptions, ...options, value: current.item, ...data }
-		options.nested = isNested(options.items, options.fields)
-		content.update(options.items, options.fields)
-		handlers = mapKeyboardEventsToActions(actions, options)
-		manager.update(listeners, options.enabled)
-		if (options.value !== null) {
-			current = { ...current, ...content.findByValue(options.value) }
+		// dispatchEvents(event.target, store)
+	}
+
+	return handleClick
+}
+/**
+ * Get a function to handle the dragstart event
+ *
+ * @param {Object} store - The store object with navigation methods
+ */
+function getDragStartHandler(store) {
+	function handleDragStart(event) {
+		const index = getTargetIndex(event)
+		if (index) store.dragStart(index)
+	}
+	return handleDragStart
+}
+
+/**
+ * Get a function to handle the dragover event
+ *
+ * @param {Object} store - The store object with navigation methods
+ */
+function getDragOverHandler(store) {
+	function handleDragOver(event) {
+		const index = getTargetIndex(event)
+		if (index) store.dragOver(index)
+	}
+	return handleDragOver
+}
+
+/**
+ * Get a function to handle the drop event
+ *
+ * @param {Object} store - The store object with navigation methods
+ */
+function getDropHandler(store) {
+	function handleDrop(event) {
+		const index = getTargetIndex(event)
+		if (index) store.dropOver(index)
+	}
+	return handleDrop
+}
+/**
+ * Handle multi-select based on the modifier keys pressed
+ *
+ * @param {Object}   store    - The store object with navigation methods
+ * @param {number[]} index    - The index path of the item to select
+ * @param {string[]} modifier - The modifier keys pressed
+ */
+function handleMultiSelect(store, index, modifier) {
+	if (modifier.includes('shift')) {
+		store.selectRange(index)
+	} else if (modifier.includes('ctrl') || modifier.includes('meta')) {
+		store.toggleSelection(index)
+	} else {
+		store.select(index)
+	}
+}
+/**
+ * Get the keydown event handler
+ *
+ * @param {Object}      store   - The store object with navigation methods
+ * @param {Object}      options - The configuration options
+ * @param {HTMLElement} root    - The root element to add the event listener to
+ */
+function getKeydownHandler(store, options, root) {
+	const handlers = getKeyHandlers(store, options)
+
+	/**
+	 * Use the keyboard event map to handle the keydown event
+	 *
+	 * @param {KeyboardEvent} event - The keyboard event
+	 */
+	function handleKeydown(event) {
+		const action = getAction(event, handlers)
+		if (action) {
+			event.preventDefault()
+			action()
+			scrollIntoView(root, store)
+			dispatchEvents(root, store)
 		}
-		// current = handleValueChange(element, data, content, current)
 	}
 
-	update(options)
+	return handleKeydown
+}
+
+/**
+ * Get the action for the keydown event
+ *
+ * @param {KeyboardEvent} event    - The keyboard event
+ * @param {Object}        handlers - The key handlers object
+ */
+function getAction(event, handlers) {
+	const key = event.key.length === 1 ? event.key.toUpperCase() : event.key
+	const modifier = identifyModifiers(event).join('-')
+	if (modifier.length === 0) return handlers.actions[key]
+
+	if (has(modifier, handlers.modifierActions)) {
+		return handlers.modifierActions[modifier][key]
+	}
+	return null
+}
+
+/**
+ * Identify modifier keys pressed in the event
+ *
+ * @param {KeyboardEvent} event - The keyboard event
+ */
+function identifyModifiers(event) {
+	const modifiers = []
+
+	if (event.ctrlKey) modifiers.push('ctrl')
+	if (event.shiftKey) modifiers.push('shift')
+	if (event.metaKey) modifiers.push('meta')
+
+	return modifiers
+}
+
+/**
+ * Get the meta key actions for a list/tree
+ *
+ * @param {Object}  store      - The store object with navigation methods
+ * @param {boolean} horizontal - The orientation of the list/tree
+ */
+function getMetaKeyActions(store, horizontal = false) {
+	const actions = {
+		X: () => store.cut(),
+		C: () => store.copy(),
+		V: () => store.paste(),
+		A: () => store.selectAll(),
+		D: () => store.selectNone(),
+		I: () => store.selectInvert(),
+		Z: () => store.undo(),
+		Y: () => store.redo()
+	}
+	const horizontalActions = {
+		ArrowRight: () => store.moveLast(),
+		ArrowLeft: () => store.moveFirst()
+	}
+	const verticalActions = {
+		ArrowUp: () => store.moveFirst(),
+		ArrowDown: () => store.moveLast()
+	}
+	const arrowActions = horizontal ? horizontalActions : verticalActions
+
+	return { ...actions, ...arrowActions }
+}
+
+/**
+ * Get the shift key actions for a list
+ *
+ * @param {Object}  store      - The store object with navigation methods
+ * @param {boolean} horizontal - The orientation of the list/tree
+ */
+function getShiftKeyActions(store, horizontal = false) {
+	const actions = {
+		Home: () => store.selectRange(-Infinity),
+		End: () => store.selectRange(Infinity)
+	}
+	const horizontalActions = {
+		ArrowRight: () => store.selectRange(1),
+		ArrowLeft: () => store.selectRange(-1)
+	}
+	const verticalActions = {
+		ArrowUp: () => store.selectRange(-1),
+		ArrowDown: () => store.selectRange(1)
+	}
+	const arrowActions = horizontal ? horizontalActions : verticalActions
+
+	return { ...actions, ...arrowActions }
+}
 
+/**
+ * Get the arrow key actions for a grid
+ *
+ * @param {Object} store - The store object with navigation methods
+ * @returns {Object}     - The map of actions
+ */
+function getArrowKeyActionsForGrid(store) {
 	return {
-		update,
-		destroy: () => manager.reset()
+		ArrowUp: () => store.moveByOffset(-1),
+		ArrowDown: () => store.moveByOffset(1),
+		ArrowRight: () => store.moveByOffset(0, 1),
+		ArrowLeft: () => store.moveByOffset(0, -1),
+		Home: () => store.moveByOffset(-Infinity, -Infinity),
+		End: () => store.moveByOffset(Infinity, Infinity)
 	}
 }
 
-// const handleValueChange = (element, data, content, current) => {
-// 	if (data.value !== null && data.value !== current?.value) {
-// 		current = content.findByValue(data.value)
-// 		if (current) scrollIntoView(element, current.position)
-// 	}
-// 	return current
-// }
+/**
+ * Get the shift key actions for a grid
+ *
+ * @param {Object} store - The store object with navigation methods
+ * @returns {Object}     - The map of actions
+ */
+function getShiftKeyActionsForGrid(store) {
+	return {
+		ArrowUp: () => store.selectRange(-1),
+		ArrowDown: () => store.selectRange(1),
+		ArrowRight: () => store.selectRange(0, 1),
+		ArrowLeft: () => store.selectRange(0, -1),
+		Home: () => store.selectRange(0, -Infinity),
+		End: () => store.selectRange(0, Infinity)
+	}
+}
+
+/**
+ * Identify if an html element is a toggle state icon
+ * A toggle state icon element tag is ICON and has a data-state attribute value of 'opened' or 'closed'
+ *
+ * @param {HTMLElement} element - The html element to check
+ */
+function isToggleStateIcon(element) {
+	return (
+		element.tagName === 'ICON' && ['opened', 'closed'].includes(element.getAttribute('data-state'))
+	)
+}
+
+/**
+ * Get the index of the target element
+ *
+ * @param {MouseEvent} event - The mouse event
+ */
+function getTargetIndex(event) {
+	const target = event.target.closest('[data-index]')
+	if (target) return target.getAttribute('data-index').split('-').map(Number)
+
+	return null
+}
 
-// function scrollIntoView(element, position) {
-// 	if (!Array.isArray(position) || position.length === 0) return
-// 	const node = element.querySelector(`[data-index="${position.join(',')}"]`)
-// 	if (node) node.scrollIntoView()
-// }
+/**
+ * Make the current item visible in the view
+ *
+ * @param {HTMLElement} root - The root element which contains the items
+ * @param {Object}      store - The item to make visible
+ */
+function scrollIntoView(root, store) {
+	const item = store.currentItem()
+	const dataIndex = item.indexPath.join('-')
+	const node = root.querySelector(`[data-index="${dataIndex}"]`)
+	if (node) node.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+}
+
+/**
+ * Dispatch custom events based on the state changes
+ *
+ * @param {HTMLElement} root  - The root element to dispatch the events from
+ * @param {Object}      store - The store object with navigation methods
+ */
+function dispatchEvents(root, store) {
+	const events = store.getEvents()
+	events.forEach((event, detail) => root.dispatchEvent(new CustomEvent(event, { detail })))
+}

package/src/types.js

@@ -128,3 +128,5 @@
  * @property {number} lower
  * @property {number} upper
  */
+
+export default {}