@rokkit/actions 1.0.0-next.112 → 1.0.0-next.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.112",
+  "version": "1.0.0-next.114",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/kbd.js

@@ -0,0 +1,185 @@
+/**
+ * Gets horizontal movement actions based on text direction
+ * @param {Object} handlers - Handler functions
+ * @param {string} [dir='ltr'] - Text direction ('ltr' or 'rtl')
+ * @returns {Object} Object mapping arrow keys to movement handlers
+ */
+function getHorizontalMovementActions(handlers, dir = 'ltr') {
+  return dir === 'rtl'
+    ? { ArrowRight: handlers.previous, ArrowLeft: handlers.next }
+    : { ArrowLeft: handlers.previous, ArrowRight: handlers.next }
+}
+
+/**
+ * Gets vertical movement actions (not affected by direction)
+ * @param {Object} handlers - Handler functions
+ * @returns {Object} Object mapping arrow keys to movement handlers
+ */
+function getVerticalMovementActions(handlers) {
+  return { ArrowUp: handlers.previous, ArrowDown: handlers.next }
+}
+
+/**
+ * Gets horizontal expand/collapse actions (not affected by direction)
+ * @param {Object} handlers - Handler functions
+ * @returns {Object} Object mapping arrow keys to expand/collapse handlers
+ */
+function getHorizontalExpandActions(handlers) {
+  return { ArrowUp: handlers.collapse, ArrowDown: handlers.expand }
+}
+
+/**
+ * Gets vertical expand/collapse actions based on text direction
+ * @param {Object} handlers - Handler functions
+ * @param {string} [dir='ltr'] - Text direction ('ltr' or 'rtl')
+ * @returns {Object} Object mapping arrow keys to expand/collapse handlers
+ */
+function getVerticalExpandActions(handlers, dir = 'ltr') {
+  return dir === 'rtl'
+    ? { ArrowRight: handlers.collapse, ArrowLeft: handlers.expand }
+    : { ArrowLeft: handlers.collapse, ArrowRight: handlers.expand }
+}
+
+/**
+ * Gets common selection actions
+ * @param {Object} handlers - Handler functions
+ * @returns {Object} Object mapping keys to selection handlers
+ */
+function getCommonActions(handlers) {
+  return {
+    Enter: handlers.select,
+    ' ': handlers.select
+  }
+}
+
+// Default navigation options
+export const defaultNavigationOptions = {
+  orientation: 'vertical',
+  dir: 'ltr',
+  nested: false,
+  enabled: true
+}
+
+/**
+ * Gets keyboard action handlers based on orientation and direction
+ * @param {Object} options - Configuration options
+ * @param {Object} handlers - Event handler functions
+ * @returns {Object} Object mapping key presses to handler functions
+ */
+export function getKeyboardActions(options, handlers) {
+  const { orientation, dir, nested, enabled } = { ...defaultNavigationOptions, ...options }
+  
+  if (!enabled) return {}
+
+  const common = getCommonActions(handlers)
+  
+  // Determine movement actions based on orientation
+  const isHorizontal = orientation === 'horizontal'
+  const movement = isHorizontal 
+    ? getHorizontalMovementActions(handlers, dir)
+    : getVerticalMovementActions(handlers)
+  
+  // If not nested, we don't need expand/collapse actions
+  if (!nested) {
+    return { ...common, ...movement }
+  }
+  
+  // Determine expand/collapse actions based on orientation
+  const expandCollapse = isHorizontal 
+    ? getHorizontalExpandActions(handlers)
+    : getVerticalExpandActions(handlers, dir)
+  
+  return { ...common, ...movement, ...expandCollapse }
+}
+
+/**
+ * Creates a keyboard action mapping based on navigation options
+ *
+ * @param {Object} options - Navigation options
+ * @param {string} options.orientation - Whether navigation is horizontal or vertical
+ * @param {string} options.dir - Text direction ('ltr' or 'rtl') 
+ * @param {boolean} options.nested - Whether navigation is nested
+ * @returns {Object} Mapping of keys to actions
+ */
+export function createKeyboardActionMap(options) {
+  const { orientation, dir, nested } = options
+  const isHorizontal = orientation === 'horizontal'
+
+  // Define movement actions based on orientation and direction
+  let movementActions = {}
+  if (isHorizontal) {
+    movementActions = dir === 'rtl' 
+      ? { ArrowRight: 'previous', ArrowLeft: 'next' }
+      : { ArrowLeft: 'previous', ArrowRight: 'next' }
+  } else {
+    movementActions = { ArrowUp: 'previous', ArrowDown: 'next' }
+  }
+
+  // Define expand/collapse actions for nested option
+  let nestedActions = {}
+  if (nested) {
+    if (isHorizontal) {
+      nestedActions = { ArrowUp: 'collapse', ArrowDown: 'expand' }
+    } else {
+      nestedActions = dir === 'rtl'
+        ? { ArrowRight: 'collapse', ArrowLeft: 'expand' }
+        : { ArrowLeft: 'collapse', ArrowRight: 'expand' }
+    }
+  }
+
+  // Common actions regardless of options
+  const commonActions = {
+    Enter: 'select',
+    ' ': 'select',
+    Home: 'first',
+    End: 'last'
+  }
+
+  // Combine all possible actions
+  return {
+    ...commonActions,
+    ...movementActions,
+    ...nestedActions
+  }
+}
+
+/**
+ * Creates a keyboard action mapping for modifier keys based on navigation options
+ *
+ * @param {Object} options - Navigation options
+ * @param {string} options.orientation - Whether navigation is horizontal or vertical
+ * @returns {Object} Mapping of keys to actions
+ */
+export function createModifierKeyboardActionMap(options) {
+  const isHorizontal = options.orientation === 'horizontal'
+  const common = { ' ': 'extend', Home: 'first', End: 'last' }
+  const directional = isHorizontal
+    ? { ArrowLeft: 'first', ArrowRight: 'last' }
+    : { ArrowUp: 'first', ArrowDown: 'last' }
+  return { ...common, ...directional }
+}
+
+/**
+ * Gets the keyboard action for a key event
+ * @param {KeyboardEvent} event - The keyboard event
+ * @param {Object} options - Configuration options
+ * @returns {string|null} The action to perform, or null if no action is defined
+ */
+export function getKeyboardAction(event, options = {}) {
+  const { key, ctrlKey, metaKey } = event
+
+  // Use updated options with defaults
+  const mergedOptions = { ...defaultNavigationOptions, ...options }
+
+  // Check for modifier keys first (highest priority)
+  if (ctrlKey || metaKey) {
+    const modifierMap = createModifierKeyboardActionMap(mergedOptions)
+    return modifierMap[key] || null
+  }
+
+  // Get the action map based on options
+  const actionMap = createKeyboardActionMap(mergedOptions)
+
+  // Return the action or null if no matching key
+  return actionMap[key] || null
+}

package/src/navigable.svelte.js

@@ -1,7 +1,14 @@
 import { on } from 'svelte/events'
-import { handleAction, getKeyboardActions } from './utils'
+import { getKeyboardActions, defaultNavigationOptions } from './kbd'
 
-const defaultOptions = { horizontal: true, nested: false, enabled: true }
+// Handle keyboard events
+function handleAction(actions, event) {
+	if (event.key in actions) {
+		event.preventDefault()
+		event.stopPropagation()
+		actions[event.key]()
+	}
+}
 /**
  * A svelte action function that captures keyboard evvents and emits event for corresponding movements.
  *
@@ -22,8 +29,10 @@ export function navigable(node, options) {
 	const handleKeydown = (event) => handleAction(actions, event)
 
 	$effect(() => {
-		const props = { ...defaultOptions, ...options }
+		// Use defaultNavigationOptions from kbd.js
+		const props = { ...defaultNavigationOptions, ...options }
 		actions = getKeyboardActions(props, handlers)
+
 		const cleanup = on(node, 'keyup', handleKeydown)
 
 		return () => cleanup()

package/src/navigator.svelte.js

@@ -1,8 +1,7 @@
 import { on } from 'svelte/events'
 import { omit } from 'ramda'
-import { getClickAction, getKeyboardAction, getPathFromEvent } from './utils'
-
-const defaultOptions = { horizontal: false, nested: false, enabled: true }
+import { getKeyboardAction, defaultNavigationOptions } from './kbd'
+import { getClickAction, getPathFromEvent } from './utils'
 
 const EVENT_MAP = {
 	first: ['move'],
@@ -79,7 +78,7 @@ function getHandlers(wrapper) {
  */
 export function navigator(node, options) {
 	const { wrapper } = options
-	const config = { ...defaultOptions, ...omit(['wrapper'], options) }
+	const config = { ...defaultNavigationOptions, ...omit(['wrapper'], options) }
 	const handlers = getHandlers(wrapper)
 
 	const handleKeydown = (event) => {

package/src/utils.js

@@ -1,5 +1,11 @@
 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.
  *
@@ -42,30 +48,31 @@ export function handleAction(actions, event) {
 	}
 }
 
-/**
- *  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 }
-}
+// /**
+//  *  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
@@ -79,61 +86,9 @@ export function getPathFromEvent(event) {
 	// return node ? getPathFromKey(node.getAttribute('data-path')) : null
 }
 
-/**
- * Creates a keyboard action mapping based on navigation options
- *
- * @param {Object} options - Navigation options
- * @param {boolean} options.horizontal - Whether navigation is horizontal
- * @param {boolean} options.nested - Whether navigation is nested
- * @returns {Object} Mapping of keys to actions
- */
-function createKeyboardActionMap(options) {
-	const { horizontal, nested } = options
-
-	// Define movement actions based on horizontal option
-	const movementActions = horizontal
-		? { ArrowLeft: 'previous', ArrowRight: 'next' }
-		: { ArrowUp: 'previous', ArrowDown: 'next' }
-
-	// Define expand/collapse actions for nested option
-	const nestedActions = nested
-		? horizontal
-			? { ArrowUp: 'collapse', ArrowDown: 'expand' }
-			: { ArrowLeft: 'collapse', ArrowRight: 'expand' }
-		: {}
-
-	// Common actions regardless of options
-	const commonActions = {
-		Enter: 'select',
-		' ': 'select',
-		Home: 'first',
-		End: 'last'
-	}
-
-	// Combine all possible actions
-	return {
-		...commonActions,
-		...movementActions,
-		...nestedActions
-	}
-}
+// createKeyboardActionMap moved to kbd.js
 
-/**
- * Creates a keyboard action mapping based on navigation options
- *
- * @param {Object} options - Navigation options
- * @param {boolean} options.horizontal - Whether navigation is horizontal
- * @param {boolean} options.nested - Whether navigation is nested
- * @returns {Object} Mapping of keys to actions
- */
-function createModifierKeyboardActionMap(options) {
-	const { horizontal } = options
-	const common = { ' ': 'extend', Home: 'first', End: 'last' }
-	const directional = horizontal
-		? { ArrowLeft: 'first', ArrowRight: 'last' }
-		: { ArrowUp: 'first', ArrowDown: 'last' }
-	return { ...common, ...directional }
-}
+// createModifierKeyboardActionMap moved to kbd.js
 /**
  * Identifies if an element is a collapsible icon
  * @param {HTMLElement} target
@@ -142,34 +97,11 @@ function createModifierKeyboardActionMap(options) {
 function isNodeToggle(target) {
 	return (
 		target &&
-		target.getAttribute('data-tag') === 'icon' &&
+		target.hasAttribute('data-tag-icon') &&
 		['closed', 'opened'].includes(target.getAttribute('data-state'))
 	)
 }
-/**
- * Determines an action based on a keyboard event and navigation options
- *
- * @param {KeyboardEvent} event - The keyboard event
- * @param {Object} options - Navigation options
- * @param {boolean} options.horizontal - Whether navigation is horizontal
- * @param {boolean} options.nested - Whether navigation is nested
- * @returns {string|null} The determined action or null if no action matches
- */
-export const getKeyboardAction = (event, options) => {
-	const { key, ctrlKey, metaKey } = event
-
-	// Check for modifier keys first (highest priority)
-	if (ctrlKey || metaKey) {
-		const modifierMap = createModifierKeyboardActionMap(options)
-		return modifierMap[key] || null
-	}
-
-	// Get the action map based on options
-	const actionMap = createKeyboardActionMap(options)
-
-	// Return the action or null if no matching key
-	return actionMap[key] || null
-}
+// getKeyboardAction moved to kbd.js
 
 /**
  * Determines an action based on a click event