@rokkit/actions 1.0.0-next.98 → 1.0.1

package/src/types.js

@@ -1,132 +1,63 @@
 /**
- * @typedef SvelteActionReturn
- * @property {() => void} destroy
- * @property {() => void} [update]
+ * @typedef {Object} EventMapping
+ * @property {string} event     - The event name
+ * @property {string[]} [keys]  - The keys that trigger the event
+ * @property {RegExp} [pattern] - The pattern that triggers the event
  */
 
 /**
- * @typedef FillableData
- * @property {string} value
- * @property {integer} actualIndex
- * @property {integer} expectedIndex
+ * @typedef {Object<string, (string[]|RegExp) >} KeyboardConfig
  */
 
 /**
- * @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
+ * @typedef {'vertical'|'horizontal'} Direction
  */
 
 /**
- * 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
+ * @typedef {Object} NavigatorOptions
+ * @property {boolean}   enabled     - Whether the navigator is enabled
+ * @property {Direction} direction   - Whether the navigator is vertical or horizontal
+ * @property {boolean}   multiselect - Whether the navigator supports multiple selections
  */
 
 /**
- * Options for the Navigable action
- * @typedef NavigableOptions
- * @property {boolean} horizontal - Navigate horizontally
- * @property {boolean} nested     - Navigate nested items
- * @property {boolean} enabled    - Enable navigation
+ * @typedef {Object} DataWrapper
+ * @property {Function} moveNext
+ * @property {Function} movePrev
+ * @property {Function} moveFirst
+ * @property {Function} moveLast
+ * @property {Function} expand
+ * @property {Function} collapse
+ * @property {Function} select
+ * @property {Function} toggleExpansion
  */
 
 /**
- * @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 {Object} NavigatorActions
+ * @property {Function} next
+ * @property {Function} prev
+ * @property {Function} first
+ * @property {Function} last
+ * @property {Function} expand
+ * @property {Function} collapse
+ * @property {Function} select
  */
 
 /**
- * @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
+ * @typedef {Object} NavigatorConfig
+ * @property {Navigator} wrapper     - Whether the navigator is enabled
+ * @property {NavigatorOptions} options   - Whether the navigator is vertical or horizontal
  */
 
 /**
- * @typedef TraversableOptions
- * @property {boolean} horizontal - Traverse horizontally
- * @property {boolean} nested     - Traverse nested items
- * @property {boolean} enabled    - Enable traversal
- * @property {string}  value      - Value to be used for traversal
- * @property {Array<*>} items     - An array containing the data set to traverse
- * @property {Array<integer} [indices] - Indices of the items to be traversed
- */
-
-/**
- * @typedef PositionTracker
- * @property {integer} index
- * @property {integer} previousIndex
- */
-
-/**
- * @typedef EventHandlers
- * @property {function} [keydown]
- * @property {function} [keyup]
- * @property {function} [click]
- * @property {function} [touchstart]
- * @property {function} [touchmove]
- * @property {function} [touchend]
- * @property {function} [touchcancel]
- * @property {function} [mousedown]
- * @property {function} [mouseup]
- * @property {function} [mousemove]
- */
-
-/**
- * @typedef {Object} ActionHandlers
- * @property {Function} [next]
- * @property {Function} [previous]
- * @property {Function} [select]
- * @property {Function} [escape]
- * @property {Function} [collapse]
+ * @typedef {Object} Controller
+ * @property {Function} moveNext
+ * @property {Function} movePrev
+ * @property {Function} moveFirst
+ * @property {Function} moveLast
  * @property {Function} [expand]
+ * @property {Function} [collapse]
+ * @property {Function} select
+ * @property {Function} extendSelection
+ * @property {Function} [toggleExpansion]
  */
-
-/**
- * @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} [" "]
- */
-
-/**
- * @typedef {Object} TouchTracker
- * @property {number} startX - The start X position of the touch.
- * @property {number} startY - The start Y position of the touch.
- * @property {number} startTime - The start time of the touch.
- */
-
-/**
- * @typedef {Object} PushDownOptions
- * @property {string} selector - The CSS selector for the child element to which keyboard events will be forwarded.
- * @property {Array<string>} [events=['keydown', 'keyup', 'keypress']] - The keyboard events to forward.
- */
-
-/**
- * @typedef {Object} Bounds
- * @property {number} lower
- * @property {number} upper
- */
-
-export default {}

package/src/utils.js

@@ -1,3 +1,44 @@
+import { find, toPairs } from 'ramda'
+
+// const defaultNavigationOptions = {
+// 	orientation: 'vertical',
+// 	dir: 'ltr',
+// 	nested: false,
+// 	enabled: true
+// }
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+export function getClosestAncestorWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.getAttribute(attribute)) return element
+	return getClosestAncestorWithAttribute(element.parentElement, attribute)
+}
+
+/**
+ * Get the event name for a given key.
+ * @param {import('./types.js').KeyboardConfig} keyMapping
+ * @param {string} key - The key to match.
+ * @returns {string|null} - The event name or null if no match is found.
+ */
+export const getEventForKey = (keyMapping, key) => {
+	const matchEvent = ([_eventName, keys]) =>
+		(Array.isArray(keys) && keys.includes(key)) || (keys instanceof RegExp && keys.test(key))
+
+	const event = find(matchEvent, toPairs(keyMapping))
+	return event ? event[0] : null
+}
+
+/*
+ * Generic action handler for keyboard events.
+ *
+ * @param {Record<string, () => void>} actions
+ * @param {KeyboardEvent} event
+ */
 export function handleAction(actions, event) {
 	if (event.key in actions) {
 		event.preventDefault()
@@ -6,19 +47,100 @@ export function handleAction(actions, event) {
 	}
 }
 
-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
-	}
+// /**
+//  *  Maps keys to actions based on the configuration.
+//  *
+//  * @param {import('./types').NavigableOptions} options
+//  * @param {import('./types').NavigableHandlers} handlers
+//  */
+// export function getKeyboardActions(options, handlers) {
+// 	const { horizontal, nested } = options
+// 	if (!options.enabled) return {}
+
+// 	const common = {
+// 		Enter: handlers.select,
+// 		' ': handlers.select
+// 	}
+// 	const movement = horizontal
+// 		? { ArrowLeft: handlers.previous, ArrowRight: handlers.next }
+// 		: { ArrowUp: handlers.previous, ArrowDown: handlers.next }
+// 	const change = horizontal
+// 		? { ArrowUp: handlers.collapse, ArrowDown: handlers.expand }
+// 		: { ArrowLeft: handlers.collapse, ArrowRight: handlers.expand }
+
+// 	if (nested) return { ...common, ...movement, ...change }
+// 	return { ...common, ...movement }
+// }
+// Keyboard related functions moved to kbd.js
+
+/**
+ * Finds and returns an index path based on data-path attribute
+ *
+ * @param {MouseEvent} event
+ * @returns {number[]|null} null or index path array
+ */
+export function getPathFromEvent(event) {
+	const node = getClosestAncestorWithAttribute(event.target, 'data-path')
+	return node?.getAttribute('data-path')
+	// return node ? getPathFromKey(node.getAttribute('data-path')) : null
+}
+
+// createKeyboardActionMap moved to kbd.js
+
+// createModifierKeyboardActionMap moved to kbd.js
+/**
+ * Identifies if an element is a collapsible icon
+ * @param {HTMLElement} target
+ * @returns {boolean}
+ */
+function isNodeToggle(target) {
+	return (
+		target &&
+		target.hasAttribute('data-tag-icon') &&
+		['closed', 'opened'].includes(target.getAttribute('data-state'))
+	)
+}
+
+/**
+ * Finds the closest ancestor (or self) that has the given attribute
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+function findClosestWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.hasAttribute && element.hasAttribute(attribute)) return element
+	return findClosestWithAttribute(element.parentElement, attribute)
+}
+
+/**
+ * Identifies if an element or its ancestors is an accordion/tree trigger
+ * @param {HTMLElement} target
+ * @returns {boolean}
+ */
+function isAccordionTrigger(target) {
+	if (!target) return false
+	const trigger = findClosestWithAttribute(target, 'data-accordion-trigger')
+	return trigger !== null
+}
+// getKeyboardAction moved to kbd.js
+
+function isToggleTarget(target) {
+	return isNodeToggle(target) || isNodeToggle(target.parentElement) || isAccordionTrigger(target)
+}
+
+/**
+ * Determines an action based on a click event
+ *
+ * @param {MouseEvent} event - The click event
+ * @returns {string} The determined action
+ */
+export const getClickAction = (event) => {
+	const { ctrlKey, metaKey, shiftKey, target } = event
+
+	if (shiftKey) return 'range'
+	if (ctrlKey) return 'extend'
+	if (metaKey) return 'extend'
+	if (isToggleTarget(target)) return 'toggle'
+	return 'select'
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/hierarchy.js

@@ -1,156 +0,0 @@
-import { isExpanded } from '@rokkit/core'
-
-/**
- * Navigate to last visible child in the hirarchy starting with the provided path
- *
- * @param {Array<import('./types').PathFragment>} path - path to a node in the hierarchy
- * @returns
- */
-export function navigateToLastVisibleChild(path) {
-	let current = path[path.length - 1]
-
-	while (isExpanded(current.items[current.index], current.fields)) {
-		const items = current.items[current.index][current.fields.children]
-		const level = {
-			items,
-			index: items.length - 1,
-			fields: current.fields.fields ?? current.fields
-		}
-		path.push(level)
-		current = level
-	}
-
-	return path
-}
-
-/**
- * Navigate to the next item
- *
- * @param {Array<import('./types').PathFragment>}                 path  - path to a node in the hierarchy
- * @param {Array<*>}                            items - array of items
- * @param {import('@rokkit/core').FieldMapping} fields - field mapping
- * @returns
- */
-export function moveNext(path, items, fields) {
-	if (path.length === 0) {
-		return [{ index: 0, items, fields }]
-	}
-
-	const current = path[path.length - 1]
-	if (isExpanded(current.items[current.index], current.fields)) {
-		path.push({
-			items: current.items[current.index][current.fields.children],
-			index: 0,
-			fields: current.fields.fields || current.fields
-		})
-	} else if (current.index < current.items.length - 1) {
-		current.index++
-	} else {
-		path = navigateToNextLevel(path)
-	}
-	return path
-}
-
-/**
- * Navigate to the next level
- * @param {Array<import('./types').PathFragment>} path
- * @returns {Array<import('./types').PathFragment>}
- */
-function navigateToNextLevel(path) {
-	let level = path.length - 2
-	while (level >= 0) {
-		const parent = path[level]
-		if (parent.index < parent.items.length - 1) {
-			parent.index++
-			path = path.slice(0, level + 1)
-			break
-		}
-		level--
-	}
-	return path
-}
-/**
- * Navigate to the previous item
- *
- * @param {Array<import('./types').PathFragment>} path  - path to a node in the hierarchy
- * @returns
- */
-export function movePrevious(path) {
-	if (path.length === 0) return []
-
-	const current = path[path.length - 1]
-
-	if (current.index === 0) {
-		if (path.length > 1) path.pop()
-		return path
-	}
-
-	current.index--
-	if (isExpanded(current.items[current.index], current.fields)) {
-		return navigateToLastVisibleChild(path)
-	}
-	return path
-}
-
-/**
- *
- * @param {Array<integer>} indices
- * @param {Array<*>} items
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns
- */
-export function pathFromIndices(indices, items, fields) {
-	const path = []
-	let fragment = {}
-	indices.forEach((index, level) => {
-		if (level === 0) {
-			fragment = { index, items, fields }
-		} else {
-			fragment = {
-				index,
-				items: fragment.items[fragment.index][fragment.fields.children],
-				fields: fragment.fields.fields ?? fragment.fields
-			}
-		}
-		path.push(fragment)
-	})
-	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
-	for (let level = 1; level < indices.length; level++) {
-		item = item[levelFields.children][indices[level]]
-		levelFields = levelFields.fields ?? levelFields
-	}
-	return item
-}

package/src/lib/constants.js

@@ -1,35 +0,0 @@
-export const dimensionAttributes = {
-	vertical: {
-		scroll: 'scrollTop',
-		offset: 'offsetHeight',
-		paddingStart: 'paddingTop',
-		paddingEnd: 'paddingBottom',
-		size: 'height'
-	},
-	horizontal: {
-		scroll: 'scrollLeft',
-		offset: 'offsetWidth',
-		paddingStart: 'paddingLeft',
-		paddingEnd: 'paddingRight',
-		size: 'width'
-	}
-}
-
-export const defaultResizerOptions = {
-	horizontal: false,
-	minSize: 40,
-	minVisible: 1,
-	maxVisible: null,
-	availableSize: 200,
-	start: 0
-}
-
-export const defaultVirtualListOptions = {
-	itemSelector: 'virtual-list-item',
-	contentSelector: 'virtual-list-content',
-	enabled: true,
-	horizontal: false,
-	start: 0,
-	limit: null,
-	index: null
-}

package/src/lib/viewport.js

@@ -1,123 +0,0 @@
-import { writable, get } from 'svelte/store'
-import { pick } from 'ramda'
-import {
-	updateSizes,
-	calculateSum,
-	fixViewportForVisibileCount,
-	fitIndexInViewport
-} from './internal'
-
-export function virtualListViewport(options) {
-	const { gap = 0 } = options
-	let { minSize = 40, maxVisible = 0, visibleSize } = options
-	let current = { lower: 0, upper: 0 }
-	const bounds = writable({ lower: 0, upper: 0 })
-	const space = writable({
-		before: 0,
-		after: 0
-	})
-	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)
-
-		data = {
-			start: current.lower,
-			end: current.upper,
-			value,
-			...data
-		}
-		items = data.items ?? items
-		minSize = data.minSize ?? minSize
-		maxVisible = data.maxVisible ?? maxVisible
-		visibleSize = data.visibleSize ?? visibleSize
-
-		if (items.length !== cache.length) {
-			cache = Array.from({ length: items.length }).fill(null)
-			if (items.length === 0) index = -1
-		}
-		current = { lower: data.start, upper: data.end }
-
-		cache = updateSizes(cache, data.sizes ?? [], current.lower)
-		averageSize =
-			cache.length === 0
-				? minSize
-				: calculateSum(cache, 0, cache.length, averageSize) / cache.length
-
-		let visible = calculateSum(cache, current.lower, current.upper, averageSize, gap)
-
-		if (maxVisible > 0) {
-			visibleCount = maxVisible
-		} else {
-			while (visible < visibleSize) visible += averageSize
-			while (visible - averageSize > visibleSize) visible -= averageSize
-			visibleCount = Math.ceil(visible / averageSize)
-		}
-		current = fixViewportForVisibileCount(current, cache.length, visibleCount)
-
-		// recalculate the lower, upper bounds based on current index
-		if (items.length > 0 && data.value && data.value !== value) {
-			index = items.findIndex((item) => item === data.value)
-			if (index > -1) {
-				value = data.value
-				current = fitIndexInViewport(index, current, visibleCount)
-			}
-		}
-		updateBounds(current)
-	}
-	const moveByOffset = (offset) => {
-		if (cache.length > 0) {
-			index = Math.max(0, Math.min(index + offset, cache.length - 1))
-			current = fitIndexInViewport(index, current, visibleCount)
-			updateBounds(current)
-		}
-	}
-
-	const scrollTo = (position) => {
-		const start = Math.round(position / averageSize)
-		if (start !== current.lower) update({ start })
-	}
-
-	update(options)
-
-	return {
-		bounds: pick(['subscribe'], bounds),
-		space: pick(['subscribe'], space),
-		get index() {
-			return index
-		},
-		update,
-		scrollTo,
-		moveByOffset,
-		next: () => moveByOffset(1),
-		previous: () => moveByOffset(-1),
-		nextPage: () => moveByOffset(visibleCount),
-		previousPage: () => moveByOffset(-visibleCount),
-		first: () => moveByOffset(-cache.length),
-		last: () => moveByOffset(cache.length + 1)
-	}
-}