@noriginmedia/norigin-spatial-navigation-core 3.0.0

package/dist/index.mjs

@@ -0,0 +1,1220 @@
+import { debounce, sortBy, findKey, throttle, forOwn, filter, first, difference, forEach } from 'lodash-es';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var WritingDirection;
+(function (WritingDirection) {
+    WritingDirection[WritingDirection["LTR"] = 0] = "LTR";
+    WritingDirection[WritingDirection["RTL"] = 1] = "RTL";
+})(WritingDirection || (WritingDirection = {}));
+var WritingDirection$1 = WritingDirection;
+
+// We'll make VisualDebugger no-op for any environments lacking a DOM (e.g. SSR and React Native non-web platforms).
+var hasDOM = typeof window !== 'undefined' && window.document;
+var WIDTH = hasDOM ? window.innerWidth : 0;
+var HEIGHT = hasDOM ? window.innerHeight : 0;
+var VisualDebugger = /** @class */ (function () {
+    function VisualDebugger(writingDirection) {
+        if (hasDOM) {
+            this.debugCtx = VisualDebugger.createCanvas('sn-debug', '1010', writingDirection);
+            this.layoutsCtx = VisualDebugger.createCanvas('sn-layouts', '1000', writingDirection);
+            this.writingDirection = writingDirection;
+        }
+    }
+    VisualDebugger.createCanvas = function (id, zIndex, writingDirection) {
+        var canvas = document.querySelector("#".concat(id)) || document.createElement('canvas');
+        canvas.setAttribute('id', id);
+        canvas.setAttribute('dir', writingDirection === WritingDirection$1.LTR ? 'ltr' : 'rtl');
+        var ctx = canvas.getContext('2d');
+        canvas.style.zIndex = zIndex;
+        canvas.style.position = 'fixed';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        document.body.appendChild(canvas);
+        canvas.width = WIDTH;
+        canvas.height = HEIGHT;
+        return ctx;
+    };
+    VisualDebugger.prototype.clear = function () {
+        if (!hasDOM) {
+            return;
+        }
+        this.debugCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    };
+    VisualDebugger.prototype.clearLayouts = function () {
+        if (!hasDOM) {
+            return;
+        }
+        this.layoutsCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    };
+    VisualDebugger.prototype.drawLayout = function (layout, focusKey, parentFocusKey) {
+        if (!hasDOM) {
+            return;
+        }
+        this.layoutsCtx.strokeStyle = 'green';
+        this.layoutsCtx.strokeRect(layout.left, layout.top, layout.width, layout.height);
+        this.layoutsCtx.font = '8px monospace';
+        this.layoutsCtx.fillStyle = 'red';
+        var horizontalStartDirection = this.writingDirection === WritingDirection$1.LTR ? 'left' : 'right';
+        var horizontalStartCoordinate = layout[horizontalStartDirection];
+        this.layoutsCtx.fillText(focusKey, horizontalStartCoordinate, layout.top + 10);
+        this.layoutsCtx.fillText(parentFocusKey, horizontalStartCoordinate, layout.top + 25);
+        this.layoutsCtx.fillText("".concat(horizontalStartDirection, ": ").concat(horizontalStartCoordinate), horizontalStartCoordinate, layout.top + 40);
+        this.layoutsCtx.fillText("top: ".concat(layout.top), horizontalStartCoordinate, layout.top + 55);
+    };
+    VisualDebugger.prototype.drawPoint = function (x, y, color, size) {
+        if (color === void 0) { color = 'blue'; }
+        if (size === void 0) { size = 10; }
+        if (!hasDOM) {
+            return;
+        }
+        this.debugCtx.strokeStyle = color;
+        this.debugCtx.lineWidth = 3;
+        this.debugCtx.strokeRect(x - size / 2, y - size / 2, size, size);
+    };
+    return VisualDebugger;
+}());
+
+var ELEMENT_NODE = 1;
+var getRect = function (node) {
+    var offsetParent = node.offsetParent;
+    var height = node.offsetHeight;
+    var width = node.offsetWidth;
+    var left = node.offsetLeft;
+    var top = node.offsetTop;
+    while (offsetParent && offsetParent.nodeType === ELEMENT_NODE) {
+        left += offsetParent.offsetLeft - offsetParent.scrollLeft;
+        top += offsetParent.offsetTop - offsetParent.scrollTop;
+        offsetParent = offsetParent.offsetParent;
+    }
+    return {
+        height: height,
+        left: left,
+        top: top,
+        width: width
+    };
+};
+var measureLayout = function (node) {
+    var relativeNode = node && node.parentElement;
+    if (node && relativeNode) {
+        var relativeRect = getRect(relativeNode);
+        var _a = getRect(node), height = _a.height, left = _a.left, top_1 = _a.top, width = _a.width;
+        var x = left - relativeRect.left;
+        var y = top_1 - relativeRect.top;
+        return {
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+            left: left,
+            top: top_1,
+            get right() {
+                return this.left + this.width;
+            },
+            get bottom() {
+                return this.top + this.height;
+            }
+        };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    };
+};
+var getBoundingClientRect = function (node) {
+    if (node && node.getBoundingClientRect) {
+        var rect = node.getBoundingClientRect();
+        return {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            left: rect.left,
+            top: rect.top,
+            get right() {
+                return this.left + this.width;
+            },
+            get bottom() {
+                return this.top + this.height;
+            }
+        };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    };
+};
+
+var _a;
+var DIRECTION_LEFT = 'left';
+var DIRECTION_RIGHT = 'right';
+var DIRECTION_UP = 'up';
+var DIRECTION_DOWN = 'down';
+var KEY_ENTER = 'enter';
+var DEFAULT_KEY_MAP = (_a = {},
+    _a[DIRECTION_LEFT] = [37, 'ArrowLeft'],
+    _a[DIRECTION_UP] = [38, 'ArrowUp'],
+    _a[DIRECTION_RIGHT] = [39, 'ArrowRight'],
+    _a[DIRECTION_DOWN] = [40, 'ArrowDown'],
+    _a[KEY_ENTER] = [13, 'Enter'],
+    _a);
+var ROOT_FOCUS_KEY = 'SN:ROOT';
+var ADJACENT_SLICE_THRESHOLD = 0.2;
+/**
+ * Adjacent slice is 5 times more important than diagonal
+ */
+var ADJACENT_SLICE_WEIGHT = 5;
+var DIAGONAL_SLICE_WEIGHT = 1;
+/**
+ * Main coordinate distance is 5 times more important
+ */
+var MAIN_COORDINATE_WEIGHT = 5;
+var AUTO_RESTORE_FOCUS_DELAY = 300;
+var DEBUG_FN_COLORS = ['#0FF', '#FF0', '#F0F'];
+var THROTTLE_OPTIONS = {
+    leading: true,
+    trailing: false
+};
+var getChildClosestToOrigin = function (children, writingDirection) {
+    var comparator = writingDirection === WritingDirection$1.LTR
+        ? function (_a) {
+            var layout = _a.layout;
+            return Math.abs(layout.left) + Math.abs(layout.top);
+        }
+        : function (_a) {
+            var layout = _a.layout;
+            return Math.abs(window.innerWidth - layout.right) + Math.abs(layout.top);
+        };
+    var childrenClosestToOrigin = sortBy(children, comparator);
+    return first(childrenClosestToOrigin);
+};
+/**
+ * Takes either a BackwardsCompatibleKeyMap and transforms it into a the new KeyMap format
+ * to ensure backwards compatibility.
+ */
+var normalizeKeyMap = function (keyMap) {
+    var newKeyMap = {};
+    Object.entries(keyMap).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        newKeyMap[key] = Array.isArray(value) ? value : [value];
+    });
+    return newKeyMap;
+};
+var SpatialNavigationService = /** @class */ (function () {
+    function SpatialNavigationService() {
+        /**
+         * Storage for all focusable components
+         */
+        this.focusableComponents = {};
+        /**
+         * Storing current focused key
+         */
+        this.focusKey = null;
+        /**
+         * This collection contains focus keys of the elements that are having a child focused
+         * Might be handy for styling of certain parent components if their child is focused.
+         */
+        this.parentsHavingFocusedChild = [];
+        this.domNodeFocusOptions = {};
+        this.enabled = false;
+        this.nativeMode = false;
+        this.throttle = 0;
+        this.throttleKeypresses = false;
+        this.useGetBoundingClientRect = false;
+        this.shouldFocusDOMNode = false;
+        this.shouldUseNativeEvents = false;
+        this.writingDirection = WritingDirection$1.LTR;
+        this.pressedKeys = {};
+        /**
+         * Flag used to block key events from this service
+         * @type {boolean}
+         */
+        this.paused = false;
+        this.keyDownEventListener = null;
+        this.keyUpEventListener = null;
+        this.keyMap = DEFAULT_KEY_MAP;
+        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.setThrottle = this.setThrottle.bind(this);
+        this.destroy = this.destroy.bind(this);
+        this.setKeyMap = this.setKeyMap.bind(this);
+        this.getCurrentFocusKey = this.getCurrentFocusKey.bind(this);
+        this.doesFocusableExist = this.doesFocusableExist.bind(this);
+        this.updateRtl = this.updateRtl.bind(this);
+        this.setFocusDebounced = debounce(this.setFocus, AUTO_RESTORE_FOCUS_DELAY, {
+            leading: false,
+            trailing: true
+        });
+        this.debug = false;
+        this.visualDebugger = null;
+        this.logIndex = 0;
+        this.distanceCalculationMethod = 'corners';
+    }
+    /**
+     * Used to determine the coordinate that will be used to filter items that are over the "edge"
+     */
+    SpatialNavigationService.getCutoffCoordinate = function (isVertical, isIncremental, isSibling, layout, writingDirection) {
+        var itemStart = isVertical
+            ? layout.top
+            : writingDirection === WritingDirection$1.LTR
+                ? layout.left
+                : layout.right;
+        var itemEnd = isVertical
+            ? layout.bottom
+            : writingDirection === WritingDirection$1.LTR
+                ? layout.right
+                : layout.left;
+        return isIncremental
+            ? isSibling
+                ? itemStart
+                : itemEnd
+            : isSibling
+                ? itemEnd
+                : itemStart;
+    };
+    /**
+     * 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
+     */
+    SpatialNavigationService.getRefCorners = function (direction, isSibling, layout) {
+        var result = {
+            a: {
+                x: 0,
+                y: 0
+            },
+            b: {
+                x: 0,
+                y: 0
+            }
+        };
+        switch (direction) {
+            case DIRECTION_UP: {
+                var y = isSibling ? layout.bottom : layout.top;
+                result.a = {
+                    x: layout.left,
+                    y: y
+                };
+                result.b = {
+                    x: layout.right,
+                    y: y
+                };
+                break;
+            }
+            case DIRECTION_DOWN: {
+                var y = isSibling ? layout.top : layout.bottom;
+                result.a = {
+                    x: layout.left,
+                    y: y
+                };
+                result.b = {
+                    x: layout.right,
+                    y: y
+                };
+                break;
+            }
+            case DIRECTION_LEFT: {
+                var x = isSibling ? layout.right : layout.left;
+                result.a = {
+                    x: x,
+                    y: layout.top
+                };
+                result.b = {
+                    x: x,
+                    y: layout.bottom
+                };
+                break;
+            }
+            case DIRECTION_RIGHT: {
+                var x = isSibling ? layout.left : layout.right;
+                result.a = {
+                    x: x,
+                    y: layout.top
+                };
+                result.b = {
+                    x: x,
+                    y: layout.bottom
+                };
+                break;
+            }
+        }
+        return result;
+    };
+    /**
+     * Calculates if the sibling node is intersecting enough with the ref node by the secondary coordinate
+     */
+    SpatialNavigationService.isAdjacentSlice = function (refCorners, siblingCorners, isVerticalDirection) {
+        var refA = refCorners.a, refB = refCorners.b;
+        var siblingA = siblingCorners.a, siblingB = siblingCorners.b;
+        var coordinate = isVerticalDirection ? 'x' : 'y';
+        var refCoordinateA = refA[coordinate];
+        var refCoordinateB = refB[coordinate];
+        var siblingCoordinateA = siblingA[coordinate];
+        var siblingCoordinateB = siblingB[coordinate];
+        var thresholdDistance = (refCoordinateB - refCoordinateA) * ADJACENT_SLICE_THRESHOLD;
+        var intersectionLength = Math.max(0, Math.min(refCoordinateB, siblingCoordinateB) -
+            Math.max(refCoordinateA, siblingCoordinateA));
+        return intersectionLength >= thresholdDistance;
+    };
+    SpatialNavigationService.getPrimaryAxisDistance = function (refCorners, siblingCorners, isVerticalDirection) {
+        var refA = refCorners.a;
+        var siblingA = siblingCorners.a;
+        var coordinate = isVerticalDirection ? 'y' : 'x';
+        return Math.abs(siblingA[coordinate] - refA[coordinate]);
+    };
+    SpatialNavigationService.getSecondaryAxisDistance = function (refCorners, siblingCorners, isVerticalDirection, distanceCalculationMethod, customDistanceCalculationFunction) {
+        if (customDistanceCalculationFunction) {
+            return customDistanceCalculationFunction(refCorners, siblingCorners, isVerticalDirection, distanceCalculationMethod);
+        }
+        var refA = refCorners.a, refB = refCorners.b;
+        var siblingA = siblingCorners.a, siblingB = siblingCorners.b;
+        var coordinate = isVerticalDirection ? 'x' : 'y';
+        var refCoordinateA = refA[coordinate];
+        var refCoordinateB = refB[coordinate];
+        var siblingCoordinateA = siblingA[coordinate];
+        var siblingCoordinateB = siblingB[coordinate];
+        if (distanceCalculationMethod === 'center') {
+            var refCoordinateCenter = (refCoordinateA + refCoordinateB) / 2;
+            var siblingCoordinateCenter = (siblingCoordinateA + siblingCoordinateB) / 2;
+            return Math.abs(refCoordinateCenter - siblingCoordinateCenter);
+        }
+        if (distanceCalculationMethod === 'edges') {
+            // 1. Find the minimum and maximum coordinates for both ref and sibling
+            var refCoordinateEdgeMin = Math.min(refCoordinateA, refCoordinateB);
+            var siblingCoordinateEdgeMin = Math.min(siblingCoordinateA, siblingCoordinateB);
+            var refCoordinateEdgeMax = Math.max(refCoordinateA, refCoordinateB);
+            var siblingCoordinateEdgeMax = Math.max(siblingCoordinateA, siblingCoordinateB);
+            // 2. Calculate the distances between the closest edges
+            var minEdgeDistance = Math.abs(refCoordinateEdgeMin - siblingCoordinateEdgeMin);
+            var maxEdgeDistance = Math.abs(refCoordinateEdgeMax - siblingCoordinateEdgeMax);
+            // 3. Return the smallest distance between the edges
+            return Math.min(minEdgeDistance, maxEdgeDistance);
+        }
+        // Default to corners
+        var distancesToCompare = [
+            Math.abs(siblingCoordinateA - refCoordinateA),
+            Math.abs(siblingCoordinateA - refCoordinateB),
+            Math.abs(siblingCoordinateB - refCoordinateA),
+            Math.abs(siblingCoordinateB - refCoordinateB)
+        ];
+        return Math.min.apply(Math, 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 are used as a base to measure adjacent slices
+     */
+    SpatialNavigationService.prototype.sortSiblingsByPriority = function (siblings, currentLayout, direction, focusKey) {
+        var _this = this;
+        var isVerticalDirection = direction === DIRECTION_DOWN || direction === DIRECTION_UP;
+        var refCorners = SpatialNavigationService.getRefCorners(direction, false, currentLayout);
+        return sortBy(siblings, function (sibling) {
+            var siblingCorners = SpatialNavigationService.getRefCorners(direction, true, sibling.layout);
+            var isAdjacentSlice = SpatialNavigationService.isAdjacentSlice(refCorners, siblingCorners, isVerticalDirection);
+            var primaryAxisFunction = isAdjacentSlice
+                ? SpatialNavigationService.getPrimaryAxisDistance
+                : SpatialNavigationService.getSecondaryAxisDistance;
+            var secondaryAxisFunction = isAdjacentSlice
+                ? SpatialNavigationService.getSecondaryAxisDistance
+                : SpatialNavigationService.getPrimaryAxisDistance;
+            var primaryAxisDistance = primaryAxisFunction(refCorners, siblingCorners, isVerticalDirection, _this.distanceCalculationMethod, _this.customDistanceCalculationFunction);
+            var secondaryAxisDistance = secondaryAxisFunction(refCorners, siblingCorners, isVerticalDirection, _this.distanceCalculationMethod, _this.customDistanceCalculationFunction);
+            /**
+             * The higher this value is, the less prioritised the candidate is
+             */
+            var totalDistancePoints = primaryAxisDistance * MAIN_COORDINATE_WEIGHT + secondaryAxisDistance;
+            /**
+             * + 1 here is in case of distance is zero, but we still want to apply Adjacent priority weight
+             */
+            var priority = (totalDistancePoints + 1) /
+                (isAdjacentSlice ? ADJACENT_SLICE_WEIGHT : DIAGONAL_SLICE_WEIGHT);
+            _this.log('smartNavigate', "distance (primary, secondary, total weighted) for ".concat(sibling.focusKey, " relative to ").concat(focusKey, " is"), primaryAxisDistance, secondaryAxisDistance, totalDistancePoints);
+            _this.log('smartNavigate', "priority for ".concat(sibling.focusKey, " relative to ").concat(focusKey, " is"), priority);
+            if (_this.visualDebugger) {
+                _this.visualDebugger.drawPoint(siblingCorners.a.x, siblingCorners.a.y, 'yellow', 6);
+                _this.visualDebugger.drawPoint(siblingCorners.b.x, siblingCorners.b.y, 'yellow', 6);
+            }
+            return priority;
+        });
+    };
+    SpatialNavigationService.prototype.init = function (_a) {
+        var _this = this;
+        var _b = _a === void 0 ? {} : _a, _c = _b.debug, debug = _c === void 0 ? false : _c, _d = _b.visualDebug, visualDebug = _d === void 0 ? false : _d, _e = _b.nativeMode, nativeMode = _e === void 0 ? false : _e, _f = _b.throttle, throttleParam = _f === void 0 ? 0 : _f, _g = _b.throttleKeypresses, throttleKeypresses = _g === void 0 ? false : _g, _h = _b.useGetBoundingClientRect, useGetBoundingClientRect = _h === void 0 ? false : _h, _j = _b.shouldFocusDOMNode, shouldFocusDOMNode = _j === void 0 ? false : _j, _k = _b.domNodeFocusOptions, domNodeFocusOptions = _k === void 0 ? {} : _k, _l = _b.shouldUseNativeEvents, shouldUseNativeEvents = _l === void 0 ? false : _l, _m = _b.rtl, rtl = _m === void 0 ? false : _m, _o = _b.distanceCalculationMethod, distanceCalculationMethod = _o === void 0 ? 'corners' : _o, _p = _b.customDistanceCalculationFunction, customDistanceCalculationFunction = _p === void 0 ? undefined : _p;
+        if (!this.enabled) {
+            this.domNodeFocusOptions = domNodeFocusOptions;
+            this.enabled = true;
+            this.nativeMode = nativeMode;
+            this.throttleKeypresses = throttleKeypresses;
+            this.useGetBoundingClientRect = useGetBoundingClientRect;
+            this.shouldFocusDOMNode = shouldFocusDOMNode && !nativeMode;
+            this.shouldUseNativeEvents = shouldUseNativeEvents;
+            this.writingDirection = rtl ? WritingDirection$1.RTL : WritingDirection$1.LTR;
+            this.distanceCalculationMethod = distanceCalculationMethod;
+            this.customDistanceCalculationFunction =
+                customDistanceCalculationFunction;
+            this.debug = debug;
+            if (!this.nativeMode) {
+                if (Number.isInteger(throttleParam) && throttleParam > 0) {
+                    this.throttle = throttleParam;
+                }
+                this.bindEventHandlers();
+                if (visualDebug) {
+                    this.visualDebugger = new VisualDebugger(this.writingDirection);
+                    var draw_1 = function () {
+                        requestAnimationFrame(function () {
+                            _this.visualDebugger.clearLayouts();
+                            forOwn(_this.focusableComponents, function (component, focusKey) {
+                                _this.visualDebugger.drawLayout(component.layout, focusKey, component.parentFocusKey);
+                            });
+                            draw_1();
+                        });
+                    };
+                    draw_1();
+                }
+            }
+        }
+    };
+    SpatialNavigationService.prototype.setThrottle = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.throttle, throttleParam = _c === void 0 ? 0 : _c, _d = _b.throttleKeypresses, throttleKeypresses = _d === void 0 ? false : _d;
+        this.throttleKeypresses = throttleKeypresses;
+        if (!this.nativeMode) {
+            this.unbindEventHandlers();
+            if (Number.isInteger(throttleParam)) {
+                this.throttle = throttleParam;
+            }
+            this.bindEventHandlers();
+        }
+    };
+    SpatialNavigationService.prototype.destroy = function () {
+        if (this.enabled) {
+            this.enabled = false;
+            this.nativeMode = false;
+            this.throttle = 0;
+            this.throttleKeypresses = false;
+            this.focusKey = null;
+            this.parentsHavingFocusedChild = [];
+            this.focusableComponents = {};
+            this.paused = false;
+            this.keyMap = DEFAULT_KEY_MAP;
+            this.unbindEventHandlers();
+        }
+    };
+    SpatialNavigationService.prototype.getEventType = function (keyCode) {
+        return findKey(this.getKeyMap(), function (codeList) { return codeList.includes(keyCode); });
+    };
+    SpatialNavigationService.getKeyCode = function (event) {
+        return event.keyCode || event.code || event.key;
+    };
+    SpatialNavigationService.prototype.bindEventHandlers = function () {
+        var _this = this;
+        // We check both because the React Native remote debugger implements window, but not window.addEventListener.
+        if (typeof window !== 'undefined' && window.addEventListener) {
+            this.keyDownEventListener = function (event) {
+                if (_this.paused === true) {
+                    return;
+                }
+                if (_this.debug) {
+                    _this.logIndex += 1;
+                }
+                var keyCode = SpatialNavigationService.getKeyCode(event);
+                var eventType = _this.getEventType(keyCode);
+                if (!eventType) {
+                    return;
+                }
+                _this.pressedKeys[eventType] = _this.pressedKeys[eventType]
+                    ? _this.pressedKeys[eventType] + 1
+                    : 1;
+                if (!_this.shouldUseNativeEvents) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                var keysDetails = {
+                    pressedKeys: _this.pressedKeys
+                };
+                if (eventType === KEY_ENTER && _this.focusKey) {
+                    _this.onEnterPress(keysDetails);
+                    return;
+                }
+                var preventDefaultNavigation = _this.onArrowPress(eventType, keysDetails) === false;
+                if (_this.visualDebugger) {
+                    _this.visualDebugger.clear();
+                }
+                if (preventDefaultNavigation) {
+                    _this.log('keyDownEventListener', 'default navigation prevented');
+                }
+                else {
+                    var direction = findKey(_this.getKeyMap(), function (codeList) {
+                        return codeList.includes(keyCode);
+                    });
+                    _this.smartNavigate(direction, null, { event: event });
+                }
+            };
+            // Apply throttle only if the option we got is > 0 to avoid limiting the listener to every animation frame
+            if (this.throttle) {
+                this.keyDownEventListenerThrottled = throttle(this.keyDownEventListener.bind(this), this.throttle, THROTTLE_OPTIONS);
+            }
+            // When throttling then make sure to only throttle key down and cancel any queued functions in case of key up
+            this.keyUpEventListener = function (event) {
+                var keyCode = SpatialNavigationService.getKeyCode(event);
+                var eventType = _this.getEventType(keyCode);
+                delete _this.pressedKeys[eventType];
+                if (_this.throttle && !_this.throttleKeypresses) {
+                    _this.keyDownEventListenerThrottled.cancel();
+                }
+                if (eventType === KEY_ENTER && _this.focusKey) {
+                    _this.onEnterRelease();
+                }
+                if (_this.focusKey && (eventType === DIRECTION_LEFT ||
+                    eventType === DIRECTION_RIGHT ||
+                    eventType === DIRECTION_UP ||
+                    eventType === DIRECTION_DOWN)) {
+                    _this.onArrowRelease(eventType);
+                }
+            };
+            window.addEventListener('keyup', this.keyUpEventListener);
+            window.addEventListener('keydown', this.throttle
+                ? this.keyDownEventListenerThrottled
+                : this.keyDownEventListener);
+        }
+    };
+    SpatialNavigationService.prototype.unbindEventHandlers = function () {
+        // We check both because the React Native remote debugger implements window, but not window.removeEventListener.
+        if (typeof window !== 'undefined' && window.removeEventListener) {
+            window.removeEventListener('keyup', this.keyUpEventListener);
+            this.keyUpEventListener = null;
+            var listener = this.throttle
+                ? this.keyDownEventListenerThrottled
+                : this.keyDownEventListener;
+            window.removeEventListener('keydown', listener);
+            this.keyDownEventListener = null;
+        }
+    };
+    SpatialNavigationService.prototype.onEnterPress = function (keysDetails) {
+        var component = this.focusableComponents[this.focusKey];
+        /* Guard against last-focused component being unmounted at time of onEnterPress (e.g due to UI fading out) */
+        if (!component) {
+            this.log('onEnterPress', 'noComponent');
+            return;
+        }
+        /* Suppress onEnterPress if the last-focused item happens to lose its 'focused' status. */
+        if (!component.focusable) {
+            this.log('onEnterPress', 'componentNotFocusable');
+            return;
+        }
+        if (component.onEnterPress) {
+            component.onEnterPress(keysDetails);
+        }
+    };
+    SpatialNavigationService.prototype.onEnterRelease = function () {
+        var component = this.focusableComponents[this.focusKey];
+        /* Guard against last-focused component being unmounted at time of onEnterRelease (e.g due to UI fading out) */
+        if (!component) {
+            this.log('onEnterRelease', 'noComponent');
+            return;
+        }
+        /* Suppress onEnterRelease if the last-focused item happens to lose its 'focused' status. */
+        if (!component.focusable) {
+            this.log('onEnterRelease', 'componentNotFocusable');
+            return;
+        }
+        if (component.onEnterRelease) {
+            component.onEnterRelease();
+        }
+    };
+    SpatialNavigationService.prototype.onArrowPress = function (direction, keysDetails) {
+        var component = this.focusableComponents[this.focusKey];
+        /* Guard against last-focused component being unmounted at time of onArrowPress (e.g due to UI fading out) */
+        if (!component) {
+            this.log('onArrowPress', 'noComponent');
+            return undefined;
+        }
+        /* It's okay to navigate AWAY from an item that has lost its 'focused' status, so we don't inspect
+         * component.focusable. */
+        return (component &&
+            component.onArrowPress &&
+            component.onArrowPress(direction, keysDetails));
+    };
+    SpatialNavigationService.prototype.onArrowRelease = function (direction) {
+        var component = this.focusableComponents[this.focusKey];
+        /* Guard against last-focused component being unmounted at time of onArrowRelease (e.g due to UI fading out) */
+        if (!component) {
+            this.log('onArrowRelease', 'noComponent');
+            return;
+        }
+        /* Suppress onArrowRelease if the last-focused item happens to lose its 'focused' status. */
+        if (!component.focusable) {
+            this.log('onArrowRelease', 'componentNotFocusable');
+            return;
+        }
+        if (component.onArrowRelease) {
+            component.onArrowRelease(direction);
+        }
+    };
+    /**
+     * Move focus by direction, if you can't use buttons or focusing by key.
+     *
+     * @example
+     * navigateByDirection('right') // The focus is moved to right
+     */
+    SpatialNavigationService.prototype.navigateByDirection = function (direction, focusDetails) {
+        if (this.paused === true || !this.enabled || this.nativeMode) {
+            return;
+        }
+        var validDirections = [
+            DIRECTION_DOWN,
+            DIRECTION_UP,
+            DIRECTION_LEFT,
+            DIRECTION_RIGHT
+        ];
+        if (validDirections.includes(direction)) {
+            this.log('navigateByDirection', 'direction', direction);
+            this.smartNavigate(direction, null, focusDetails);
+        }
+        else {
+            this.log('navigateByDirection', "Invalid direction. You passed: `".concat(direction, "`, but you can use only these: "), validDirections);
+        }
+    };
+    /**
+     * This function navigates between siblings OR goes up by the Tree
+     * Based on the Direction
+     */
+    SpatialNavigationService.prototype.smartNavigate = function (direction, fromParentFocusKey, focusDetails) {
+        var _this = this;
+        if (this.nativeMode) {
+            return;
+        }
+        var isVerticalDirection = direction === DIRECTION_DOWN || direction === DIRECTION_UP;
+        var isIncrementalDirection = direction === DIRECTION_DOWN ||
+            (this.writingDirection === WritingDirection$1.LTR
+                ? direction === DIRECTION_RIGHT
+                : direction === DIRECTION_LEFT);
+        this.log('smartNavigate', 'direction', direction);
+        this.log('smartNavigate', 'fromParentFocusKey', fromParentFocusKey);
+        this.log('smartNavigate', 'this.focusKey', this.focusKey);
+        if (!fromParentFocusKey) {
+            forOwn(this.focusableComponents, function (component) {
+                // eslint-disable-next-line no-param-reassign
+                component.layoutUpdated = false;
+            });
+        }
+        var currentComponent = this.focusableComponents[fromParentFocusKey || this.focusKey];
+        /**
+         * When there's no currently focused component, an attempt is made, to force focus one of
+         * the Focusable Containers, that have "forceFocus" flag enabled.
+         */
+        if (!fromParentFocusKey && !currentComponent) {
+            this.setFocus(this.getForcedFocusKey());
+            return;
+        }
+        this.log('smartNavigate', 'currentComponent', currentComponent ? currentComponent.focusKey : undefined, currentComponent ? currentComponent.node : undefined, currentComponent);
+        if (currentComponent) {
+            this.updateLayout(currentComponent.focusKey);
+            var parentFocusKey_1 = currentComponent.parentFocusKey, focusKey = currentComponent.focusKey, layout = currentComponent.layout;
+            var currentCutoffCoordinate_1 = SpatialNavigationService.getCutoffCoordinate(isVerticalDirection, isIncrementalDirection, false, layout, this.writingDirection);
+            /**
+             * Get only the siblings with the coords on the way of our moving direction
+             */
+            var siblings = filter(this.focusableComponents, function (component) {
+                if (component.parentFocusKey === parentFocusKey_1 &&
+                    component.focusable) {
+                    _this.updateLayout(component.focusKey);
+                    var siblingCutoffCoordinate = SpatialNavigationService.getCutoffCoordinate(isVerticalDirection, isIncrementalDirection, true, component.layout, _this.writingDirection);
+                    return isVerticalDirection
+                        ? isIncrementalDirection
+                            ? siblingCutoffCoordinate >= currentCutoffCoordinate_1 // vertical next
+                            : siblingCutoffCoordinate <= currentCutoffCoordinate_1 // vertical previous
+                        : _this.writingDirection === WritingDirection$1.LTR
+                            ? isIncrementalDirection
+                                ? siblingCutoffCoordinate >= currentCutoffCoordinate_1 // horizontal LTR next
+                                : siblingCutoffCoordinate <= currentCutoffCoordinate_1 // horizontal LTR previous
+                            : isIncrementalDirection
+                                ? siblingCutoffCoordinate <= currentCutoffCoordinate_1 // horizontal RTL next
+                                : siblingCutoffCoordinate >= currentCutoffCoordinate_1; // horizontal RTL previous
+                }
+                return false;
+            });
+            if (this.debug) {
+                this.log('smartNavigate', 'currentCutoffCoordinate', currentCutoffCoordinate_1);
+                this.log('smartNavigate', 'siblings', "".concat(siblings.length, " elements:"), siblings.map(function (sibling) { return sibling.focusKey; }).join(', '), siblings.map(function (sibling) { return sibling.node; }), siblings.map(function (sibling) { return sibling; }));
+            }
+            if (this.visualDebugger) {
+                var refCorners = SpatialNavigationService.getRefCorners(direction, false, layout);
+                this.visualDebugger.drawPoint(refCorners.a.x, refCorners.a.y);
+                this.visualDebugger.drawPoint(refCorners.b.x, refCorners.b.y);
+            }
+            var sortedSiblings = this.sortSiblingsByPriority(siblings, layout, direction, focusKey);
+            var nextComponent = first(sortedSiblings);
+            this.log('smartNavigate', 'nextComponent', nextComponent ? nextComponent.focusKey : undefined, nextComponent ? nextComponent.node : undefined, nextComponent);
+            if (nextComponent) {
+                this.setFocus(nextComponent.focusKey, focusDetails);
+            }
+            else {
+                var parentComponent = this.focusableComponents[parentFocusKey_1];
+                var focusBoundaryDirections = (parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.isFocusBoundary)
+                    ? parentComponent.focusBoundaryDirections || [direction]
+                    : [];
+                if (!parentComponent || !focusBoundaryDirections.includes(direction)) {
+                    this.smartNavigate(direction, parentFocusKey_1, focusDetails);
+                }
+            }
+        }
+    };
+    SpatialNavigationService.prototype.saveLastFocusedChildKey = function (component, focusKey) {
+        if (component) {
+            this.log('saveLastFocusedChildKey', "".concat(component.focusKey, " lastFocusedChildKey set"), focusKey);
+            // eslint-disable-next-line no-param-reassign
+            component.lastFocusedChildKey = focusKey;
+        }
+    };
+    SpatialNavigationService.prototype.log = function (functionName, debugString) {
+        var rest = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            rest[_i - 2] = arguments[_i];
+        }
+        if (this.debug) {
+            // eslint-disable-next-line no-console
+            console.log.apply(console, __spreadArray(["%c".concat(functionName, "%c").concat(debugString), "background: ".concat(DEBUG_FN_COLORS[this.logIndex % DEBUG_FN_COLORS.length], "; color: black; padding: 1px 5px;"), 'background: #333; color: #BADA55; padding: 1px 5px;'], rest, false));
+        }
+    };
+    /**
+     * Returns the current focus key
+     */
+    SpatialNavigationService.prototype.getCurrentFocusKey = function () {
+        return this.focusKey;
+    };
+    /**
+     * Returns the focus key to which focus can be forced if there are force-focusable components.
+     * A component closest to the top left viewport corner (0,0) is returned.
+     */
+    SpatialNavigationService.prototype.getForcedFocusKey = function () {
+        var _a;
+        var forceFocusableComponents = filter(this.focusableComponents, function (component) { return component.focusable && component.forceFocus; });
+        /**
+         * Searching of the top level component that is closest to the top left viewport corner (0,0).
+         * To achieve meaningful and coherent results, 'down' direction is forced.
+         */
+        var sortedForceFocusableComponents = this.sortSiblingsByPriority(forceFocusableComponents, {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            node: null
+        }, 'down', ROOT_FOCUS_KEY);
+        return (_a = first(sortedForceFocusableComponents)) === null || _a === void 0 ? void 0 : _a.focusKey;
+    };
+    /**
+     * This function tries to determine the next component to Focus
+     * It's either the target node OR the one down by the Tree if node has children components
+     * Based on "targetFocusKey" which means the "intended component to focus"
+     */
+    SpatialNavigationService.prototype.getNextFocusKey = function (targetFocusKey) {
+        var _this = this;
+        var targetComponent = this.focusableComponents[targetFocusKey];
+        /**
+         * Security check, if component doesn't exist, stay on the same focusKey
+         */
+        if (!targetComponent || this.nativeMode) {
+            return targetFocusKey;
+        }
+        var children = filter(this.focusableComponents, function (component) {
+            return component.parentFocusKey === targetFocusKey && component.focusable;
+        });
+        if (children.length > 0) {
+            var lastFocusedChildKey = targetComponent.lastFocusedChildKey, preferredChildFocusKey = targetComponent.preferredChildFocusKey;
+            this.log('getNextFocusKey', 'lastFocusedChildKey is', lastFocusedChildKey);
+            this.log('getNextFocusKey', 'preferredChildFocusKey is', preferredChildFocusKey);
+            /**
+             * First of all trying to focus last focused child
+             */
+            if (lastFocusedChildKey &&
+                targetComponent.saveLastFocusedChild &&
+                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(function (component) { return _this.updateLayout(component.focusKey); });
+            var childKey = getChildClosestToOrigin(children, this.writingDirection).focusKey;
+            this.log('getNextFocusKey', 'childKey will be focused', childKey);
+            return this.getNextFocusKey(childKey);
+        }
+        /**
+         * If no children, just return targetFocusKey back
+         */
+        this.log('getNextFocusKey', 'targetFocusKey', targetFocusKey);
+        return targetFocusKey;
+    };
+    SpatialNavigationService.prototype.addFocusable = function (_a) {
+        var focusKey = _a.focusKey, node = _a.node, parentFocusKey = _a.parentFocusKey, onEnterPress = _a.onEnterPress, onEnterRelease = _a.onEnterRelease, onArrowPress = _a.onArrowPress, onArrowRelease = _a.onArrowRelease, onFocus = _a.onFocus, onBlur = _a.onBlur, saveLastFocusedChild = _a.saveLastFocusedChild, trackChildren = _a.trackChildren, onUpdateFocus = _a.onUpdateFocus, onUpdateHasFocusedChild = _a.onUpdateHasFocusedChild, preferredChildFocusKey = _a.preferredChildFocusKey, autoRestoreFocus = _a.autoRestoreFocus, forceFocus = _a.forceFocus, focusable = _a.focusable, isFocusBoundary = _a.isFocusBoundary, focusBoundaryDirections = _a.focusBoundaryDirections;
+        this.focusableComponents[focusKey] = {
+            focusKey: focusKey,
+            node: node,
+            parentFocusKey: parentFocusKey,
+            onEnterPress: onEnterPress,
+            onEnterRelease: onEnterRelease,
+            onArrowPress: onArrowPress,
+            onArrowRelease: onArrowRelease,
+            onFocus: onFocus,
+            onBlur: onBlur,
+            onUpdateFocus: onUpdateFocus,
+            onUpdateHasFocusedChild: onUpdateHasFocusedChild,
+            saveLastFocusedChild: saveLastFocusedChild,
+            trackChildren: trackChildren,
+            preferredChildFocusKey: preferredChildFocusKey,
+            focusable: focusable,
+            isFocusBoundary: isFocusBoundary,
+            focusBoundaryDirections: focusBoundaryDirections,
+            autoRestoreFocus: autoRestoreFocus,
+            forceFocus: forceFocus,
+            lastFocusedChildKey: null,
+            layout: {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                /**
+                 * Node ref is also duplicated in layout to be reported in onFocus callback
+                 */
+                node: node
+            },
+            layoutUpdated: false
+        };
+        if (!node) {
+            // eslint-disable-next-line no-console
+            console.warn('Component added without a node reference. This will result in its coordinates being empty and may cause lost focus. Check the "ref" passed to "useFocusable": ', this.focusableComponents[focusKey]);
+        }
+        if (this.nativeMode) {
+            return;
+        }
+        this.updateLayout(focusKey);
+        this.log('addFocusable', 'Component added: ', this.focusableComponents[focusKey]);
+        /**
+         * If for some reason this component was already focused before it was added, call the update
+         */
+        if (focusKey === this.focusKey) {
+            this.setFocus(preferredChildFocusKey || focusKey);
+        }
+        /**
+         * Parent nodes are created after children, and child may focus itself.
+         * If so, it's required to check if parent lies on a path to focused child.
+         */
+        var currentComponent = this.focusableComponents[this.focusKey];
+        while (currentComponent) {
+            if (currentComponent.parentFocusKey === focusKey) {
+                this.updateParentsHasFocusedChild(this.focusKey, {});
+                this.updateParentsLastFocusedChild(this.focusKey);
+                break;
+            }
+            currentComponent =
+                this.focusableComponents[currentComponent.parentFocusKey];
+        }
+    };
+    SpatialNavigationService.prototype.removeFocusable = function (_a) {
+        var focusKey = _a.focusKey;
+        var componentToRemove = this.focusableComponents[focusKey];
+        if (componentToRemove) {
+            var parentFocusKey = componentToRemove.parentFocusKey, onUpdateFocus = componentToRemove.onUpdateFocus;
+            onUpdateFocus(false);
+            this.log('removeFocusable', 'Component removed: ', componentToRemove);
+            delete this.focusableComponents[focusKey];
+            var hadFocusedChild = this.parentsHavingFocusedChild.includes(focusKey);
+            this.parentsHavingFocusedChild = this.parentsHavingFocusedChild.filter(function (parentWithFocusedChild) { return parentWithFocusedChild !== focusKey; });
+            var parentComponent = this.focusableComponents[parentFocusKey];
+            var isFocused = focusKey === this.focusKey;
+            /**
+             * If the component was stored as lastFocusedChild, clear lastFocusedChildKey from parent
+             */
+            if (parentComponent && parentComponent.lastFocusedChildKey === focusKey) {
+                parentComponent.lastFocusedChildKey = null;
+            }
+            if (this.nativeMode) {
+                return;
+            }
+            /**
+             * If the component was also focused at this time, OR had focused child, focus its parent -> it will focus another child
+             * Normally the order of components unmount is children -> parents, but sometimes parent can be removed before the child
+             * So we need to check not only for the current Leaf component focus state, but also if it was a Parent that had focused child
+             */
+            if ((isFocused || hadFocusedChild) &&
+                parentComponent &&
+                parentComponent.autoRestoreFocus) {
+                this.log('removeFocusable', 'Component removed: ', isFocused ? 'Leaf component' : 'Container component', 'Auto restoring focus to: ', parentFocusKey);
+                /**
+                 * Focusing parent with a slight delay
+                 * This is to avoid multiple focus restorations if multiple children getting unmounted in one render cycle
+                 */
+                this.setFocusDebounced(parentFocusKey);
+            }
+        }
+    };
+    SpatialNavigationService.prototype.getNodeLayoutByFocusKey = function (focusKey) {
+        var component = this.focusableComponents[focusKey];
+        if (component) {
+            this.updateLayout(component.focusKey);
+            return component.layout;
+        }
+        return null;
+    };
+    SpatialNavigationService.prototype.setCurrentFocusedKey = function (newFocusKey, focusDetails) {
+        var _a, _b, _c, _d;
+        if (this.isFocusableComponent(this.focusKey) &&
+            newFocusKey !== this.focusKey) {
+            var oldComponent = this.focusableComponents[this.focusKey];
+            oldComponent.onUpdateFocus(false);
+            oldComponent.onBlur(this.getNodeLayoutByFocusKey(this.focusKey), focusDetails);
+            (_b = (_a = oldComponent.node) === null || _a === void 0 ? void 0 : _a.removeAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'data-focused');
+            this.log('setCurrentFocusedKey', 'onBlur', oldComponent);
+        }
+        this.focusKey = newFocusKey;
+        if (this.isFocusableComponent(this.focusKey)) {
+            var newComponent = this.focusableComponents[this.focusKey];
+            if (this.shouldFocusDOMNode && newComponent.node) {
+                newComponent.node.focus(this.domNodeFocusOptions);
+            }
+            (_d = (_c = newComponent.node) === null || _c === void 0 ? void 0 : _c.setAttribute) === null || _d === void 0 ? void 0 : _d.call(_c, 'data-focused', 'true');
+            newComponent.onUpdateFocus(true);
+            newComponent.onFocus(this.getNodeLayoutByFocusKey(this.focusKey), focusDetails);
+            this.log('setCurrentFocusedKey', 'onFocus', newComponent);
+        }
+    };
+    SpatialNavigationService.prototype.updateParentsHasFocusedChild = function (focusKey, focusDetails) {
+        var _this = this;
+        var parents = [];
+        var currentComponent = this.focusableComponents[focusKey];
+        /**
+         * Recursively iterate the tree up and find all the parents' focus keys
+         */
+        while (currentComponent) {
+            var parentFocusKey = currentComponent.parentFocusKey;
+            var parentComponent = this.focusableComponents[parentFocusKey];
+            if (parentComponent) {
+                var currentParentFocusKey = parentComponent.focusKey;
+                parents.push(currentParentFocusKey);
+            }
+            currentComponent = parentComponent;
+        }
+        var parentsToRemoveFlag = difference(this.parentsHavingFocusedChild, parents);
+        var parentsToAddFlag = difference(parents, this.parentsHavingFocusedChild);
+        forEach(parentsToRemoveFlag, function (parentFocusKey) {
+            var parentComponent = _this.focusableComponents[parentFocusKey];
+            if (parentComponent && parentComponent.trackChildren) {
+                parentComponent.onUpdateHasFocusedChild(false);
+            }
+            _this.onIntermediateNodeBecameBlurred(parentFocusKey, focusDetails);
+        });
+        forEach(parentsToAddFlag, function (parentFocusKey) {
+            var parentComponent = _this.focusableComponents[parentFocusKey];
+            if (parentComponent && parentComponent.trackChildren) {
+                parentComponent.onUpdateHasFocusedChild(true);
+            }
+            _this.onIntermediateNodeBecameFocused(parentFocusKey, focusDetails);
+        });
+        this.parentsHavingFocusedChild = parents;
+    };
+    SpatialNavigationService.prototype.updateParentsLastFocusedChild = function (focusKey) {
+        var currentComponent = this.focusableComponents[focusKey];
+        /**
+         * Recursively iterate the tree up and update all the parent's lastFocusedChild
+         */
+        while (currentComponent) {
+            var parentFocusKey = currentComponent.parentFocusKey;
+            var parentComponent = this.focusableComponents[parentFocusKey];
+            if (parentComponent) {
+                this.saveLastFocusedChildKey(parentComponent, currentComponent.focusKey);
+            }
+            currentComponent = parentComponent;
+        }
+    };
+    SpatialNavigationService.prototype.getKeyMap = function () {
+        return this.keyMap;
+    };
+    SpatialNavigationService.prototype.setKeyMap = function (keyMap) {
+        this.keyMap = __assign(__assign({}, this.getKeyMap()), normalizeKeyMap(keyMap));
+    };
+    SpatialNavigationService.prototype.isFocusableComponent = function (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()
+     */
+    SpatialNavigationService.prototype.isParticipatingFocusableComponent = function (focusKey) {
+        return (this.isFocusableComponent(focusKey) &&
+            this.focusableComponents[focusKey].focusable);
+    };
+    SpatialNavigationService.prototype.onIntermediateNodeBecameFocused = function (focusKey, focusDetails) {
+        if (this.isParticipatingFocusableComponent(focusKey)) {
+            this.focusableComponents[focusKey].onFocus(this.getNodeLayoutByFocusKey(focusKey), focusDetails);
+        }
+    };
+    SpatialNavigationService.prototype.onIntermediateNodeBecameBlurred = function (focusKey, focusDetails) {
+        if (this.isParticipatingFocusableComponent(focusKey)) {
+            this.focusableComponents[focusKey].onBlur(this.getNodeLayoutByFocusKey(focusKey), focusDetails);
+        }
+    };
+    SpatialNavigationService.prototype.pause = function () {
+        this.paused = true;
+    };
+    SpatialNavigationService.prototype.resume = function () {
+        this.paused = false;
+    };
+    SpatialNavigationService.prototype.setFocus = function (focusKey, focusDetails) {
+        if (focusDetails === void 0) { focusDetails = {}; }
+        // Cancel any pending auto-restore focus calls if we are setting focus manually
+        this.setFocusDebounced.cancel();
+        if (!this.enabled) {
+            return;
+        }
+        this.log('setFocus', 'focusKey', focusKey);
+        /**
+         * When focusKey is not provided or is equal to `ROOT_FOCUS_KEY`, an attempt is made,
+         * to force focus one of the Focusable Containers, that have "forceFocus" flag enabled.
+         * A component closest to the top left viewport corner (0,0) is force-focused.
+         */
+        if (!focusKey || focusKey === ROOT_FOCUS_KEY) {
+            // eslint-disable-next-line no-param-reassign
+            focusKey = this.getForcedFocusKey();
+        }
+        var newFocusKey = this.getNextFocusKey(focusKey);
+        this.log('setFocus', 'newFocusKey', newFocusKey);
+        this.setCurrentFocusedKey(newFocusKey, focusDetails);
+        this.updateParentsHasFocusedChild(newFocusKey, focusDetails);
+        this.updateParentsLastFocusedChild(newFocusKey);
+    };
+    SpatialNavigationService.prototype.updateAllLayouts = function () {
+        var _this = this;
+        if (!this.enabled || this.nativeMode) {
+            return;
+        }
+        forOwn(this.focusableComponents, function (component, focusKey) {
+            _this.updateLayout(focusKey);
+        });
+    };
+    SpatialNavigationService.prototype.updateLayout = function (focusKey) {
+        var component = this.focusableComponents[focusKey];
+        if (!component || this.nativeMode || component.layoutUpdated) {
+            return;
+        }
+        var node = component.node;
+        var layout = this.useGetBoundingClientRect
+            ? getBoundingClientRect(node)
+            : measureLayout(node);
+        component.layout = __assign(__assign({}, layout), { node: node });
+    };
+    SpatialNavigationService.prototype.updateFocusable = function (focusKey, _a) {
+        var node = _a.node, preferredChildFocusKey = _a.preferredChildFocusKey, focusable = _a.focusable, isFocusBoundary = _a.isFocusBoundary, focusBoundaryDirections = _a.focusBoundaryDirections, onEnterPress = _a.onEnterPress, onEnterRelease = _a.onEnterRelease, onArrowPress = _a.onArrowPress, onFocus = _a.onFocus, onBlur = _a.onBlur;
+        if (this.nativeMode) {
+            return;
+        }
+        var component = this.focusableComponents[focusKey];
+        if (component) {
+            component.preferredChildFocusKey = preferredChildFocusKey;
+            component.focusable = focusable;
+            component.isFocusBoundary = isFocusBoundary;
+            component.focusBoundaryDirections = focusBoundaryDirections;
+            component.onEnterPress = onEnterPress;
+            component.onEnterRelease = onEnterRelease;
+            component.onArrowPress = onArrowPress;
+            component.onFocus = onFocus;
+            component.onBlur = onBlur;
+            if (node) {
+                component.node = node;
+            }
+        }
+    };
+    SpatialNavigationService.prototype.isNativeMode = function () {
+        return this.nativeMode;
+    };
+    SpatialNavigationService.prototype.doesFocusableExist = function (focusKey) {
+        return !!this.focusableComponents[focusKey];
+    };
+    /**
+     * This function updates the writing direction
+     * @param rtl whether the writing direction is right-to-left
+     */
+    SpatialNavigationService.prototype.updateRtl = function (rtl) {
+        this.writingDirection = rtl ? WritingDirection$1.RTL : WritingDirection$1.LTR;
+    };
+    return SpatialNavigationService;
+}());
+/**
+ * Export singleton
+ */
+var SpatialNavigation = new SpatialNavigationService();
+var init = SpatialNavigation.init, setThrottle = SpatialNavigation.setThrottle, destroy = SpatialNavigation.destroy, setKeyMap = SpatialNavigation.setKeyMap, setFocus = SpatialNavigation.setFocus, navigateByDirection = SpatialNavigation.navigateByDirection, pause = SpatialNavigation.pause, resume = SpatialNavigation.resume, updateAllLayouts = SpatialNavigation.updateAllLayouts, getCurrentFocusKey = SpatialNavigation.getCurrentFocusKey, doesFocusableExist = SpatialNavigation.doesFocusableExist, updateRtl = SpatialNavigation.updateRtl;
+
+export { ROOT_FOCUS_KEY, SpatialNavigation, destroy, doesFocusableExist, getCurrentFocusKey, init, navigateByDirection, pause, resume, setFocus, setKeyMap, setThrottle, updateAllLayouts, updateRtl };