@maestro_io/maestro-web-sdk 3.3.1 → 4.0.0-beta.1

package/dist/src/external/spatial-navigation/spatialNavigation.js

@@ -0,0 +1,876 @@
+import measureLayout from './measureLayout';
+import { KEY_BACK } from './utils';
+import { DIRECTION_DOWN, KEY_ENTER } from './utils';
+import { DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_UP } from './utils';
+import VisualDebugger from './visualDebugger';
+export const ROOT_FOCUS_KEY = 'SN:ROOT';
+const ADJACENT_SLICE_THRESHOLD = 0.2;
+/**
+ * Adjacent slice is 5 times more important than diagonal
+ */
+const ADJACENT_SLICE_WEIGHT = 5;
+const DIAGONAL_SLICE_WEIGHT = 1;
+/**
+ * Main coordinate distance is 5 times more important
+ */
+const MAIN_COORDINATE_WEIGHT = 5;
+const DEFAULT_KEY_MAP = {
+    [DIRECTION_LEFT]: [37],
+    [DIRECTION_UP]: [38],
+    [DIRECTION_RIGHT]: [39],
+    [DIRECTION_DOWN]: [40],
+    [KEY_ENTER]: [13],
+    [KEY_BACK]: [8, 10009, 461],
+};
+const DEBUG_FN_COLORS = ['#0FF', '#FF0', '#F0F'];
+const THROTTLE_OPTIONS = {
+    leading: true,
+    trailing: false,
+};
+export const getChildClosestToOrigin = (children) => {
+    const childrenClosestToOrigin = sortBy(children, ({ layout }) => Math.abs(layout.left) + Math.abs(layout.top));
+    return first(childrenClosestToOrigin);
+};
+const throttle = (func, wait, options = {}) => {
+    let timeout = null;
+    let previous = 0;
+    const { leading = true, trailing = true } = options;
+    return function (...args) {
+        const now = Date.now();
+        if (!previous && !leading)
+            previous = now;
+        const remaining = wait - (now - previous);
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            func.apply(this, args);
+        }
+        else if (!timeout && trailing) {
+            timeout = window.setTimeout(() => {
+                previous = leading ? Date.now() : 0;
+                timeout = null;
+                func.apply(this, args);
+            }, remaining);
+        }
+    };
+};
+const sortBy = (array, iteratee) => [...array].sort((a, b) => {
+    const aValue = iteratee(a);
+    const bValue = iteratee(b);
+    return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+});
+const first = (array) => array[0];
+const difference = (array, values) => array.filter((x) => !values.includes(x));
+const forEach = (array, iteratee) => array.forEach(iteratee);
+/* eslint-disable no-nested-ternary */
+class SpatialNavigation {
+    /**
+     * Used to determine the coordinate that will be used to filter items that are over the "edge"
+     */
+    static getCutoffCoordinate(isVertical, isIncremental, isSibling, layout) {
+        const itemX = layout.left;
+        const itemY = layout.top;
+        const itemWidth = layout.width;
+        const itemHeight = layout.height;
+        const coordinate = isVertical ? itemY : itemX;
+        const itemSize = isVertical ? itemHeight : itemWidth;
+        return isIncremental
+            ? isSibling
+                ? coordinate
+                : coordinate + itemSize
+            : isSibling
+                ? coordinate + itemSize
+                : coordinate;
+    }
+    /**
+     * Returns two corners (a and b) coordinates that are used as a reference points
+     * Where "a" is always leftmost and topmost corner, and "b" is rightmost bottommost corner
+     */
+    static getRefCorners(direction, isSibling, layout) {
+        const itemX = layout.left;
+        const itemY = layout.top;
+        const itemWidth = layout.width;
+        const itemHeight = layout.height;
+        const result = {
+            a: {
+                x: 0,
+                y: 0,
+            },
+            b: {
+                x: 0,
+                y: 0,
+            },
+        };
+        switch (direction) {
+            case DIRECTION_UP: {
+                const y = isSibling ? itemY + itemHeight : itemY;
+                result.a = {
+                    x: itemX,
+                    y,
+                };
+                result.b = {
+                    x: itemX + itemWidth,
+                    y,
+                };
+                break;
+            }
+            case DIRECTION_DOWN: {
+                const y = isSibling ? itemY : itemY + itemHeight;
+                result.a = {
+                    x: itemX,
+                    y,
+                };
+                result.b = {
+                    x: itemX + itemWidth,
+                    y,
+                };
+                break;
+            }
+            case DIRECTION_LEFT: {
+                const x = isSibling ? itemX + itemWidth : itemX;
+                result.a = {
+                    x,
+                    y: itemY,
+                };
+                result.b = {
+                    x,
+                    y: itemY + itemHeight,
+                };
+                break;
+            }
+            case DIRECTION_RIGHT: {
+                const x = isSibling ? itemX : itemX + itemWidth;
+                result.a = {
+                    x,
+                    y: itemY,
+                };
+                result.b = {
+                    x,
+                    y: itemY + itemHeight,
+                };
+                break;
+            }
+            default:
+                break;
+        }
+        return result;
+    }
+    /**
+     * Calculates if the sibling node is intersecting enough with the ref node by the secondary coordinate
+     */
+    static isAdjacentSlice(refCorners, siblingCorners, isVerticalDirection) {
+        const { a: refA, b: refB } = refCorners;
+        const { a: siblingA, b: siblingB } = siblingCorners;
+        const coordinate = isVerticalDirection ? 'x' : 'y';
+        const refCoordinateA = refA[coordinate];
+        const refCoordinateB = refB[coordinate];
+        const siblingCoordinateA = siblingA[coordinate];
+        const siblingCoordinateB = siblingB[coordinate];
+        const thresholdDistance = (refCoordinateB - refCoordinateA) * ADJACENT_SLICE_THRESHOLD;
+        const intersectionLength = Math.max(0, Math.min(refCoordinateB, siblingCoordinateB) -
+            Math.max(refCoordinateA, siblingCoordinateA));
+        return intersectionLength >= thresholdDistance;
+    }
+    static getPrimaryAxisDistance(refCorners, siblingCorners, isVerticalDirection) {
+        const { a: refA } = refCorners;
+        const { a: siblingA } = siblingCorners;
+        const coordinate = isVerticalDirection ? 'y' : 'x';
+        return Math.abs(siblingA[coordinate] - refA[coordinate]);
+    }
+    static getSecondaryAxisDistance(refCorners, siblingCorners, isVerticalDirection) {
+        const { a: refA, b: refB } = refCorners;
+        const { a: siblingA, b: siblingB } = siblingCorners;
+        const coordinate = isVerticalDirection ? 'x' : 'y';
+        const refCoordinateA = refA[coordinate];
+        const refCoordinateB = refB[coordinate];
+        const siblingCoordinateA = siblingA[coordinate];
+        const siblingCoordinateB = siblingB[coordinate];
+        const distancesToCompare = [];
+        distancesToCompare.push(Math.abs(siblingCoordinateA - refCoordinateA));
+        distancesToCompare.push(Math.abs(siblingCoordinateA - refCoordinateB));
+        distancesToCompare.push(Math.abs(siblingCoordinateB - refCoordinateA));
+        distancesToCompare.push(Math.abs(siblingCoordinateB - refCoordinateB));
+        return Math.min(...distancesToCompare);
+    }
+    /**
+     * Inspired by: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS_for_TV/TV_remote_control_navigation#Algorithm_design
+     * Ref Corners are the 2 corners of the current component in the direction of navigation
+     * They used as a base to measure adjacent slices
+     */
+    sortSiblingsByPriority(siblings, currentLayout, direction, _focusKey) {
+        const isVerticalDirection = direction === DIRECTION_DOWN || direction === DIRECTION_UP;
+        const refCorners = SpatialNavigation.getRefCorners(direction, false, currentLayout);
+        return [...siblings].sort((a, b) => {
+            const aCorners = SpatialNavigation.getRefCorners(direction, true, a.layout);
+            const bCorners = SpatialNavigation.getRefCorners(direction, true, b.layout);
+            const aIsAdjacentSlice = SpatialNavigation.isAdjacentSlice(refCorners, aCorners, isVerticalDirection);
+            const bIsAdjacentSlice = SpatialNavigation.isAdjacentSlice(refCorners, bCorners, isVerticalDirection);
+            const aPrimaryAxisFunction = aIsAdjacentSlice
+                ? SpatialNavigation.getPrimaryAxisDistance
+                : SpatialNavigation.getSecondaryAxisDistance;
+            const bPrimaryAxisFunction = bIsAdjacentSlice
+                ? SpatialNavigation.getPrimaryAxisDistance
+                : SpatialNavigation.getSecondaryAxisDistance;
+            const aSecondaryAxisFunction = aIsAdjacentSlice
+                ? SpatialNavigation.getSecondaryAxisDistance
+                : SpatialNavigation.getPrimaryAxisDistance;
+            const bSecondaryAxisFunction = bIsAdjacentSlice
+                ? SpatialNavigation.getSecondaryAxisDistance
+                : SpatialNavigation.getPrimaryAxisDistance;
+            const aPrimaryAxisDistance = aPrimaryAxisFunction(refCorners, aCorners, isVerticalDirection);
+            const bPrimaryAxisDistance = bPrimaryAxisFunction(refCorners, bCorners, isVerticalDirection);
+            const aSecondaryAxisDistance = aSecondaryAxisFunction(refCorners, aCorners, isVerticalDirection);
+            const bSecondaryAxisDistance = bSecondaryAxisFunction(refCorners, bCorners, isVerticalDirection);
+            const aTotalDistancePoints = aPrimaryAxisDistance * MAIN_COORDINATE_WEIGHT +
+                aSecondaryAxisDistance;
+            const bTotalDistancePoints = bPrimaryAxisDistance * MAIN_COORDINATE_WEIGHT +
+                bSecondaryAxisDistance;
+            const aPriority = (aTotalDistancePoints + 1) /
+                (aIsAdjacentSlice ? ADJACENT_SLICE_WEIGHT : DIAGONAL_SLICE_WEIGHT);
+            const bPriority = (bTotalDistancePoints + 1) /
+                (bIsAdjacentSlice ? ADJACENT_SLICE_WEIGHT : DIAGONAL_SLICE_WEIGHT);
+            return aPriority - bPriority;
+        });
+    }
+    constructor(options = {}) {
+        Object.defineProperty(this, "focusableComponents", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "focusKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "parentsHavingFocusedChild", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "nativeMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "throttle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "throttleKeypresses", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pressedKeys", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "paused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "keyDownEventListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "keyUpEventListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "keyMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "debug", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "visualDebugger", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "logIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.focusableComponents = {};
+        this.focusKey = null;
+        this.parentsHavingFocusedChild = [];
+        this.nativeMode = false;
+        this.throttle = 0;
+        this.throttleKeypresses = false;
+        this.pressedKeys = {};
+        this.paused = true;
+        this.keyDownEventListener = null;
+        this.keyUpEventListener = null;
+        this.keyMap = DEFAULT_KEY_MAP;
+        this.debug = false;
+        this.visualDebugger = null;
+        this.logIndex = 0;
+        this.onKeyEvent = this.onKeyEvent.bind(this);
+        this.pause = this.pause.bind(this);
+        this.resume = this.resume.bind(this);
+        this.setFocus = this.setFocus.bind(this);
+        this.updateAllLayouts = this.updateAllLayouts.bind(this);
+        this.navigateByDirection = this.navigateByDirection.bind(this);
+        this.init = this.init.bind(this);
+        this.setKeyMap = this.setKeyMap.bind(this);
+        this.init(options);
+    }
+    init({ debug = false, visualDebug = false, nativeMode = false, throttle = 0, throttleKeypresses = false, } = {}) {
+        this.nativeMode = nativeMode;
+        this.throttleKeypresses = throttleKeypresses;
+        this.debug = debug;
+        if (!this.nativeMode) {
+            if (Number.isInteger(throttle) && throttle > 0) {
+                this.throttle = throttle;
+            }
+            this.bindEventHandlers();
+            if (visualDebug) {
+                this.visualDebugger = new VisualDebugger();
+                this.startDrawLayouts();
+            }
+        }
+    }
+    startDrawLayouts() {
+        const draw = () => {
+            requestAnimationFrame(() => {
+                this.visualDebugger?.clearLayouts();
+                Object.entries(this.focusableComponents).forEach(([focusKey, component]) => {
+                    this.visualDebugger?.drawLayout(component.layout, focusKey, component.parentFocusKey);
+                });
+                draw();
+            });
+        };
+        draw();
+    }
+    destroy() {
+        this.unbindEventHandlers();
+    }
+    getEventType(keyCode) {
+        return Object.keys(this.getKeyMap()).find((key) => this.getKeyMap()[key].includes(keyCode));
+    }
+    bindEventHandlers() {
+        if (typeof window !== 'undefined' && window.addEventListener) {
+            const keyDownHandler = (event) => {
+                if (this.paused === true) {
+                    return;
+                }
+                if (this.debug) {
+                    this.logIndex += 1;
+                }
+                const eventType = this.getEventType(event.keyCode);
+                if (!eventType) {
+                    return;
+                }
+                this.pressedKeys[eventType] = this.pressedKeys[eventType]
+                    ? this.pressedKeys[eventType] + 1
+                    : 1;
+                event.preventDefault();
+                event.stopPropagation();
+                const details = {
+                    pressedKeys: this.pressedKeys,
+                };
+                if (this.focusKey && this.getNodeLayoutByFocusKey(this.focusKey)) {
+                    details.layout = this.getNodeLayoutByFocusKey(this.focusKey);
+                }
+                if (eventType === KEY_ENTER && this.focusKey) {
+                    this.onEnterPress(details);
+                    return;
+                }
+                if (eventType === KEY_BACK && this.focusKey) {
+                    this.onBackPress(details);
+                    return;
+                }
+                const preventDefaultNavigation = this.onArrowPress(eventType, details) === false;
+                if (preventDefaultNavigation) {
+                    this.log('keyDownEventListener', 'default navigation prevented');
+                    this.visualDebugger?.clear();
+                }
+                else {
+                    this.onKeyEvent(event);
+                }
+            };
+            this.keyDownEventListener = this.throttle
+                ? throttle(keyDownHandler, this.throttle, THROTTLE_OPTIONS)
+                : keyDownHandler;
+            this.keyUpEventListener = (event) => {
+                const eventType = this.getEventType(event.keyCode);
+                if (eventType) {
+                    delete this.pressedKeys[eventType];
+                }
+                if (this.throttle && !this.throttleKeypresses) {
+                    // @ts-ignore
+                    this.keyDownEventListener?.cancel?.();
+                }
+                if (eventType === KEY_ENTER && this.focusKey) {
+                    this.onEnterRelease();
+                }
+            };
+            window.addEventListener('keyup', this.keyUpEventListener);
+            window.addEventListener('keydown', this.keyDownEventListener);
+        }
+    }
+    unbindEventHandlers() {
+        if (typeof window !== 'undefined' && window.removeEventListener) {
+            window.removeEventListener('keydown', this.keyDownEventListener);
+            this.keyDownEventListener = null;
+            if (this.throttle) {
+                window.removeEventListener('keyup', this.keyUpEventListener);
+                this.keyUpEventListener = null;
+            }
+        }
+    }
+    onEnterPress(details) {
+        const component = this.focusableComponents[this.focusKey];
+        if (!component) {
+            this.log('onEnterPress', 'noComponent');
+            return;
+        }
+        if (!component.focusable) {
+            this.log('onEnterPress', 'componentNotFocusable');
+            return;
+        }
+        component.onEnterPressHandler?.(details);
+    }
+    onBackPress(details) {
+        const component = this.focusableComponents[this.focusKey];
+        if (!component) {
+            this.log('onBackPress', 'noComponent');
+            return;
+        }
+        if (!component.focusable) {
+            this.log('onBackPress', 'componentNotFocusable');
+            return;
+        }
+        component.onBackPressHandler?.(details);
+    }
+    onEnterRelease() {
+        const component = this.focusableComponents[this.focusKey];
+        if (!component) {
+            this.log('onEnterRelease', 'noComponent');
+            return;
+        }
+        if (!component.focusable) {
+            this.log('onEnterRelease', 'componentNotFocusable');
+            return;
+        }
+        component.onEnterReleaseHandler?.();
+    }
+    onArrowPress(direction, details) {
+        const component = this.focusableComponents[this.focusKey];
+        if (!component) {
+            this.log('onArrowPress', 'noComponent');
+            return undefined;
+        }
+        return component.onArrowPressHandler?.(direction, details);
+    }
+    navigateByDirection(direction, details = {}) {
+        if (this.paused === true) {
+            return;
+        }
+        const validDirections = [
+            DIRECTION_DOWN,
+            DIRECTION_UP,
+            DIRECTION_LEFT,
+            DIRECTION_RIGHT,
+        ];
+        if (validDirections.includes(direction)) {
+            this.log('navigateByDirection', 'direction', direction);
+            this.smartNavigate(direction, null, details);
+        }
+        else {
+            this.log('navigateByDirection', `Invalid direction. You passed: \`${direction}\`, but you can use only these: `, validDirections);
+        }
+    }
+    onKeyEvent(event) {
+        this.visualDebugger?.clear();
+        const direction = Object.keys(this.getKeyMap()).find((key) => this.getKeyMap()[key].includes(event.keyCode));
+        if (direction) {
+            this.smartNavigate(direction, null, { event });
+        }
+    }
+    smartNavigate(direction, fromParentFocusKey, details) {
+        this.log('smartNavigate', 'direction', direction);
+        this.log('smartNavigate', 'fromParentFocusKey', fromParentFocusKey);
+        this.log('smartNavigate', 'this.focusKey', this.focusKey);
+        if (!this.nativeMode && !fromParentFocusKey) {
+            Object.values(this.focusableComponents).forEach((component) => {
+                component.layoutUpdated = false;
+            });
+        }
+        const currentComponent = this.focusableComponents[fromParentFocusKey || this.focusKey];
+        this.log('smartNavigate', 'currentComponent', currentComponent ? currentComponent.focusKey : undefined, currentComponent ? currentComponent.node : undefined);
+        if (currentComponent) {
+            this.updateLayout(currentComponent.focusKey);
+            const { parentFocusKey, focusKey, layout } = currentComponent;
+            const isVerticalDirection = direction === DIRECTION_DOWN || direction === DIRECTION_UP;
+            const isIncrementalDirection = direction === DIRECTION_DOWN || direction === DIRECTION_RIGHT;
+            const currentCutoffCoordinate = SpatialNavigation.getCutoffCoordinate(isVerticalDirection, isIncrementalDirection, false, layout);
+            /**
+             * Get only the siblings with the coords on the way of our moving direction
+             */
+            const siblings = Object.values(this.focusableComponents).filter((component) => {
+                if (component.parentFocusKey === parentFocusKey &&
+                    component.focusable) {
+                    this.updateLayout(component.focusKey);
+                    const siblingCutoffCoordinate = SpatialNavigation.getCutoffCoordinate(isVerticalDirection, isIncrementalDirection, true, component.layout);
+                    return isIncrementalDirection
+                        ? siblingCutoffCoordinate >= currentCutoffCoordinate
+                        : siblingCutoffCoordinate <= currentCutoffCoordinate;
+                }
+                return false;
+            });
+            if (this.debug) {
+                this.log('smartNavigate', 'siblings', siblings);
+            }
+            if (siblings.length > 0) {
+                const sortedSiblings = this.sortSiblingsByPriority(siblings, layout, direction, focusKey);
+                if (this.debug) {
+                    this.log('smartNavigate', 'sortedSiblings', sortedSiblings);
+                }
+                const nextComponent = sortedSiblings[0];
+                if (nextComponent) {
+                    this.setFocus(nextComponent.focusKey, details);
+                }
+            }
+            else {
+                this.log('smartNavigate', 'noSiblings');
+                if (parentFocusKey) {
+                    this.smartNavigate(direction, parentFocusKey, details);
+                }
+            }
+        }
+    }
+    saveLastFocusedChildKey(component, focusKey) {
+        if (component) {
+            this.log('saveLastFocusedChildKey', `${component.focusKey} lastFocusedChildKey set`, focusKey);
+            component.lastFocusedChildKey = focusKey;
+        }
+    }
+    log(functionName, debugString, ...rest) {
+        if (this.debug) {
+            console.log(`%c${functionName}%c${debugString}`, `background: ${DEBUG_FN_COLORS[this.logIndex % DEBUG_FN_COLORS.length]}; color: black; padding: 1px 5px;`, 'background: #333; color: #BADA55; padding: 1px 5px;', ...rest);
+        }
+    }
+    getNextFocusKey(targetFocusKey) {
+        this.log('getNextFocusKey', 'targetFocusKey', targetFocusKey);
+        const targetComponent = this.focusableComponents[targetFocusKey];
+        if (!targetComponent) {
+            return targetFocusKey;
+        }
+        const { trackChildren } = targetComponent;
+        if (!trackChildren) {
+            return targetFocusKey;
+        }
+        const children = Object.values(this.focusableComponents).filter((component) => component.parentFocusKey === targetFocusKey && component.focusable);
+        if (children.length === 0) {
+            return targetFocusKey;
+        }
+        const { lastFocusedChildKey, preferredChildFocusKey } = targetComponent;
+        /**
+         * First of all trying to focus last focused child
+         */
+        if (lastFocusedChildKey &&
+            !targetComponent.forgetLastFocusedChild &&
+            this.isParticipatingFocusableComponent(lastFocusedChildKey)) {
+            this.log('getNextFocusKey', 'lastFocusedChildKey will be focused', lastFocusedChildKey);
+            return this.getNextFocusKey(lastFocusedChildKey);
+        }
+        /**
+         * If there is no lastFocusedChild, trying to focus the preferred focused key
+         */
+        if (preferredChildFocusKey &&
+            this.isParticipatingFocusableComponent(preferredChildFocusKey)) {
+            this.log('getNextFocusKey', 'preferredChildFocusKey will be focused', preferredChildFocusKey);
+            return this.getNextFocusKey(preferredChildFocusKey);
+        }
+        /**
+         * Otherwise, trying to focus something by coordinates
+         */
+        children.forEach((component) => this.updateLayout(component.focusKey));
+        const { focusKey: childKey } = getChildClosestToOrigin(children);
+        this.log('getNextFocusKey', 'childKey will be focused', childKey);
+        return this.getNextFocusKey(childKey);
+    }
+    addFocusable({ focusKey, node, parentFocusKey, onEnterPressHandler, onEnterReleaseHandler, onBackPressHandler, onArrowPressHandler, onBecameFocusedHandler, onBecameBlurredHandler, forgetLastFocusedChild, trackChildren, onUpdateFocus, onUpdateHasFocusedChild, preferredChildFocusKey, autoRestoreFocus, focusable = true, blockNavigationOut, }) {
+        this.focusableComponents[focusKey] = {
+            focusKey,
+            node,
+            parentFocusKey,
+            onEnterPressHandler,
+            onEnterReleaseHandler,
+            onBackPressHandler,
+            onArrowPressHandler,
+            onBecameFocusedHandler,
+            onBecameBlurredHandler,
+            onUpdateFocus,
+            onUpdateHasFocusedChild,
+            forgetLastFocusedChild,
+            trackChildren,
+            lastFocusedChildKey: null,
+            preferredChildFocusKey,
+            focusable,
+            blockNavigationOut,
+            autoRestoreFocus,
+            layout: {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                left: 0,
+                top: 0,
+                node,
+            },
+            layoutUpdated: false,
+        };
+        if (this.nativeMode) {
+            return;
+        }
+        this.updateLayout(focusKey);
+        /**
+         * If for some reason this component was already focused before it was added, call the update
+         */
+        if (focusKey === this.focusKey) {
+            this.setFocus(focusKey);
+        }
+    }
+    removeFocusable({ focusKey }) {
+        const componentToRemove = this.focusableComponents[focusKey];
+        if (componentToRemove) {
+            const { parentFocusKey } = componentToRemove;
+            Reflect.deleteProperty(this.focusableComponents, focusKey);
+            const parentComponent = this.focusableComponents[parentFocusKey];
+            const wasFocused = focusKey === this.focusKey;
+            // If a component was unmounted and it was focused, we need to clear focusKey if the focus is in the Client App so the focus don't get lost.
+            if (wasFocused) {
+                if (this.paused) {
+                    this.focusKey = null;
+                }
+                else {
+                    // if its not paused, we need to focus on a component that is visible so we don't lose focus
+                    this.setFocus('PANEL_NAVIGATION');
+                }
+            }
+            /**
+             * If the component was stored as lastFocusedChild, clear lastFocusedChildKey from parent
+             */
+            parentComponent &&
+                parentComponent.lastFocusedChildKey === focusKey &&
+                (parentComponent.lastFocusedChildKey = null);
+            if (this.nativeMode) {
+                return;
+            }
+            /**
+             * If the component was also focused at this time, focus another one
+             */
+            if (wasFocused &&
+                parentComponent &&
+                parentComponent.autoRestoreFocus &&
+                !this.paused) {
+                this.setFocus(parentFocusKey);
+            }
+        }
+    }
+    getNodeLayoutByFocusKey(focusKey) {
+        const component = this.focusableComponents[focusKey];
+        if (component) {
+            this.updateLayout(component.focusKey);
+            return component.layout;
+        }
+        return null;
+    }
+    setCurrentFocusedKey(newFocusKey, details) {
+        if (this.isFocusableComponent(this.focusKey) &&
+            newFocusKey !== this.focusKey) {
+            const oldComponent = this.focusableComponents[this.focusKey];
+            const parentComponent = this.focusableComponents[oldComponent.parentFocusKey];
+            this.saveLastFocusedChildKey(parentComponent, this.focusKey);
+            oldComponent.onUpdateFocus?.(false);
+            oldComponent.onBecameBlurredHandler?.(this.getNodeLayoutByFocusKey(this.focusKey), details);
+        }
+        this.focusKey = newFocusKey;
+        if (this.isFocusableComponent(this.focusKey)) {
+            const newComponent = this.focusableComponents[this.focusKey];
+            newComponent.onUpdateFocus?.(true);
+            newComponent.onBecameFocusedHandler?.(this.getNodeLayoutByFocusKey(this.focusKey), details);
+        }
+    }
+    updateParentsHasFocusedChild(focusKey, details) {
+        const parents = [];
+        let currentComponent = this.focusableComponents[focusKey];
+        /**
+         * Recursively iterate the tree up and find all the parents' focus keys
+         */
+        while (currentComponent) {
+            const { parentFocusKey } = currentComponent;
+            const parentComponent = this.focusableComponents[parentFocusKey];
+            if (parentComponent) {
+                const { focusKey: currentParentFocusKey } = parentComponent;
+                parents.push(currentParentFocusKey);
+            }
+            currentComponent = parentComponent;
+        }
+        const parentsToRemoveFlag = difference(this.parentsHavingFocusedChild, parents);
+        const parentsToAddFlag = difference(parents, this.parentsHavingFocusedChild);
+        forEach(parentsToRemoveFlag, (parentFocusKey) => {
+            const parentComponent = this.focusableComponents[parentFocusKey];
+            parentComponent &&
+                parentComponent.trackChildren &&
+                parentComponent.onUpdateHasFocusedChild?.(false);
+            this.onIntermediateNodeBecameBlurred(parentFocusKey, details);
+        });
+        forEach(parentsToAddFlag, (parentFocusKey) => {
+            const parentComponent = this.focusableComponents[parentFocusKey];
+            parentComponent &&
+                parentComponent.trackChildren &&
+                parentComponent.onUpdateHasFocusedChild?.(true);
+            this.onIntermediateNodeBecameFocused(parentFocusKey, details);
+        });
+        this.parentsHavingFocusedChild = parents;
+    }
+    updateParentsLastFocusedChild(focusKey) {
+        let currentComponent = this.focusableComponents[focusKey];
+        /**
+         * Recursively iterate the tree up and update all the parent's lastFocusedChild
+         */
+        while (currentComponent) {
+            const { parentFocusKey } = currentComponent;
+            const parentComponent = this.focusableComponents[parentFocusKey];
+            if (parentComponent) {
+                this.saveLastFocusedChildKey(parentComponent, currentComponent.focusKey);
+            }
+            currentComponent = parentComponent;
+        }
+    }
+    getKeyMap() {
+        return this.keyMap;
+    }
+    setKeyMap(keyMap) {
+        this.keyMap = {
+            ...this.getKeyMap(),
+            ...keyMap,
+        };
+    }
+    isFocusableComponent(focusKey) {
+        return !!this.focusableComponents[focusKey];
+    }
+    /**
+     * Checks whether the focusableComponent is actually participating in spatial navigation (in other words, is a
+     * 'focusable' focusableComponent). Seems less confusing than calling it isFocusableFocusableComponent()
+     */
+    isParticipatingFocusableComponent(focusKey) {
+        return (this.isFocusableComponent(focusKey) &&
+            this.focusableComponents[focusKey].focusable);
+    }
+    onIntermediateNodeBecameFocused(focusKey, details) {
+        this.isParticipatingFocusableComponent(focusKey) &&
+            this.focusableComponents[focusKey].onBecameFocusedHandler?.(this.getNodeLayoutByFocusKey(focusKey), details);
+    }
+    onIntermediateNodeBecameBlurred(focusKey, details) {
+        this.isParticipatingFocusableComponent(focusKey) &&
+            this.focusableComponents[focusKey].onBecameBlurredHandler?.(this.getNodeLayoutByFocusKey(focusKey), details);
+    }
+    pause() {
+        this.parentsHavingFocusedChild = [];
+        this.pressedKeys = {};
+        this.log('pause', 'paused');
+        this.visualDebugger?.clear();
+        this.visualDebugger?.clearLayouts();
+        this.getFocusableComponents().forEach((component) => {
+            component.onUpdateFocus?.(false);
+        });
+        this.paused = true;
+    }
+    resume() {
+        this.paused = false;
+    }
+    setFocus(targetFocusKey, details = {}) {
+        const lastFocusedKey = this.focusKey;
+        const newFocusKey = this.getNextFocusKey(targetFocusKey);
+        this.log('setFocus', 'newFocusKey', newFocusKey);
+        this.setCurrentFocusedKey(newFocusKey, details);
+        this.updateParentsHasFocusedChild(newFocusKey, details);
+        this.updateParentsLastFocusedChild(lastFocusedKey);
+    }
+    updateAllLayouts() {
+        if (this.nativeMode) {
+            return;
+        }
+        Object.entries(this.focusableComponents).forEach(([focusKey]) => {
+            this.updateLayout(focusKey);
+        });
+    }
+    updateLayout(focusKey) {
+        const component = this.focusableComponents[focusKey];
+        if (!component || this.nativeMode || component.layoutUpdated) {
+            return;
+        }
+        const { node } = component;
+        measureLayout(node, (x, y, width, height, left, top) => {
+            component.layout = {
+                x,
+                y,
+                width,
+                height,
+                left,
+                top,
+                node,
+            };
+        });
+    }
+    updateFocusable(focusKey, { node, preferredChildFocusKey, focusable, blockNavigationOut, }) {
+        if (this.nativeMode) {
+            return;
+        }
+        const component = this.focusableComponents[focusKey];
+        if (component) {
+            component.preferredChildFocusKey = preferredChildFocusKey;
+            component.focusable = focusable ?? component.focusable;
+            component.blockNavigationOut = blockNavigationOut;
+            if (node) {
+                component.node = node;
+            }
+        }
+    }
+    isNativeMode() {
+        return this.nativeMode;
+    }
+    getFocusableComponents() {
+        return Object.values(this.focusableComponents);
+    }
+    getFocusableComponentsByParentFocusKey(parentFocusKey) {
+        return Object.values(this.focusableComponents).filter((component) => component.parentFocusKey === parentFocusKey);
+    }
+}
+/**
+ * Export singleton
+ */
+export default SpatialNavigation;