@noriginmedia/norigin-spatial-navigation-core 3.0.0 → 3.1.0-beta.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { debounce, sortBy, findKey, throttle, forOwn, filter, first, difference, forEach } from 'lodash-es';
+import { findKey, sortBy, assign, throttle, filter, first, difference, forEach, debounce, forOwn } from 'lodash-es';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -16,6 +16,20 @@ PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -28,6 +42,44 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
 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)) {
@@ -43,79 +95,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     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;
@@ -198,6 +177,241 @@ var getBoundingClientRect = function (node) {
     };
 };
 
+var getKeyCode = function (event) {
+    return event.keyCode || event.code || event.key;
+};
+var BaseWebAdapter = /** @class */ (function () {
+    function BaseWebAdapter(service) {
+        var _this = this;
+        this.service = service;
+        this.measureLayout = function (component) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, (__assign(__assign({}, measureLayout(component.node)), { node: component.node }))];
+            });
+        }); };
+        this.blurNode = function (component) {
+            var _a, _b;
+            if (component.node && _this.service.options.shouldFocusDOMNode) {
+                (_b = (_a = component.node) === null || _a === void 0 ? void 0 : _a.removeAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'data-focused');
+            }
+        };
+        this.focusNode = function (component) {
+            var _a, _b;
+            if (component.node && _this.service.options.shouldFocusDOMNode) {
+                component.node.focus(_this.service.options.domNodeFocusOptions);
+            }
+            (_b = (_a = component.node) === null || _a === void 0 ? void 0 : _a.setAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'data-focused', 'true');
+        };
+    }
+    BaseWebAdapter.prototype.addEventListeners = function (_a) {
+        var _this = this;
+        var keyDown = _a.keyDown, keyUp = _a.keyUp;
+        this.keyDownEventListener = function (event) {
+            var keyCode = getKeyCode(event);
+            var key = findKey(_this.service.getKeyMap(), function (codeList) {
+                return codeList.includes(keyCode);
+            });
+            if (!key) {
+                return;
+            }
+            if (!_this.service.options.shouldUseNativeEvents) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            keyDown === null || keyDown === void 0 ? void 0 : keyDown(key, event);
+        };
+        this.keyUpEventListener = function (event) {
+            var keyCode = getKeyCode(event);
+            var key = findKey(_this.service.getKeyMap(), function (codeList) {
+                return codeList.includes(keyCode);
+            });
+            if (!key) {
+                return;
+            }
+            keyUp === null || keyUp === void 0 ? void 0 : keyUp(key);
+        };
+        window.addEventListener('keyup', this.keyUpEventListener);
+        window.addEventListener('keydown', this.keyDownEventListener);
+    };
+    BaseWebAdapter.prototype.removeEventListeners = function () {
+        window.removeEventListener('keyup', this.keyUpEventListener);
+        window.removeEventListener('keydown', this.keyDownEventListener);
+    };
+    return BaseWebAdapter;
+}());
+
+var GetBoundingClientRectAdapter = /** @class */ (function (_super) {
+    __extends(GetBoundingClientRectAdapter, _super);
+    function GetBoundingClientRectAdapter() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.measureLayout = function (component) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, (__assign(__assign({}, getBoundingClientRect(component.node)), { node: component.node }))];
+            });
+        }); };
+        return _this;
+    }
+    return GetBoundingClientRectAdapter;
+}(BaseWebAdapter));
+
+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;
+}());
+
+/**
+ * Scheduler provides a simple way to queue and execute tasks in a strict sequence.
+ * - Regular tasks are run one after another; if a new task is scheduled before the current one starts, it replaces the pending next task.
+ * - Priority tasks are added to a separate queue and will be executed before any remaining regular tasks.
+ */
+var Scheduler = /** @class */ (function () {
+    function Scheduler() {
+        this.nextPriorityTasks = [];
+    }
+    Scheduler.prototype.tick = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, , 2, 8]);
+                        return [4 /*yield*/, ((_a = this.currentTask) === null || _a === void 0 ? void 0 : _a.call(this))];
+                    case 1:
+                        _b.sent();
+                        return [3 /*break*/, 8];
+                    case 2:
+                        if (!(this.nextPriorityTasks.length > 0)) return [3 /*break*/, 4];
+                        this.currentTask = function () {
+                            return Promise.all(_this.nextPriorityTasks.map(function (task) { return task(); }));
+                        };
+                        this.nextPriorityTasks = [];
+                        return [4 /*yield*/, this.tick()];
+                    case 3:
+                        _b.sent();
+                        return [3 /*break*/, 7];
+                    case 4:
+                        if (!this.nextTask) return [3 /*break*/, 6];
+                        this.currentTask = this.nextTask;
+                        this.nextTask = undefined;
+                        return [4 /*yield*/, this.tick()];
+                    case 5:
+                        _b.sent();
+                        return [3 /*break*/, 7];
+                    case 6:
+                        this.currentTask = undefined;
+                        _b.label = 7;
+                    case 7: return [7 /*endfinally*/];
+                    case 8: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Scheduler.prototype.bind = function (fn, context) {
+        var _this = this;
+        return function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return __awaiter(_this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, this.schedulePriority(function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                            return [2 /*return*/, fn.bind(context).apply(void 0, args)];
+                        }); }); })];
+                });
+            });
+        };
+    };
+    Scheduler.prototype.schedule = function (task) {
+        if (this.currentTask) {
+            this.nextTask = task;
+        }
+        else {
+            this.currentTask = task;
+            this.tick();
+        }
+    };
+    Scheduler.prototype.schedulePriority = function (task) {
+        if (this.currentTask) {
+            this.nextPriorityTasks.push(task);
+        }
+        else {
+            task();
+        }
+    };
+    return Scheduler;
+}());
+
 var _a;
 var DIRECTION_LEFT = 'left';
 var DIRECTION_RIGHT = 'right';
@@ -223,6 +437,7 @@ var DIAGONAL_SLICE_WEIGHT = 1;
  */
 var MAIN_COORDINATE_WEIGHT = 5;
 var AUTO_RESTORE_FOCUS_DELAY = 300;
+var LAYOUT_STALE_TIME = 16; // 60fps
 var DEBUG_FN_COLORS = ['#0FF', '#FF0', '#F0F'];
 var THROTTLE_OPTIONS = {
     leading: true,
@@ -253,8 +468,16 @@ var normalizeKeyMap = function (keyMap) {
     });
     return newKeyMap;
 };
+var DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS = {
+    debug: false,
+    throttle: 0,
+    throttleKeypresses: false,
+    domNodeFocusOptions: {},
+    shouldUseNativeEvents: false,
+    distanceCalculationMethod: 'corners'};
 var SpatialNavigationService = /** @class */ (function () {
     function SpatialNavigationService() {
+        this.scheduler = new Scheduler();
         /**
          * Storage for all focusable components
          */
@@ -270,10 +493,8 @@ var SpatialNavigationService = /** @class */ (function () {
         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;
@@ -289,8 +510,10 @@ var SpatialNavigationService = /** @class */ (function () {
         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.updateAllLayouts = this.scheduler.bind(this.updateAllLayouts, this);
+        this.navigateByDirection = this.scheduler.bind(this.navigateByDirection, this);
+        this.addFocusable = this.scheduler.bind(this.addFocusable, this);
+        this.removeFocusable = this.scheduler.bind(this.removeFocusable, this);
         this.init = this.init.bind(this);
         this.setThrottle = this.setThrottle.bind(this);
         this.destroy = this.destroy.bind(this);
@@ -307,6 +530,17 @@ var SpatialNavigationService = /** @class */ (function () {
         this.logIndex = 0;
         this.distanceCalculationMethod = 'corners';
     }
+    Object.defineProperty(SpatialNavigationService.prototype, "options", {
+        get: function () {
+            return {
+                shouldFocusDOMNode: this.shouldFocusDOMNode,
+                domNodeFocusOptions: this.domNodeFocusOptions,
+                shouldUseNativeEvents: this.shouldUseNativeEvents
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Used to determine the coordinate that will be used to filter items that are over the "edge"
      */
@@ -495,56 +729,73 @@ var SpatialNavigationService = /** @class */ (function () {
     };
     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;
+        var _b = _a === void 0 ? {} : _a, debug = _b.debug, visualDebug = _b.visualDebug, throttleParam = _b.throttle, throttleKeypresses = _b.throttleKeypresses, useGetBoundingClientRect = _b.useGetBoundingClientRect, layoutAdapter = _b.layoutAdapter, shouldFocusDOMNode = _b.shouldFocusDOMNode, domNodeFocusOptions = _b.domNodeFocusOptions, shouldUseNativeEvents = _b.shouldUseNativeEvents, rtl = _b.rtl, distanceCalculationMethod = _b.distanceCalculationMethod, _c = _b.customDistanceCalculationFunction, customDistanceCalculationFunction = _c === void 0 ? undefined : _c;
         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.domNodeFocusOptions =
+                domNodeFocusOptions !== null && domNodeFocusOptions !== void 0 ? domNodeFocusOptions : DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.domNodeFocusOptions;
+            this.throttleKeypresses =
+                throttleKeypresses !== null && throttleKeypresses !== void 0 ? throttleKeypresses : DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.throttleKeypresses;
+            /*
+             * If layoutAdapter is a constructor, create a new instance of the class
+             * If it's an object, merge it with the default adapter
+             */
+            if (typeof layoutAdapter === 'function') {
+                var LayoutAdapterClass = layoutAdapter;
+                this.layoutAdapter = new LayoutAdapterClass(this);
+            }
+            else {
+                if (useGetBoundingClientRect) {
+                    console.warn('useGetBoundingClientRect is deprecated. Please use layoutAdapter API instead.');
+                    this.layoutAdapter = new GetBoundingClientRectAdapter(this);
+                }
+                else {
+                    this.layoutAdapter = new BaseWebAdapter(this);
+                }
+                // Override specific methods
+                if (layoutAdapter) {
+                    assign(this.layoutAdapter, layoutAdapter);
+                }
+            }
+            this.shouldFocusDOMNode = shouldFocusDOMNode;
+            this.shouldUseNativeEvents =
+                shouldUseNativeEvents !== null && shouldUseNativeEvents !== void 0 ? shouldUseNativeEvents : DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.shouldUseNativeEvents;
             this.writingDirection = rtl ? WritingDirection$1.RTL : WritingDirection$1.LTR;
-            this.distanceCalculationMethod = distanceCalculationMethod;
+            this.distanceCalculationMethod =
+                distanceCalculationMethod !== null && distanceCalculationMethod !== void 0 ? distanceCalculationMethod : DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.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();
+            this.debug = debug !== null && debug !== void 0 ? debug : DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.debug;
+            this.throttle =
+                throttleParam !== null && throttleParam !== void 0 ? throttleParam : DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.throttle;
+            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();
+                    });
+                };
+                draw_1();
             }
+            this.enabled = true;
         }
     };
     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;
+        var _b = _a === void 0 ? {} : _a, _c = _b.throttle, throttleParam = _c === void 0 ? DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.throttle : _c, _d = _b.throttleKeypresses, throttleKeypresses = _d === void 0 ? DEFAULT_SPATIAL_NAVIGATION_SERVICE_OPTIONS.throttleKeypresses : _d;
         this.throttleKeypresses = throttleKeypresses;
-        if (!this.nativeMode) {
-            this.unbindEventHandlers();
-            if (Number.isInteger(throttleParam)) {
-                this.throttle = throttleParam;
-            }
-            this.bindEventHandlers();
+        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;
@@ -558,92 +809,78 @@ var SpatialNavigationService = /** @class */ (function () {
     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];
+        this.keyDownEventListener = function (key, event) {
+            _this.scheduler.schedule(function () { return __awaiter(_this, void 0, void 0, function () {
+                var preventDefaultNavigation;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this.paused === true) {
+                                return [2 /*return*/];
+                            }
+                            if (this.debug) {
+                                this.logIndex += 1;
+                            }
+                            this.pressedKeys[key] = this.pressedKeys[key]
+                                ? this.pressedKeys[key] + 1
+                                : 1;
+                            if (key === KEY_ENTER && this.focusKey) {
+                                this.onEnterPress({ pressedKeys: this.pressedKeys });
+                                return [2 /*return*/];
+                            }
+                            preventDefaultNavigation = this.onArrowPress(key, { pressedKeys: this.pressedKeys }) === false;
+                            if (this.visualDebugger) {
+                                this.visualDebugger.clear();
+                            }
+                            if (!preventDefaultNavigation) return [3 /*break*/, 1];
+                            this.log('keyDownEventListener', 'default navigation prevented');
+                            return [3 /*break*/, 3];
+                        case 1: return [4 /*yield*/, this.smartNavigate(key, null, { event: event })];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); });
+        };
+        // 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 (key) {
+            _this.scheduler.schedule(function () {
+                delete _this.pressedKeys[key];
                 if (_this.throttle && !_this.throttleKeypresses) {
                     _this.keyDownEventListenerThrottled.cancel();
                 }
-                if (eventType === KEY_ENTER && _this.focusKey) {
+                if (key === KEY_ENTER && _this.focusKey) {
                     _this.onEnterRelease();
                 }
-                if (_this.focusKey && (eventType === DIRECTION_LEFT ||
-                    eventType === DIRECTION_RIGHT ||
-                    eventType === DIRECTION_UP ||
-                    eventType === DIRECTION_DOWN)) {
-                    _this.onArrowRelease(eventType);
+                if (_this.focusKey &&
+                    (key === DIRECTION_LEFT ||
+                        key === DIRECTION_RIGHT ||
+                        key === DIRECTION_UP ||
+                        key === DIRECTION_DOWN)) {
+                    _this.onArrowRelease(key);
                 }
-            };
-            window.addEventListener('keyup', this.keyUpEventListener);
-            window.addEventListener('keydown', this.throttle
+            });
+        };
+        this.layoutAdapter.addEventListeners({
+            keyDown: this.throttle
                 ? this.keyDownEventListenerThrottled
-                : this.keyDownEventListener);
-        }
+                : this.keyDownEventListener,
+            keyUp: this.keyUpEventListener
+        });
     };
     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;
-        }
+        this.layoutAdapter.removeEventListeners();
+        this.keyUpEventListener = null;
+        this.keyDownEventListener = null;
+        this.keyDownEventListenerThrottled = null;
     };
     SpatialNavigationService.prototype.onEnterPress = function (keysDetails) {
         var component = this.focusableComponents[this.focusKey];
@@ -713,107 +950,135 @@ var SpatialNavigationService = /** @class */ (function () {
      * 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);
-        }
+        return __awaiter(this, void 0, void 0, function () {
+            var validDirections;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.paused === true || !this.enabled) {
+                            return [2 /*return*/];
+                        }
+                        validDirections = [
+                            DIRECTION_DOWN,
+                            DIRECTION_UP,
+                            DIRECTION_LEFT,
+                            DIRECTION_RIGHT
+                        ];
+                        if (!validDirections.includes(direction)) return [3 /*break*/, 2];
+                        this.log('navigateByDirection', 'direction', direction);
+                        return [4 /*yield*/, this.smartNavigate(direction, null, focusDetails)];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        this.log('navigateByDirection', "Invalid direction. You passed: `".concat(direction, "`, but you can use only these: "), validDirections);
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
     };
     /**
      * 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 __awaiter(this, void 0, void 0, function () {
+            var isVerticalDirection, isIncrementalDirection, currentComponent, forcedKey, parentFocusKey_1, focusKey, layout, currentCutoffCoordinate_1, threshold_1, siblings, refCorners, sortedSiblings, nextComponent, parentComponent, focusBoundaryDirections;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        isVerticalDirection = direction === DIRECTION_DOWN || direction === DIRECTION_UP;
+                        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);
+                        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) {
+                            forcedKey = this.getForcedFocusKey();
+                            if (forcedKey) {
+                                this.setFocus(forcedKey);
+                            }
+                            else {
+                                this.log('smartNavigate', 'Aborted due to missing current component and force-focusable key');
+                            }
+                            // Current component is null (e.g. nothing to navigate from)
+                            return [2 /*return*/];
+                        }
+                        this.log('smartNavigate', 'currentComponent', currentComponent ? currentComponent.focusKey : undefined, currentComponent ? currentComponent.node : undefined, currentComponent);
+                        if (!currentComponent) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.updateLayout(currentComponent.focusKey)];
+                    case 1:
+                        _a.sent();
+                        parentFocusKey_1 = currentComponent.parentFocusKey, focusKey = currentComponent.focusKey, layout = currentComponent.layout;
+                        currentCutoffCoordinate_1 = SpatialNavigationService.getCutoffCoordinate(isVerticalDirection, isIncrementalDirection, false, layout, this.writingDirection);
+                        threshold_1 = Date.now() - LAYOUT_STALE_TIME;
+                        return [4 /*yield*/, Promise.all(Object.values(this.focusableComponents)
+                                .filter(function (component) {
+                                return component.parentFocusKey === parentFocusKey_1 &&
+                                    component.focusable &&
+                                    component.layoutUpdatedAt <= threshold_1;
+                            })
+                                .map(function (component) { return _this.updateLayout(component.focusKey); }))];
+                    case 2:
+                        _a.sent();
+                        siblings = filter(this.focusableComponents, function (component) {
+                            if (component.parentFocusKey === parentFocusKey_1 &&
+                                component.focusKey !== currentComponent.focusKey &&
+                                component.focusable &&
+                                component.layout) {
+                                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) {
+                            refCorners = SpatialNavigationService.getRefCorners(direction, false, layout);
+                            this.visualDebugger.drawPoint(refCorners.a.x, refCorners.a.y);
+                            this.visualDebugger.drawPoint(refCorners.b.x, refCorners.b.y);
+                        }
+                        sortedSiblings = this.sortSiblingsByPriority(siblings, layout, direction, focusKey);
+                        nextComponent = first(sortedSiblings);
+                        this.log('smartNavigate', 'nextComponent', nextComponent ? nextComponent.focusKey : undefined, nextComponent ? nextComponent.node : undefined, nextComponent);
+                        if (!nextComponent) return [3 /*break*/, 3];
+                        this.setFocus(nextComponent.focusKey, focusDetails);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        parentComponent = this.focusableComponents[parentFocusKey_1];
+                        focusBoundaryDirections = (parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.isFocusBoundary)
+                            ? parentComponent.focusBoundaryDirections || [direction]
+                            : [];
+                        if (!(!parentComponent || !focusBoundaryDirections.includes(direction))) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.smartNavigate(direction, parentFocusKey_1, focusDetails)];
+                    case 4:
+                        _a.sent();
+                        _a.label = 5;
+                    case 5: return [2 /*return*/];
                 }
-                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) {
@@ -868,51 +1133,64 @@ var SpatialNavigationService = /** @class */ (function () {
      * 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;
+        return __awaiter(this, void 0, void 0, function () {
+            var targetComponent, children, lastFocusedChildKey, preferredChildFocusKey, childKey;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        targetComponent = this.focusableComponents[targetFocusKey];
+                        /**
+                         * Security check, if component doesn't exist, stay on the same focusKey
+                         */
+                        if (!targetComponent) {
+                            return [2 /*return*/, targetFocusKey];
+                        }
+                        children = filter(this.focusableComponents, function (component) {
+                            return component.parentFocusKey === targetFocusKey && component.focusable;
+                        });
+                        if (!(children.length > 0)) return [3 /*break*/, 2];
+                        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 [2 /*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 [2 /*return*/, this.getNextFocusKey(preferredChildFocusKey)];
+                        }
+                        /**
+                         * Otherwise, trying to focus something by coordinates
+                         */
+                        return [4 /*yield*/, Promise.all(children.map(function (component) { return _this.updateLayout(component.focusKey); }))];
+                    case 1:
+                        /**
+                         * Otherwise, trying to focus something by coordinates
+                         */
+                        _a.sent();
+                        childKey = getChildClosestToOrigin(children, this.writingDirection).focusKey;
+                        this.log('getNextFocusKey', 'childKey will be focused', childKey);
+                        return [2 /*return*/, this.getNextFocusKey(childKey)];
+                    case 2:
+                        /**
+                         * If no children, just return targetFocusKey back
+                         */
+                        this.log('getNextFocusKey', 'targetFocusKey', targetFocusKey);
+                        return [2 /*return*/, targetFocusKey];
+                }
+            });
         });
-        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;
@@ -937,6 +1215,7 @@ var SpatialNavigationService = /** @class */ (function () {
             autoRestoreFocus: autoRestoreFocus,
             forceFocus: forceFocus,
             lastFocusedChildKey: null,
+            layoutUpdatedAt: 0,
             layout: {
                 x: 0,
                 y: 0,
@@ -950,16 +1229,12 @@ var SpatialNavigationService = /** @class */ (function () {
                  * 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]);
         /**
@@ -1001,9 +1276,6 @@ var SpatialNavigationService = /** @class */ (function () {
             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
@@ -1022,33 +1294,43 @@ var SpatialNavigationService = /** @class */ (function () {
         }
     };
     SpatialNavigationService.prototype.getNodeLayoutByFocusKey = function (focusKey) {
-        var component = this.focusableComponents[focusKey];
-        if (component) {
-            this.updateLayout(component.focusKey);
-            return component.layout;
-        }
-        return null;
+        return __awaiter(this, void 0, void 0, function () {
+            var component;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        component = this.focusableComponents[focusKey];
+                        if (!component) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.updateLayout(component.focusKey)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, component.layout];
+                    case 2: return [2 /*return*/, null];
+                }
+            });
+        });
     };
     SpatialNavigationService.prototype.setCurrentFocusedKey = function (newFocusKey, focusDetails) {
-        var _a, _b, _c, _d;
+        var _this = this;
         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);
+            var oldComponent_1 = this.focusableComponents[this.focusKey];
+            oldComponent_1.onUpdateFocus(false);
+            this.layoutAdapter.blurNode(oldComponent_1);
+            this.getNodeLayoutByFocusKey(this.focusKey).then(function (layout) {
+                oldComponent_1.onBlur(layout, focusDetails);
+                _this.log('setCurrentFocusedKey', 'onBlur', oldComponent_1);
+            });
         }
         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);
+            var newComponent_1 = this.focusableComponents[this.focusKey];
+            this.layoutAdapter.focusNode(newComponent_1);
+            newComponent_1.onUpdateFocus(true);
+            this.getNodeLayoutByFocusKey(this.focusKey).then(function (layout) {
+                newComponent_1.onFocus(layout, focusDetails);
+                _this.log('setCurrentFocusedKey', 'onFocus', newComponent_1);
+            });
         }
     };
     SpatialNavigationService.prototype.updateParentsHasFocusedChild = function (focusKey, focusDetails) {
@@ -1117,13 +1399,19 @@ var SpatialNavigationService = /** @class */ (function () {
             this.focusableComponents[focusKey].focusable);
     };
     SpatialNavigationService.prototype.onIntermediateNodeBecameFocused = function (focusKey, focusDetails) {
+        var _this = this;
         if (this.isParticipatingFocusableComponent(focusKey)) {
-            this.focusableComponents[focusKey].onFocus(this.getNodeLayoutByFocusKey(focusKey), focusDetails);
+            this.getNodeLayoutByFocusKey(focusKey).then(function (layout) {
+                _this.focusableComponents[focusKey].onFocus(layout, focusDetails);
+            });
         }
     };
     SpatialNavigationService.prototype.onIntermediateNodeBecameBlurred = function (focusKey, focusDetails) {
+        var _this = this;
         if (this.isParticipatingFocusableComponent(focusKey)) {
-            this.focusableComponents[focusKey].onBlur(this.getNodeLayoutByFocusKey(focusKey), focusDetails);
+            this.getNodeLayoutByFocusKey(focusKey).then(function (layout) {
+                _this.focusableComponents[focusKey].onBlur(layout, focusDetails);
+            });
         }
     };
     SpatialNavigationService.prototype.pause = function () {
@@ -1132,54 +1420,90 @@ var SpatialNavigationService = /** @class */ (function () {
     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.setFocus = function (focusKey_1) {
+        return __awaiter(this, arguments, void 0, function (focusKey, focusDetails) {
+            var newFocusKey;
+            if (focusDetails === void 0) { focusDetails = {}; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // Cancel any pending auto-restore focus calls if we are setting focus manually
+                        this.setFocusDebounced.cancel();
+                        if (!this.enabled) {
+                            return [2 /*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();
+                            // If there is no force-focusable key either then we abort
+                            if (!focusKey) {
+                                this.log('setFocus', 'Aborted due to missing force-focusable key');
+                                return [2 /*return*/];
+                            }
+                        }
+                        return [4 /*yield*/, this.getNextFocusKey(focusKey)];
+                    case 1:
+                        newFocusKey = _a.sent();
+                        if (!newFocusKey) {
+                            this.log('setFocus', 'Aborted due to missing next focus key');
+                            return [2 /*return*/];
+                        }
+                        this.log('setFocus', 'newFocusKey', newFocusKey);
+                        this.setCurrentFocusedKey(newFocusKey, focusDetails);
+                        this.updateParentsHasFocusedChild(newFocusKey, focusDetails);
+                        this.updateParentsLastFocusedChild(newFocusKey);
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     SpatialNavigationService.prototype.updateAllLayouts = function () {
-        var _this = this;
-        if (!this.enabled || this.nativeMode) {
-            return;
-        }
-        forOwn(this.focusableComponents, function (component, focusKey) {
-            _this.updateLayout(focusKey);
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.enabled) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, Promise.all(Object.keys(this.focusableComponents).map(function (focusKey) {
+                                return _this.updateLayout(focusKey);
+                            }))];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
         });
     };
     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 });
+        return __awaiter(this, void 0, void 0, function () {
+            var component, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        component = this.focusableComponents[focusKey];
+                        if (!component) {
+                            return [2 /*return*/];
+                        }
+                        _a = component;
+                        return [4 /*yield*/, this.layoutAdapter.measureLayout(component)];
+                    case 1:
+                        _a.layout = _b.sent();
+                        component.layoutUpdatedAt = Date.now();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     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;
@@ -1191,14 +1515,13 @@ var SpatialNavigationService = /** @class */ (function () {
             component.onArrowPress = onArrowPress;
             component.onFocus = onFocus;
             component.onBlur = onBlur;
+            // Reset layout updated at to force a layout update
+            component.layoutUpdatedAt = 0;
             if (node) {
                 component.node = node;
             }
         }
     };
-    SpatialNavigationService.prototype.isNativeMode = function () {
-        return this.nativeMode;
-    };
     SpatialNavigationService.prototype.doesFocusableExist = function (focusKey) {
         return !!this.focusableComponents[focusKey];
     };
@@ -1217,4 +1540,4 @@ var SpatialNavigationService = /** @class */ (function () {
 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 };
+export { BaseWebAdapter, GetBoundingClientRectAdapter, ROOT_FOCUS_KEY, SpatialNavigation, SpatialNavigationService, destroy, doesFocusableExist, getCurrentFocusKey, init, navigateByDirection, pause, resume, setFocus, setKeyMap, setThrottle, updateAllLayouts, updateRtl };