@maestro_io/maestro-web-sdk 4.0.0-beta.4 → 4.0.0

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

@@ -1,876 +0,0 @@
-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;