Merge pull request #81 from jamesplease/0.0.17

0.0.17

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+### v0.0.17 (2022/2/5)
+
+**New Features**
+
+- `targetNode` is now a property of the `LRUDEvents` interface. This is the node that the event stemmed from; it's analagous to
+  [`event.target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target).
+
 ### v0.0.16 (2022/1/12)
 
 **Bug Fixes**

README.md

@@ -377,7 +377,8 @@ An object that is passed to you in the LRUD-related callbacks of a [`FocusNode`
 | ----------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | `key`             | string                  | A string representing the key that was pressed. One of `"left"`, `"right"`, `"up"`, `"down"`, `"select"`, or `"back"`. |
 | `isArrow`         | boolean                 | Whether or not this key is an arrow.                                                                                   |
-| `node`            | [FocusNode](#focusnode) | The [`FocusNode`](#focusnode) that received this event.                                                                |
+| `node`            | [FocusNode](#focusnode) | The current [`FocusNode`](#focusnode) that received this event as the event propagates up the focus hierarchy. Analagous to [`event.currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget) |
+| `targetNode`      | [FocusNode](#focusnode) | The leaf [`FocusNode`](#focusnode) from which this event propagated. Analagous to [`event.target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) |
 | `preventDefault`  | function                | Call this to stop the default behavior of the event. Commonly used to override the navigation behavior                 |
 | `stopPropagation` | function                | Call this to stop the propagation of the event.                                                                        |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@please/lrud",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "A React library for managing focus in TV apps.",
   "main": "es/index.js",
   "module": "es/index.js",

src/lrud-input/bubble-key-input.ts

@@ -16,7 +16,7 @@ function executeFunction(
   }: {
     isArrow: boolean;
     key: LRUDKey;
-    targetNode?: Node;
+    targetNode: Node;
     preventDefault: PreventDefault;
     stopPropagation: StopPropagation;
   }
@@ -48,8 +48,8 @@ export default function bubbleKey(focusTree: FocusStore, key: LRUDKey) {
   let defaultPrevented = false;
   let propagationStopped = false;
 
-  const focusH = [...focusHierarchy].reverse();
-  if (focusH.length) {
+  const reverseFocusHierarchy = focusHierarchy.slice().reverse();
+  if (reverseFocusHierarchy.length) {
     function preventDefault() {
       defaultPrevented = true;
     }
@@ -58,10 +58,12 @@ export default function bubbleKey(focusTree: FocusStore, key: LRUDKey) {
       propagationStopped = true;
     }
 
-    const sourcingLeafId = focusH[0];
-    const targetNode: Node | undefined = state.nodes?.[sourcingLeafId];
+    const targetNodeId = reverseFocusHierarchy[0];
 
-    focusH.forEach((focusedNodeId) => {
+    // This is the equivalent of event.target within DOM events.
+    const targetNode: Node = state.nodes[targetNodeId] as Node;
+
+    reverseFocusHierarchy.forEach((focusedNodeId) => {
       if (propagationStopped) {
         return;
       }

src/types.ts

@@ -21,6 +21,7 @@ export type ReactNodeRef = Ref<HTMLElement>;
 export interface LRUDEvent {
   key: LRUDKey;
   isArrow: boolean;
+  targetNode: Node;
   node: Node;
   preventDefault: () => void;
   stopPropagation: () => void;