@noriginmedia/norigin-spatial-navigation - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

dist/index.js

@@ -1,1 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("lodash/debounce"),require("lodash/difference"),require("lodash/filter"),require("lodash/findKey"),require("lodash/first"),require("lodash/forEach"),require("lodash/forOwn"),require("lodash/noop"),require("lodash/sortBy"),require("lodash/throttle"),require("lodash/uniqueId"),require("react"));else if("function"==typeof define&&define.amd)define(["lodash/debounce","lodash/difference","lodash/filter","lodash/findKey","lodash/first","lodash/forEach","lodash/forOwn","lodash/noop","lodash/sortBy","lodash/throttle","lodash/uniqueId","react"],t);else{var o="object"==typeof exports?t(require("lodash/debounce"),require("lodash/difference"),require("lodash/filter"),require("lodash/findKey"),require("lodash/first"),require("lodash/forEach"),require("lodash/forOwn"),require("lodash/noop"),require("lodash/sortBy"),require("lodash/throttle"),require("lodash/uniqueId"),require("react")):t(e["lodash/debounce"],e["lodash/difference"],e["lodash/filter"],e["lodash/findKey"],e["lodash/first"],e["lodash/forEach"],e["lodash/forOwn"],e["lodash/noop"],e["lodash/sortBy"],e["lodash/throttle"],e["lodash/uniqueId"],e.react);for(var s in o)("object"==typeof exports?exports:e)[s]=o[s]}}(this,(function(e,t,o,s,i,n,r,a,u,c,l,d){return function(){"use strict";var h={654:function(e,t,o){var s,i=this&&this.__assign||function(){return i=Object.assign||function(e){for(var t,o=1,s=arguments.length;o<s;o++)for(var i in t=arguments[o])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)},n=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var i=Object.getOwnPropertyDescriptor(t,o);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,i)}:function(e,t,o,s){void 0===s&&(s=o),e[s]=t[o]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&n(t,e,o);return r(t,e),t},u=this&&this.__spreadArray||function(e,t,o){if(o||2===arguments.length)for(var s,i=0,n=t.length;i<n;i++)!s&&i in t||(s||(s=Array.prototype.slice.call(t,0,i)),s[i]=t[i]);return e.concat(s||Array.prototype.slice.call(t))},c=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.updateRtl=t.doesFocusableExist=t.getCurrentFocusKey=t.updateAllLayouts=t.resume=t.pause=t.navigateByDirection=t.setFocus=t.setKeyMap=t.destroy=t.setThrottle=t.init=t.SpatialNavigation=t.ROOT_FOCUS_KEY=void 0;var l=c(o(150)),d=c(o(117)),h=c(o(747)),f=c(o(23)),p=c(o(842)),y=c(o(682)),v=c(o(784)),g=c(o(432)),b=c(o(67)),F=c(o(35)),C=c(o(119)),m=a(o(964)),K="left",x="right",w="up",E="down",D="enter",M=((s={}).left=[37,"ArrowLeft"],s.up=[38,"ArrowUp"],s.right=[39,"ArrowRight"],s.down=[40,"ArrowDown"],s.enter=[13,"Enter"],s);t.ROOT_FOCUS_KEY="SN:ROOT";var L=["#0FF","#FF0","#F0F"],N={leading:!0,trailing:!1},P=function(){function e(){this.focusableComponents={},this.focusKey=null,this.parentsHavingFocusedChild=[],this.domNodeFocusOptions={},this.enabled=!1,this.nativeMode=!1,this.throttle=0,this.throttleKeypresses=!1,this.useGetBoundingClientRect=!1,this.shouldFocusDOMNode=!1,this.shouldUseNativeEvents=!1,this.writingDirection=C.default.LTR,this.pressedKeys={},this.paused=!1,this.keyDownEventListener=null,this.keyUpEventListener=null,this.keyMap=M,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=(0,l.default)(this.setFocus,300,{leading:!1,trailing:!0}),this.debug=!1,this.visualDebugger=null,this.logIndex=0,this.distanceCalculationMethod="corners"}return e.getCutoffCoordinate=function(e,t,o,s,i){var n=e?s.top:i===C.default.LTR?s.left:s.right,r=e?s.bottom:i===C.default.LTR?s.right:s.left;return t?o?n:r:o?r:n},e.getRefCorners=function(e,t,o){var s={a:{x:0,y:0},b:{x:0,y:0}};switch(e){case w:var i=t?o.bottom:o.top;s.a={x:o.left,y:i},s.b={x:o.right,y:i};break;case E:i=t?o.top:o.bottom,s.a={x:o.left,y:i},s.b={x:o.right,y:i};break;case K:var n=t?o.right:o.left;s.a={x:n,y:o.top},s.b={x:n,y:o.bottom};break;case x:n=t?o.left:o.right,s.a={x:n,y:o.top},s.b={x:n,y:o.bottom}}return s},e.isAdjacentSlice=function(e,t,o){var s=e.a,i=e.b,n=t.a,r=t.b,a=o?"x":"y",u=s[a],c=i[a],l=n[a],d=r[a],h=.2*(c-u);return Math.max(0,Math.min(c,d)-Math.max(u,l))>=h},e.getPrimaryAxisDistance=function(e,t,o){var s=e.a,i=t.a,n=o?"y":"x";return Math.abs(i[n]-s[n])},e.getSecondaryAxisDistance=function(e,t,o,s,i){if(i)return i(e,t,o,s);var n=e.a,r=e.b,a=t.a,u=t.b,c=o?"x":"y",l=n[c],d=r[c],h=a[c],f=u[c];if("center"===s){var p=(l+d)/2,y=(h+f)/2;return Math.abs(p-y)}if("edges"===s){var v=Math.min(l,d),g=Math.min(h,f),b=Math.max(l,d),F=Math.max(h,f),C=Math.abs(v-g),m=Math.abs(b-F);return Math.min(C,m)}var K=[Math.abs(h-l),Math.abs(h-d),Math.abs(f-l),Math.abs(f-d)];return Math.min.apply(Math,K)},e.prototype.sortSiblingsByPriority=function(t,o,s,i){var n=this,r=s===E||s===w,a=e.getRefCorners(s,!1,o);return(0,g.default)(t,(function(t){var o=e.getRefCorners(s,!0,t.layout),u=e.isAdjacentSlice(a,o,r),c=u?e.getPrimaryAxisDistance:e.getSecondaryAxisDistance,l=u?e.getSecondaryAxisDistance:e.getPrimaryAxisDistance,d=c(a,o,r,n.distanceCalculationMethod,n.customDistanceCalculationFunction),h=l(a,o,r,n.distanceCalculationMethod,n.customDistanceCalculationFunction),f=5*d+h,p=(f+1)/(u?5:1);return n.log("smartNavigate","distance (primary, secondary, total weighted) for ".concat(t.focusKey," relative to ").concat(i," is"),d,h,f),n.log("smartNavigate","priority for ".concat(t.focusKey," relative to ").concat(i," is"),p),n.visualDebugger&&(n.visualDebugger.drawPoint(o.a.x,o.a.y,"yellow",6),n.visualDebugger.drawPoint(o.b.x,o.b.y,"yellow",6)),p}))},e.prototype.init=function(e){var t=this,o=void 0===e?{}:e,s=o.debug,i=void 0!==s&&s,n=o.visualDebug,r=void 0!==n&&n,a=o.nativeMode,u=void 0!==a&&a,c=o.throttle,l=void 0===c?0:c,d=o.throttleKeypresses,h=void 0!==d&&d,f=o.useGetBoundingClientRect,p=void 0!==f&&f,y=o.shouldFocusDOMNode,g=void 0!==y&&y,b=o.domNodeFocusOptions,m=void 0===b?{}:b,K=o.shouldUseNativeEvents,x=void 0!==K&&K,w=o.rtl,E=void 0!==w&&w,D=o.distanceCalculationMethod,M=void 0===D?"corners":D,L=o.customDistanceCalculationFunction,N=void 0===L?void 0:L;if(!this.enabled&&(this.domNodeFocusOptions=m,this.enabled=!0,this.nativeMode=u,this.throttleKeypresses=h,this.useGetBoundingClientRect=p,this.shouldFocusDOMNode=g&&!u,this.shouldUseNativeEvents=x,this.writingDirection=E?C.default.RTL:C.default.LTR,this.distanceCalculationMethod=M,this.customDistanceCalculationFunction=N,this.debug=i,!this.nativeMode&&(Number.isInteger(l)&&l>0&&(this.throttle=l),this.bindEventHandlers(),r))){this.visualDebugger=new F.default(this.writingDirection);var P=function(){requestAnimationFrame((function(){t.visualDebugger.clearLayouts(),(0,v.default)(t.focusableComponents,(function(e,o){t.visualDebugger.drawLayout(e.layout,o,e.parentFocusKey)})),P()}))};P()}},e.prototype.setThrottle=function(e){var t=void 0===e?{}:e,o=t.throttle,s=void 0===o?0:o,i=t.throttleKeypresses,n=void 0!==i&&i;this.throttleKeypresses=n,this.nativeMode||(this.unbindEventHandlers(),Number.isInteger(s)&&(this.throttle=s),this.bindEventHandlers())},e.prototype.destroy=function(){this.enabled&&(this.enabled=!1,this.nativeMode=!1,this.throttle=0,this.throttleKeypresses=!1,this.focusKey=null,this.parentsHavingFocusedChild=[],this.focusableComponents={},this.paused=!1,this.keyMap=M,this.unbindEventHandlers())},e.prototype.getEventType=function(e){return(0,f.default)(this.getKeyMap(),(function(t){return t.includes(e)}))},e.getKeyCode=function(e){return e.keyCode||e.code||e.key},e.prototype.bindEventHandlers=function(){var t=this;"undefined"!=typeof window&&window.addEventListener&&(this.keyDownEventListener=function(o){if(!0!==t.paused){t.debug&&(t.logIndex+=1);var s=e.getKeyCode(o),i=t.getEventType(s);if(i){t.pressedKeys[i]=t.pressedKeys[i]?t.pressedKeys[i]+1:1,t.shouldUseNativeEvents||(o.preventDefault(),o.stopPropagation());var n={pressedKeys:t.pressedKeys};if(i===D&&t.focusKey)t.onEnterPress(n);else{var r=!1===t.onArrowPress(i,n);if(t.visualDebugger&&t.visualDebugger.clear(),r)t.log("keyDownEventListener","default navigation prevented");else{var a=(0,f.default)(t.getKeyMap(),(function(e){return e.includes(s)}));t.smartNavigate(a,null,{event:o})}}}}},this.throttle&&(this.keyDownEventListenerThrottled=(0,b.default)(this.keyDownEventListener.bind(this),this.throttle,N)),this.keyUpEventListener=function(o){var s=e.getKeyCode(o),i=t.getEventType(s);delete t.pressedKeys[i],t.throttle&&!t.throttleKeypresses&&t.keyDownEventListenerThrottled.cancel(),i===D&&t.focusKey&&t.onEnterRelease()},window.addEventListener("keyup",this.keyUpEventListener),window.addEventListener("keydown",this.throttle?this.keyDownEventListenerThrottled:this.keyDownEventListener))},e.prototype.unbindEventHandlers=function(){if("undefined"!=typeof window&&window.removeEventListener){window.removeEventListener("keyup",this.keyUpEventListener),this.keyUpEventListener=null;var e=this.throttle?this.keyDownEventListenerThrottled:this.keyDownEventListener;window.removeEventListener("keydown",e),this.keyDownEventListener=null}},e.prototype.onEnterPress=function(e){var t=this.focusableComponents[this.focusKey];t?t.focusable?t.onEnterPress&&t.onEnterPress(e):this.log("onEnterPress","componentNotFocusable"):this.log("onEnterPress","noComponent")},e.prototype.onEnterRelease=function(){var e=this.focusableComponents[this.focusKey];e?e.focusable?e.onEnterRelease&&e.onEnterRelease():this.log("onEnterRelease","componentNotFocusable"):this.log("onEnterRelease","noComponent")},e.prototype.onArrowPress=function(e,t){var o=this.focusableComponents[this.focusKey];if(o)return o&&o.onArrowPress&&o.onArrowPress(e,t);this.log("onArrowPress","noComponent")},e.prototype.navigateByDirection=function(e,t){if(!0!==this.paused&&this.enabled&&!this.nativeMode){var o=[E,w,K,x];o.includes(e)?(this.log("navigateByDirection","direction",e),this.smartNavigate(e,null,t)):this.log("navigateByDirection","Invalid direction. You passed: `".concat(e,"`, but you can use only these: "),o)}},e.prototype.smartNavigate=function(t,o,s){var i=this;if(!this.nativeMode){var n=t===E||t===w,r=t===E||(this.writingDirection===C.default.LTR?t===x:t===K);this.log("smartNavigate","direction",t),this.log("smartNavigate","fromParentFocusKey",o),this.log("smartNavigate","this.focusKey",this.focusKey),o||(0,v.default)(this.focusableComponents,(function(e){e.layoutUpdated=!1}));var a=this.focusableComponents[o||this.focusKey];if(o||a){if(this.log("smartNavigate","currentComponent",a?a.focusKey:void 0,a?a.node:void 0,a),a){this.updateLayout(a.focusKey);var u=a.parentFocusKey,c=a.focusKey,l=a.layout,d=e.getCutoffCoordinate(n,r,!1,l,this.writingDirection),f=(0,h.default)(this.focusableComponents,(function(t){if(t.parentFocusKey===u&&t.focusable){i.updateLayout(t.focusKey);var o=e.getCutoffCoordinate(n,r,!0,t.layout,i.writingDirection);return n||i.writingDirection===C.default.LTR?r?o>=d:o<=d:r?o<=d:o>=d}return!1}));if(this.debug&&(this.log("smartNavigate","currentCutoffCoordinate",d),this.log("smartNavigate","siblings","".concat(f.length," elements:"),f.map((function(e){return e.focusKey})).join(", "),f.map((function(e){return e.node})),f.map((function(e){return e})))),this.visualDebugger){var y=e.getRefCorners(t,!1,l);this.visualDebugger.drawPoint(y.a.x,y.a.y),this.visualDebugger.drawPoint(y.b.x,y.b.y)}var g=this.sortSiblingsByPriority(f,l,t,c),b=(0,p.default)(g);if(this.log("smartNavigate","nextComponent",b?b.focusKey:void 0,b?b.node:void 0,b),b)this.setFocus(b.focusKey,s);else{var F=this.focusableComponents[u],m=(null==F?void 0:F.isFocusBoundary)?F.focusBoundaryDirections||[t]:[];F&&m.includes(t)||this.smartNavigate(t,u,s)}}}else this.setFocus(this.getForcedFocusKey())}},e.prototype.saveLastFocusedChildKey=function(e,t){e&&(this.log("saveLastFocusedChildKey","".concat(e.focusKey," lastFocusedChildKey set"),t),e.lastFocusedChildKey=t)},e.prototype.log=function(e,t){for(var o=[],s=2;s<arguments.length;s++)o[s-2]=arguments[s];this.debug&&console.log.apply(console,u(["%c".concat(e,"%c").concat(t),"background: ".concat(L[this.logIndex%L.length],"; color: black; padding: 1px 5px;"),"background: #333; color: #BADA55; padding: 1px 5px;"],o,!1))},e.prototype.getCurrentFocusKey=function(){return this.focusKey},e.prototype.getForcedFocusKey=function(){var e,o=(0,h.default)(this.focusableComponents,(function(e){return e.focusable&&e.forceFocus})),s=this.sortSiblingsByPriority(o,{x:0,y:0,width:0,height:0,left:0,top:0,right:0,bottom:0,node:null},"down",t.ROOT_FOCUS_KEY);return null===(e=(0,p.default)(s))||void 0===e?void 0:e.focusKey},e.prototype.getNextFocusKey=function(e){var t=this,o=this.focusableComponents[e];if(!o||this.nativeMode)return e;var s=(0,h.default)(this.focusableComponents,(function(t){return t.parentFocusKey===e&&t.focusable}));if(s.length>0){var i=o.lastFocusedChildKey,n=o.preferredChildFocusKey;if(this.log("getNextFocusKey","lastFocusedChildKey is",i),this.log("getNextFocusKey","preferredChildFocusKey is",n),i&&o.saveLastFocusedChild&&this.isParticipatingFocusableComponent(i))return this.log("getNextFocusKey","lastFocusedChildKey will be focused",i),this.getNextFocusKey(i);if(n&&this.isParticipatingFocusableComponent(n))return this.log("getNextFocusKey","preferredChildFocusKey will be focused",n),this.getNextFocusKey(n);s.forEach((function(e){return t.updateLayout(e.focusKey)}));var r=function(e,t){var o=t===C.default.LTR?function(e){var t=e.layout;return Math.abs(t.left)+Math.abs(t.top)}:function(e){var t=e.layout;return Math.abs(window.innerWidth-t.right)+Math.abs(t.top)},s=(0,g.default)(e,o);return(0,p.default)(s)}(s,this.writingDirection).focusKey;return this.log("getNextFocusKey","childKey will be focused",r),this.getNextFocusKey(r)}return this.log("getNextFocusKey","targetFocusKey",e),e},e.prototype.addFocusable=function(e){var t=e.focusKey,o=e.node,s=e.parentFocusKey,i=e.onEnterPress,n=e.onEnterRelease,r=e.onArrowPress,a=e.onFocus,u=e.onBlur,c=e.saveLastFocusedChild,l=e.trackChildren,d=e.onUpdateFocus,h=e.onUpdateHasFocusedChild,f=e.preferredChildFocusKey,p=e.autoRestoreFocus,y=e.forceFocus,v=e.focusable,g=e.isFocusBoundary,b=e.focusBoundaryDirections;if(this.focusableComponents[t]={focusKey:t,node:o,parentFocusKey:s,onEnterPress:i,onEnterRelease:n,onArrowPress:r,onFocus:a,onBlur:u,onUpdateFocus:d,onUpdateHasFocusedChild:h,saveLastFocusedChild:c,trackChildren:l,preferredChildFocusKey:f,focusable:v,isFocusBoundary:g,focusBoundaryDirections:b,autoRestoreFocus:p,forceFocus:y,lastFocusedChildKey:null,layout:{x:0,y:0,width:0,height:0,left:0,top:0,right:0,bottom:0,node:o},layoutUpdated:!1},o||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[t]),!this.nativeMode){this.updateLayout(t),this.log("addFocusable","Component added: ",this.focusableComponents[t]),t===this.focusKey&&this.setFocus(f||t);for(var F=this.focusableComponents[this.focusKey];F;){if(F.parentFocusKey===t){this.updateParentsHasFocusedChild(this.focusKey,{}),this.updateParentsLastFocusedChild(this.focusKey);break}F=this.focusableComponents[F.parentFocusKey]}}},e.prototype.removeFocusable=function(e){var t=e.focusKey,o=this.focusableComponents[t];if(o){var s=o.parentFocusKey;(0,o.onUpdateFocus)(!1),this.log("removeFocusable","Component removed: ",o),delete this.focusableComponents[t];var i=this.parentsHavingFocusedChild.includes(t);this.parentsHavingFocusedChild=this.parentsHavingFocusedChild.filter((function(e){return e!==t}));var n=this.focusableComponents[s],r=t===this.focusKey;if(n&&n.lastFocusedChildKey===t&&(n.lastFocusedChildKey=null),this.nativeMode)return;(r||i)&&n&&n.autoRestoreFocus&&(this.log("removeFocusable","Component removed: ",r?"Leaf component":"Container component","Auto restoring focus to: ",s),this.setFocusDebounced(s))}},e.prototype.getNodeLayoutByFocusKey=function(e){var t=this.focusableComponents[e];return t?(this.updateLayout(t.focusKey),t.layout):null},e.prototype.setCurrentFocusedKey=function(e,t){if(this.isFocusableComponent(this.focusKey)&&e!==this.focusKey){var o=this.focusableComponents[this.focusKey];o.onUpdateFocus(!1),o.onBlur(this.getNodeLayoutByFocusKey(this.focusKey),t),this.log("setCurrentFocusedKey","onBlur",o)}if(this.focusKey=e,this.isFocusableComponent(this.focusKey)){var s=this.focusableComponents[this.focusKey];this.shouldFocusDOMNode&&s.node&&s.node.focus(this.domNodeFocusOptions),s.onUpdateFocus(!0),s.onFocus(this.getNodeLayoutByFocusKey(this.focusKey),t),this.log("setCurrentFocusedKey","onFocus",s)}},e.prototype.updateParentsHasFocusedChild=function(e,t){for(var o=this,s=[],i=this.focusableComponents[e];i;){var n=i.parentFocusKey,r=this.focusableComponents[n];if(r){var a=r.focusKey;s.push(a)}i=r}var u=(0,d.default)(this.parentsHavingFocusedChild,s),c=(0,d.default)(s,this.parentsHavingFocusedChild);(0,y.default)(u,(function(e){var s=o.focusableComponents[e];s&&s.trackChildren&&s.onUpdateHasFocusedChild(!1),o.onIntermediateNodeBecameBlurred(e,t)})),(0,y.default)(c,(function(e){var s=o.focusableComponents[e];s&&s.trackChildren&&s.onUpdateHasFocusedChild(!0),o.onIntermediateNodeBecameFocused(e,t)})),this.parentsHavingFocusedChild=s},e.prototype.updateParentsLastFocusedChild=function(e){for(var t=this.focusableComponents[e];t;){var o=t.parentFocusKey,s=this.focusableComponents[o];s&&this.saveLastFocusedChildKey(s,t.focusKey),t=s}},e.prototype.getKeyMap=function(){return this.keyMap},e.prototype.setKeyMap=function(e){this.keyMap=i(i({},this.getKeyMap()),function(e){var t={};return Object.entries(e).forEach((function(e){var o=e[0],s=e[1];t[o]=Array.isArray(s)?s:[s]})),t}(e))},e.prototype.isFocusableComponent=function(e){return!!this.focusableComponents[e]},e.prototype.isParticipatingFocusableComponent=function(e){return this.isFocusableComponent(e)&&this.focusableComponents[e].focusable},e.prototype.onIntermediateNodeBecameFocused=function(e,t){this.isParticipatingFocusableComponent(e)&&this.focusableComponents[e].onFocus(this.getNodeLayoutByFocusKey(e),t)},e.prototype.onIntermediateNodeBecameBlurred=function(e,t){this.isParticipatingFocusableComponent(e)&&this.focusableComponents[e].onBlur(this.getNodeLayoutByFocusKey(e),t)},e.prototype.pause=function(){this.paused=!0},e.prototype.resume=function(){this.paused=!1},e.prototype.setFocus=function(e,o){if(void 0===o&&(o={}),this.setFocusDebounced.cancel(),this.enabled&&!this.nativeMode){this.log("setFocus","focusKey",e),e&&e!==t.ROOT_FOCUS_KEY||(e=this.getForcedFocusKey());var s=this.getNextFocusKey(e);this.log("setFocus","newFocusKey",s),this.setCurrentFocusedKey(s,o),this.updateParentsHasFocusedChild(s,o),this.updateParentsLastFocusedChild(s)}},e.prototype.updateAllLayouts=function(){var e=this;this.enabled&&!this.nativeMode&&(0,v.default)(this.focusableComponents,(function(t,o){e.updateLayout(o)}))},e.prototype.updateLayout=function(e){var t=this.focusableComponents[e];if(t&&!this.nativeMode&&!t.layoutUpdated){var o=t.node,s=this.useGetBoundingClientRect?(0,m.getBoundingClientRect)(o):(0,m.default)(o);t.layout=i(i({},s),{node:o})}},e.prototype.updateFocusable=function(e,t){var o=t.node,s=t.preferredChildFocusKey,i=t.focusable,n=t.isFocusBoundary,r=t.focusBoundaryDirections,a=t.onEnterPress,u=t.onEnterRelease,c=t.onArrowPress,l=t.onFocus,d=t.onBlur;if(!this.nativeMode){var h=this.focusableComponents[e];h&&(h.preferredChildFocusKey=s,h.focusable=i,h.isFocusBoundary=n,h.focusBoundaryDirections=r,h.onEnterPress=a,h.onEnterRelease=u,h.onArrowPress=c,h.onFocus=l,h.onBlur=d,o&&(h.node=o))}},e.prototype.isNativeMode=function(){return this.nativeMode},e.prototype.doesFocusableExist=function(e){return!!this.focusableComponents[e]},e.prototype.updateRtl=function(e){this.writingDirection=e?C.default.RTL:C.default.LTR},e}();t.SpatialNavigation=new P,t.init=t.SpatialNavigation.init,t.setThrottle=t.SpatialNavigation.setThrottle,t.destroy=t.SpatialNavigation.destroy,t.setKeyMap=t.SpatialNavigation.setKeyMap,t.setFocus=t.SpatialNavigation.setFocus,t.navigateByDirection=t.SpatialNavigation.navigateByDirection,t.pause=t.SpatialNavigation.pause,t.resume=t.SpatialNavigation.resume,t.updateAllLayouts=t.SpatialNavigation.updateAllLayouts,t.getCurrentFocusKey=t.SpatialNavigation.getCurrentFocusKey,t.doesFocusableExist=t.SpatialNavigation.doesFocusableExist,t.updateRtl=t.SpatialNavigation.updateRtl},35:function(e,t,o){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=s(o(119)),n="undefined"!=typeof window&&window.document,r=n?window.innerWidth:0,a=n?window.innerHeight:0,u=function(){function e(t){n&&(this.debugCtx=e.createCanvas("sn-debug","1010",t),this.layoutsCtx=e.createCanvas("sn-layouts","1000",t),this.writingDirection=t)}return e.createCanvas=function(e,t,o){var s=document.querySelector("#".concat(e))||document.createElement("canvas");s.setAttribute("id",e),s.setAttribute("dir",o===i.default.LTR?"ltr":"rtl");var n=s.getContext("2d");return s.style.zIndex=t,s.style.position="fixed",s.style.top="0",s.style.left="0",document.body.appendChild(s),s.width=r,s.height=a,n},e.prototype.clear=function(){n&&this.debugCtx.clearRect(0,0,r,a)},e.prototype.clearLayouts=function(){n&&this.layoutsCtx.clearRect(0,0,r,a)},e.prototype.drawLayout=function(e,t,o){if(n){this.layoutsCtx.strokeStyle="green",this.layoutsCtx.strokeRect(e.left,e.top,e.width,e.height),this.layoutsCtx.font="8px monospace",this.layoutsCtx.fillStyle="red";var s=this.writingDirection===i.default.LTR?"left":"right",r=e[s];this.layoutsCtx.fillText(t,r,e.top+10),this.layoutsCtx.fillText(o,r,e.top+25),this.layoutsCtx.fillText("".concat(s,": ").concat(r),r,e.top+40),this.layoutsCtx.fillText("top: ".concat(e.top),r,e.top+55)}},e.prototype.drawPoint=function(e,t,o,s){void 0===o&&(o="blue"),void 0===s&&(s=10),n&&(this.debugCtx.strokeStyle=o,this.debugCtx.lineWidth=3,this.debugCtx.strokeRect(e-s/2,t-s/2,s,s))},e}();t.default=u},119:function(e,t){var o;Object.defineProperty(t,"__esModule",{value:!0}),function(e){e[e.LTR=0]="LTR",e[e.RTL=1]="RTL"}(o||(o={})),t.default=o},607:function(e,t,o){var s=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var i=Object.getOwnPropertyDescriptor(t,o);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,i)}:function(e,t,o,s){void 0===s&&(s=o),e[s]=t[o]}),i=this&&this.__exportStar||function(e,t){for(var o in e)"default"===o||Object.prototype.hasOwnProperty.call(t,o)||s(t,e,o)};Object.defineProperty(t,"__esModule",{value:!0}),i(o(79),t),i(o(445),t),i(o(654),t)},964:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.getBoundingClientRect=void 0;var o=function(e){for(var t=e.offsetParent,o=e.offsetHeight,s=e.offsetWidth,i=e.offsetLeft,n=e.offsetTop;t&&1===t.nodeType;)i+=t.offsetLeft-t.scrollLeft,n+=t.offsetTop-t.scrollTop,t=t.offsetParent;return{height:o,left:i,top:n,width:s}};t.default=function(e){var t=e&&e.parentElement;if(e&&t){var s=o(t),i=o(e),n=i.height,r=i.left,a=i.top,u=i.width;return{x:r-s.left,y:a-s.top,width:u,height:n,left:r,top:a,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}},t.getBoundingClientRect=function(e){if(e&&e.getBoundingClientRect){var t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height,left:t.left,top:t.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}}},445:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.useFocusContext=t.FocusContext=void 0;var s=o(156),i=o(654);t.FocusContext=(0,s.createContext)(i.ROOT_FOCUS_KEY),t.FocusContext.displayName="FocusContext",t.useFocusContext=function(){return(0,s.useContext)(t.FocusContext)}},79:function(e,t,o){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.useFocusable=void 0;var i=o(156),n=s(o(604)),r=s(o(461)),a=o(654),u=o(445);t.useFocusable=function(e){var t=void 0===e?{}:e,o=t.focusable,s=void 0===o||o,c=t.saveLastFocusedChild,l=void 0===c||c,d=t.trackChildren,h=void 0!==d&&d,f=t.autoRestoreFocus,p=void 0===f||f,y=t.forceFocus,v=void 0!==y&&y,g=t.isFocusBoundary,b=void 0!==g&&g,F=t.focusBoundaryDirections,C=t.focusKey,m=t.preferredChildFocusKey,K=t.onEnterPress,x=void 0===K?n.default:K,w=t.onEnterRelease,E=void 0===w?n.default:w,D=t.onArrowPress,M=void 0===D?function(){return!0}:D,L=t.onFocus,N=void 0===L?n.default:L,P=t.onBlur,R=void 0===P?n.default:P,B=t.extraProps,_=(0,i.useCallback)((function(e){x(B,e)}),[x,B]),O=(0,i.useCallback)((function(){E(B)}),[E,B]),k=(0,i.useCallback)((function(e,t){return M(e,B,t)}),[B,M]),T=(0,i.useCallback)((function(e,t){N(e,B,t)}),[B,N]),A=(0,i.useCallback)((function(e,t){R(e,B,t)}),[B,R]),S=(0,i.useRef)(null),q=(0,i.useState)(!1),U=q[0],j=q[1],H=(0,i.useState)(!1),I=H[0],Y=H[1],G=(0,u.useFocusContext)(),W=(0,i.useMemo)((function(){return C||(0,r.default)("sn:focusable-item-")}),[C]),z=(0,i.useCallback)((function(e){void 0===e&&(e={}),a.SpatialNavigation.setFocus(W,e)}),[W]);return(0,i.useEffect)((function(){var e=S.current;return a.SpatialNavigation.addFocusable({focusKey:W,node:e,parentFocusKey:G,preferredChildFocusKey:m,onEnterPress:_,onEnterRelease:O,onArrowPress:k,onFocus:T,onBlur:A,onUpdateFocus:function(e){return void 0===e&&(e=!1),j(e)},onUpdateHasFocusedChild:function(e){return void 0===e&&(e=!1),Y(e)},saveLastFocusedChild:l,trackChildren:h,isFocusBoundary:b,focusBoundaryDirections:F,autoRestoreFocus:p,forceFocus:v,focusable:s}),function(){a.SpatialNavigation.removeFocusable({focusKey:W})}}),[]),(0,i.useEffect)((function(){var e=S.current;a.SpatialNavigation.updateFocusable(W,{node:e,preferredChildFocusKey:m,focusable:s,isFocusBoundary:b,focusBoundaryDirections:F,onEnterPress:_,onEnterRelease:O,onArrowPress:k,onFocus:T,onBlur:A})}),[W,m,s,b,F,_,O,k,T,A]),{ref:S,focusSelf:z,focused:U,hasFocusedChild:I,focusKey:W}}},150:function(t){t.exports=e},117:function(e){e.exports=t},747:function(e){e.exports=o},23:function(e){e.exports=s},842:function(e){e.exports=i},682:function(e){e.exports=n},784:function(e){e.exports=r},604:function(e){e.exports=a},432:function(e){e.exports=u},67:function(e){e.exports=c},461:function(e){e.exports=l},156:function(e){e.exports=d}},f={};return function e(t){var o=f[t];if(void 0!==o)return o.exports;var s=f[t]={exports:{}};return h[t].call(s.exports,s,s.exports,e),s.exports}(607)}()}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("lodash/debounce"),require("lodash/difference"),require("lodash/filter"),require("lodash/findKey"),require("lodash/first"),require("lodash/forEach"),require("lodash/forOwn"),require("lodash/noop"),require("lodash/sortBy"),require("lodash/throttle"),require("lodash/uniqueId"),require("react"));else if("function"==typeof define&&define.amd)define(["lodash/debounce","lodash/difference","lodash/filter","lodash/findKey","lodash/first","lodash/forEach","lodash/forOwn","lodash/noop","lodash/sortBy","lodash/throttle","lodash/uniqueId","react"],t);else{var o="object"==typeof exports?t(require("lodash/debounce"),require("lodash/difference"),require("lodash/filter"),require("lodash/findKey"),require("lodash/first"),require("lodash/forEach"),require("lodash/forOwn"),require("lodash/noop"),require("lodash/sortBy"),require("lodash/throttle"),require("lodash/uniqueId"),require("react")):t(e["lodash/debounce"],e["lodash/difference"],e["lodash/filter"],e["lodash/findKey"],e["lodash/first"],e["lodash/forEach"],e["lodash/forOwn"],e["lodash/noop"],e["lodash/sortBy"],e["lodash/throttle"],e["lodash/uniqueId"],e.react);for(var s in o)("object"==typeof exports?exports:e)[s]=o[s]}}(this,(function(e,t,o,s,i,n,r,a,u,c,l,d){return function(){"use strict";var h={654:function(e,t,o){var s,i=this&&this.__assign||function(){return i=Object.assign||function(e){for(var t,o=1,s=arguments.length;o<s;o++)for(var i in t=arguments[o])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)},n=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var i=Object.getOwnPropertyDescriptor(t,o);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,i)}:function(e,t,o,s){void 0===s&&(s=o),e[s]=t[o]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&n(t,e,o);return r(t,e),t},u=this&&this.__spreadArray||function(e,t,o){if(o||2===arguments.length)for(var s,i=0,n=t.length;i<n;i++)!s&&i in t||(s||(s=Array.prototype.slice.call(t,0,i)),s[i]=t[i]);return e.concat(s||Array.prototype.slice.call(t))},c=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.updateRtl=t.doesFocusableExist=t.getCurrentFocusKey=t.updateAllLayouts=t.resume=t.pause=t.navigateByDirection=t.setFocus=t.setKeyMap=t.destroy=t.setThrottle=t.init=t.SpatialNavigation=t.ROOT_FOCUS_KEY=void 0;var l=c(o(150)),d=c(o(117)),h=c(o(747)),f=c(o(23)),p=c(o(842)),y=c(o(682)),v=c(o(784)),g=c(o(432)),b=c(o(67)),F=c(o(35)),C=c(o(119)),m=a(o(964)),K="left",x="right",w="up",E="down",D="enter",M=((s={}).left=[37,"ArrowLeft"],s.up=[38,"ArrowUp"],s.right=[39,"ArrowRight"],s.down=[40,"ArrowDown"],s.enter=[13,"Enter"],s);t.ROOT_FOCUS_KEY="SN:ROOT";var L=["#0FF","#FF0","#F0F"],N={leading:!0,trailing:!1},P=function(){function e(){this.focusableComponents={},this.focusKey=null,this.parentsHavingFocusedChild=[],this.domNodeFocusOptions={},this.enabled=!1,this.nativeMode=!1,this.throttle=0,this.throttleKeypresses=!1,this.useGetBoundingClientRect=!1,this.shouldFocusDOMNode=!1,this.shouldUseNativeEvents=!1,this.writingDirection=C.default.LTR,this.pressedKeys={},this.paused=!1,this.keyDownEventListener=null,this.keyUpEventListener=null,this.keyMap=M,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=(0,l.default)(this.setFocus,300,{leading:!1,trailing:!0}),this.debug=!1,this.visualDebugger=null,this.logIndex=0,this.distanceCalculationMethod="corners"}return e.getCutoffCoordinate=function(e,t,o,s,i){var n=e?s.top:i===C.default.LTR?s.left:s.right,r=e?s.bottom:i===C.default.LTR?s.right:s.left;return t?o?n:r:o?r:n},e.getRefCorners=function(e,t,o){var s={a:{x:0,y:0},b:{x:0,y:0}};switch(e){case w:var i=t?o.bottom:o.top;s.a={x:o.left,y:i},s.b={x:o.right,y:i};break;case E:i=t?o.top:o.bottom,s.a={x:o.left,y:i},s.b={x:o.right,y:i};break;case K:var n=t?o.right:o.left;s.a={x:n,y:o.top},s.b={x:n,y:o.bottom};break;case x:n=t?o.left:o.right,s.a={x:n,y:o.top},s.b={x:n,y:o.bottom}}return s},e.isAdjacentSlice=function(e,t,o){var s=e.a,i=e.b,n=t.a,r=t.b,a=o?"x":"y",u=s[a],c=i[a],l=n[a],d=r[a],h=.2*(c-u);return Math.max(0,Math.min(c,d)-Math.max(u,l))>=h},e.getPrimaryAxisDistance=function(e,t,o){var s=e.a,i=t.a,n=o?"y":"x";return Math.abs(i[n]-s[n])},e.getSecondaryAxisDistance=function(e,t,o,s,i){if(i)return i(e,t,o,s);var n=e.a,r=e.b,a=t.a,u=t.b,c=o?"x":"y",l=n[c],d=r[c],h=a[c],f=u[c];if("center"===s){var p=(l+d)/2,y=(h+f)/2;return Math.abs(p-y)}if("edges"===s){var v=Math.min(l,d),g=Math.min(h,f),b=Math.max(l,d),F=Math.max(h,f),C=Math.abs(v-g),m=Math.abs(b-F);return Math.min(C,m)}var K=[Math.abs(h-l),Math.abs(h-d),Math.abs(f-l),Math.abs(f-d)];return Math.min.apply(Math,K)},e.prototype.sortSiblingsByPriority=function(t,o,s,i){var n=this,r=s===E||s===w,a=e.getRefCorners(s,!1,o);return(0,g.default)(t,(function(t){var o=e.getRefCorners(s,!0,t.layout),u=e.isAdjacentSlice(a,o,r),c=u?e.getPrimaryAxisDistance:e.getSecondaryAxisDistance,l=u?e.getSecondaryAxisDistance:e.getPrimaryAxisDistance,d=c(a,o,r,n.distanceCalculationMethod,n.customDistanceCalculationFunction),h=l(a,o,r,n.distanceCalculationMethod,n.customDistanceCalculationFunction),f=5*d+h,p=(f+1)/(u?5:1);return n.log("smartNavigate","distance (primary, secondary, total weighted) for ".concat(t.focusKey," relative to ").concat(i," is"),d,h,f),n.log("smartNavigate","priority for ".concat(t.focusKey," relative to ").concat(i," is"),p),n.visualDebugger&&(n.visualDebugger.drawPoint(o.a.x,o.a.y,"yellow",6),n.visualDebugger.drawPoint(o.b.x,o.b.y,"yellow",6)),p}))},e.prototype.init=function(e){var t=this,o=void 0===e?{}:e,s=o.debug,i=void 0!==s&&s,n=o.visualDebug,r=void 0!==n&&n,a=o.nativeMode,u=void 0!==a&&a,c=o.throttle,l=void 0===c?0:c,d=o.throttleKeypresses,h=void 0!==d&&d,f=o.useGetBoundingClientRect,p=void 0!==f&&f,y=o.shouldFocusDOMNode,g=void 0!==y&&y,b=o.domNodeFocusOptions,m=void 0===b?{}:b,K=o.shouldUseNativeEvents,x=void 0!==K&&K,w=o.rtl,E=void 0!==w&&w,D=o.distanceCalculationMethod,M=void 0===D?"corners":D,L=o.customDistanceCalculationFunction,N=void 0===L?void 0:L;if(!this.enabled&&(this.domNodeFocusOptions=m,this.enabled=!0,this.nativeMode=u,this.throttleKeypresses=h,this.useGetBoundingClientRect=p,this.shouldFocusDOMNode=g&&!u,this.shouldUseNativeEvents=x,this.writingDirection=E?C.default.RTL:C.default.LTR,this.distanceCalculationMethod=M,this.customDistanceCalculationFunction=N,this.debug=i,!this.nativeMode&&(Number.isInteger(l)&&l>0&&(this.throttle=l),this.bindEventHandlers(),r))){this.visualDebugger=new F.default(this.writingDirection);var P=function(){requestAnimationFrame((function(){t.visualDebugger.clearLayouts(),(0,v.default)(t.focusableComponents,(function(e,o){t.visualDebugger.drawLayout(e.layout,o,e.parentFocusKey)})),P()}))};P()}},e.prototype.setThrottle=function(e){var t=void 0===e?{}:e,o=t.throttle,s=void 0===o?0:o,i=t.throttleKeypresses,n=void 0!==i&&i;this.throttleKeypresses=n,this.nativeMode||(this.unbindEventHandlers(),Number.isInteger(s)&&(this.throttle=s),this.bindEventHandlers())},e.prototype.destroy=function(){this.enabled&&(this.enabled=!1,this.nativeMode=!1,this.throttle=0,this.throttleKeypresses=!1,this.focusKey=null,this.parentsHavingFocusedChild=[],this.focusableComponents={},this.paused=!1,this.keyMap=M,this.unbindEventHandlers())},e.prototype.getEventType=function(e){return(0,f.default)(this.getKeyMap(),(function(t){return t.includes(e)}))},e.getKeyCode=function(e){return e.keyCode||e.code||e.key},e.prototype.bindEventHandlers=function(){var t=this;"undefined"!=typeof window&&window.addEventListener&&(this.keyDownEventListener=function(o){if(!0!==t.paused){t.debug&&(t.logIndex+=1);var s=e.getKeyCode(o),i=t.getEventType(s);if(i){t.pressedKeys[i]=t.pressedKeys[i]?t.pressedKeys[i]+1:1,t.shouldUseNativeEvents||(o.preventDefault(),o.stopPropagation());var n={pressedKeys:t.pressedKeys};if(i===D&&t.focusKey)t.onEnterPress(n);else{var r=!1===t.onArrowPress(i,n);if(t.visualDebugger&&t.visualDebugger.clear(),r)t.log("keyDownEventListener","default navigation prevented");else{var a=(0,f.default)(t.getKeyMap(),(function(e){return e.includes(s)}));t.smartNavigate(a,null,{event:o})}}}}},this.throttle&&(this.keyDownEventListenerThrottled=(0,b.default)(this.keyDownEventListener.bind(this),this.throttle,N)),this.keyUpEventListener=function(o){var s=e.getKeyCode(o),i=t.getEventType(s);delete t.pressedKeys[i],t.throttle&&!t.throttleKeypresses&&t.keyDownEventListenerThrottled.cancel(),i===D&&t.focusKey&&t.onEnterRelease()},window.addEventListener("keyup",this.keyUpEventListener),window.addEventListener("keydown",this.throttle?this.keyDownEventListenerThrottled:this.keyDownEventListener))},e.prototype.unbindEventHandlers=function(){if("undefined"!=typeof window&&window.removeEventListener){window.removeEventListener("keyup",this.keyUpEventListener),this.keyUpEventListener=null;var e=this.throttle?this.keyDownEventListenerThrottled:this.keyDownEventListener;window.removeEventListener("keydown",e),this.keyDownEventListener=null}},e.prototype.onEnterPress=function(e){var t=this.focusableComponents[this.focusKey];t?t.focusable?t.onEnterPress&&t.onEnterPress(e):this.log("onEnterPress","componentNotFocusable"):this.log("onEnterPress","noComponent")},e.prototype.onEnterRelease=function(){var e=this.focusableComponents[this.focusKey];e?e.focusable?e.onEnterRelease&&e.onEnterRelease():this.log("onEnterRelease","componentNotFocusable"):this.log("onEnterRelease","noComponent")},e.prototype.onArrowPress=function(e,t){var o=this.focusableComponents[this.focusKey];if(o)return o&&o.onArrowPress&&o.onArrowPress(e,t);this.log("onArrowPress","noComponent")},e.prototype.navigateByDirection=function(e,t){if(!0!==this.paused&&this.enabled&&!this.nativeMode){var o=[E,w,K,x];o.includes(e)?(this.log("navigateByDirection","direction",e),this.smartNavigate(e,null,t)):this.log("navigateByDirection","Invalid direction. You passed: `".concat(e,"`, but you can use only these: "),o)}},e.prototype.smartNavigate=function(t,o,s){var i=this;if(!this.nativeMode){var n=t===E||t===w,r=t===E||(this.writingDirection===C.default.LTR?t===x:t===K);this.log("smartNavigate","direction",t),this.log("smartNavigate","fromParentFocusKey",o),this.log("smartNavigate","this.focusKey",this.focusKey),o||(0,v.default)(this.focusableComponents,(function(e){e.layoutUpdated=!1}));var a=this.focusableComponents[o||this.focusKey];if(o||a){if(this.log("smartNavigate","currentComponent",a?a.focusKey:void 0,a?a.node:void 0,a),a){this.updateLayout(a.focusKey);var u=a.parentFocusKey,c=a.focusKey,l=a.layout,d=e.getCutoffCoordinate(n,r,!1,l,this.writingDirection),f=(0,h.default)(this.focusableComponents,(function(t){if(t.parentFocusKey===u&&t.focusable){i.updateLayout(t.focusKey);var o=e.getCutoffCoordinate(n,r,!0,t.layout,i.writingDirection);return n||i.writingDirection===C.default.LTR?r?o>=d:o<=d:r?o<=d:o>=d}return!1}));if(this.debug&&(this.log("smartNavigate","currentCutoffCoordinate",d),this.log("smartNavigate","siblings","".concat(f.length," elements:"),f.map((function(e){return e.focusKey})).join(", "),f.map((function(e){return e.node})),f.map((function(e){return e})))),this.visualDebugger){var y=e.getRefCorners(t,!1,l);this.visualDebugger.drawPoint(y.a.x,y.a.y),this.visualDebugger.drawPoint(y.b.x,y.b.y)}var g=this.sortSiblingsByPriority(f,l,t,c),b=(0,p.default)(g);if(this.log("smartNavigate","nextComponent",b?b.focusKey:void 0,b?b.node:void 0,b),b)this.setFocus(b.focusKey,s);else{var F=this.focusableComponents[u],m=(null==F?void 0:F.isFocusBoundary)?F.focusBoundaryDirections||[t]:[];F&&m.includes(t)||this.smartNavigate(t,u,s)}}}else this.setFocus(this.getForcedFocusKey())}},e.prototype.saveLastFocusedChildKey=function(e,t){e&&(this.log("saveLastFocusedChildKey","".concat(e.focusKey," lastFocusedChildKey set"),t),e.lastFocusedChildKey=t)},e.prototype.log=function(e,t){for(var o=[],s=2;s<arguments.length;s++)o[s-2]=arguments[s];this.debug&&console.log.apply(console,u(["%c".concat(e,"%c").concat(t),"background: ".concat(L[this.logIndex%L.length],"; color: black; padding: 1px 5px;"),"background: #333; color: #BADA55; padding: 1px 5px;"],o,!1))},e.prototype.getCurrentFocusKey=function(){return this.focusKey},e.prototype.getForcedFocusKey=function(){var e,o=(0,h.default)(this.focusableComponents,(function(e){return e.focusable&&e.forceFocus})),s=this.sortSiblingsByPriority(o,{x:0,y:0,width:0,height:0,left:0,top:0,right:0,bottom:0,node:null},"down",t.ROOT_FOCUS_KEY);return null===(e=(0,p.default)(s))||void 0===e?void 0:e.focusKey},e.prototype.getNextFocusKey=function(e){var t=this,o=this.focusableComponents[e];if(!o||this.nativeMode)return e;var s=(0,h.default)(this.focusableComponents,(function(t){return t.parentFocusKey===e&&t.focusable}));if(s.length>0){var i=o.lastFocusedChildKey,n=o.preferredChildFocusKey;if(this.log("getNextFocusKey","lastFocusedChildKey is",i),this.log("getNextFocusKey","preferredChildFocusKey is",n),i&&o.saveLastFocusedChild&&this.isParticipatingFocusableComponent(i))return this.log("getNextFocusKey","lastFocusedChildKey will be focused",i),this.getNextFocusKey(i);if(n&&this.isParticipatingFocusableComponent(n))return this.log("getNextFocusKey","preferredChildFocusKey will be focused",n),this.getNextFocusKey(n);s.forEach((function(e){return t.updateLayout(e.focusKey)}));var r=function(e,t){var o=t===C.default.LTR?function(e){var t=e.layout;return Math.abs(t.left)+Math.abs(t.top)}:function(e){var t=e.layout;return Math.abs(window.innerWidth-t.right)+Math.abs(t.top)},s=(0,g.default)(e,o);return(0,p.default)(s)}(s,this.writingDirection).focusKey;return this.log("getNextFocusKey","childKey will be focused",r),this.getNextFocusKey(r)}return this.log("getNextFocusKey","targetFocusKey",e),e},e.prototype.addFocusable=function(e){var t=e.focusKey,o=e.node,s=e.parentFocusKey,i=e.onEnterPress,n=e.onEnterRelease,r=e.onArrowPress,a=e.onFocus,u=e.onBlur,c=e.saveLastFocusedChild,l=e.trackChildren,d=e.onUpdateFocus,h=e.onUpdateHasFocusedChild,f=e.preferredChildFocusKey,p=e.autoRestoreFocus,y=e.forceFocus,v=e.focusable,g=e.isFocusBoundary,b=e.focusBoundaryDirections;if(this.focusableComponents[t]={focusKey:t,node:o,parentFocusKey:s,onEnterPress:i,onEnterRelease:n,onArrowPress:r,onFocus:a,onBlur:u,onUpdateFocus:d,onUpdateHasFocusedChild:h,saveLastFocusedChild:c,trackChildren:l,preferredChildFocusKey:f,focusable:v,isFocusBoundary:g,focusBoundaryDirections:b,autoRestoreFocus:p,forceFocus:y,lastFocusedChildKey:null,layout:{x:0,y:0,width:0,height:0,left:0,top:0,right:0,bottom:0,node:o},layoutUpdated:!1},o||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[t]),!this.nativeMode){this.updateLayout(t),this.log("addFocusable","Component added: ",this.focusableComponents[t]),t===this.focusKey&&this.setFocus(f||t);for(var F=this.focusableComponents[this.focusKey];F;){if(F.parentFocusKey===t){this.updateParentsHasFocusedChild(this.focusKey,{}),this.updateParentsLastFocusedChild(this.focusKey);break}F=this.focusableComponents[F.parentFocusKey]}}},e.prototype.removeFocusable=function(e){var t=e.focusKey,o=this.focusableComponents[t];if(o){var s=o.parentFocusKey;(0,o.onUpdateFocus)(!1),this.log("removeFocusable","Component removed: ",o),delete this.focusableComponents[t];var i=this.parentsHavingFocusedChild.includes(t);this.parentsHavingFocusedChild=this.parentsHavingFocusedChild.filter((function(e){return e!==t}));var n=this.focusableComponents[s],r=t===this.focusKey;if(n&&n.lastFocusedChildKey===t&&(n.lastFocusedChildKey=null),this.nativeMode)return;(r||i)&&n&&n.autoRestoreFocus&&(this.log("removeFocusable","Component removed: ",r?"Leaf component":"Container component","Auto restoring focus to: ",s),this.setFocusDebounced(s))}},e.prototype.getNodeLayoutByFocusKey=function(e){var t=this.focusableComponents[e];return t?(this.updateLayout(t.focusKey),t.layout):null},e.prototype.setCurrentFocusedKey=function(e,t){var o,s,i,n;if(this.isFocusableComponent(this.focusKey)&&e!==this.focusKey){var r=this.focusableComponents[this.focusKey];r.onUpdateFocus(!1),r.onBlur(this.getNodeLayoutByFocusKey(this.focusKey),t),null===(s=null===(o=r.node)||void 0===o?void 0:o.removeAttribute)||void 0===s||s.call(o,"data-focused"),this.log("setCurrentFocusedKey","onBlur",r)}if(this.focusKey=e,this.isFocusableComponent(this.focusKey)){var a=this.focusableComponents[this.focusKey];this.shouldFocusDOMNode&&a.node&&a.node.focus(this.domNodeFocusOptions),null===(n=null===(i=a.node)||void 0===i?void 0:i.setAttribute)||void 0===n||n.call(i,"data-focused","true"),a.onUpdateFocus(!0),a.onFocus(this.getNodeLayoutByFocusKey(this.focusKey),t),this.log("setCurrentFocusedKey","onFocus",a)}},e.prototype.updateParentsHasFocusedChild=function(e,t){for(var o=this,s=[],i=this.focusableComponents[e];i;){var n=i.parentFocusKey,r=this.focusableComponents[n];if(r){var a=r.focusKey;s.push(a)}i=r}var u=(0,d.default)(this.parentsHavingFocusedChild,s),c=(0,d.default)(s,this.parentsHavingFocusedChild);(0,y.default)(u,(function(e){var s=o.focusableComponents[e];s&&s.trackChildren&&s.onUpdateHasFocusedChild(!1),o.onIntermediateNodeBecameBlurred(e,t)})),(0,y.default)(c,(function(e){var s=o.focusableComponents[e];s&&s.trackChildren&&s.onUpdateHasFocusedChild(!0),o.onIntermediateNodeBecameFocused(e,t)})),this.parentsHavingFocusedChild=s},e.prototype.updateParentsLastFocusedChild=function(e){for(var t=this.focusableComponents[e];t;){var o=t.parentFocusKey,s=this.focusableComponents[o];s&&this.saveLastFocusedChildKey(s,t.focusKey),t=s}},e.prototype.getKeyMap=function(){return this.keyMap},e.prototype.setKeyMap=function(e){this.keyMap=i(i({},this.getKeyMap()),function(e){var t={};return Object.entries(e).forEach((function(e){var o=e[0],s=e[1];t[o]=Array.isArray(s)?s:[s]})),t}(e))},e.prototype.isFocusableComponent=function(e){return!!this.focusableComponents[e]},e.prototype.isParticipatingFocusableComponent=function(e){return this.isFocusableComponent(e)&&this.focusableComponents[e].focusable},e.prototype.onIntermediateNodeBecameFocused=function(e,t){this.isParticipatingFocusableComponent(e)&&this.focusableComponents[e].onFocus(this.getNodeLayoutByFocusKey(e),t)},e.prototype.onIntermediateNodeBecameBlurred=function(e,t){this.isParticipatingFocusableComponent(e)&&this.focusableComponents[e].onBlur(this.getNodeLayoutByFocusKey(e),t)},e.prototype.pause=function(){this.paused=!0},e.prototype.resume=function(){this.paused=!1},e.prototype.setFocus=function(e,o){if(void 0===o&&(o={}),this.setFocusDebounced.cancel(),this.enabled&&!this.nativeMode){this.log("setFocus","focusKey",e),e&&e!==t.ROOT_FOCUS_KEY||(e=this.getForcedFocusKey());var s=this.getNextFocusKey(e);this.log("setFocus","newFocusKey",s),this.setCurrentFocusedKey(s,o),this.updateParentsHasFocusedChild(s,o),this.updateParentsLastFocusedChild(s)}},e.prototype.updateAllLayouts=function(){var e=this;this.enabled&&!this.nativeMode&&(0,v.default)(this.focusableComponents,(function(t,o){e.updateLayout(o)}))},e.prototype.updateLayout=function(e){var t=this.focusableComponents[e];if(t&&!this.nativeMode&&!t.layoutUpdated){var o=t.node,s=this.useGetBoundingClientRect?(0,m.getBoundingClientRect)(o):(0,m.default)(o);t.layout=i(i({},s),{node:o})}},e.prototype.updateFocusable=function(e,t){var o=t.node,s=t.preferredChildFocusKey,i=t.focusable,n=t.isFocusBoundary,r=t.focusBoundaryDirections,a=t.onEnterPress,u=t.onEnterRelease,c=t.onArrowPress,l=t.onFocus,d=t.onBlur;if(!this.nativeMode){var h=this.focusableComponents[e];h&&(h.preferredChildFocusKey=s,h.focusable=i,h.isFocusBoundary=n,h.focusBoundaryDirections=r,h.onEnterPress=a,h.onEnterRelease=u,h.onArrowPress=c,h.onFocus=l,h.onBlur=d,o&&(h.node=o))}},e.prototype.isNativeMode=function(){return this.nativeMode},e.prototype.doesFocusableExist=function(e){return!!this.focusableComponents[e]},e.prototype.updateRtl=function(e){this.writingDirection=e?C.default.RTL:C.default.LTR},e}();t.SpatialNavigation=new P,t.init=t.SpatialNavigation.init,t.setThrottle=t.SpatialNavigation.setThrottle,t.destroy=t.SpatialNavigation.destroy,t.setKeyMap=t.SpatialNavigation.setKeyMap,t.setFocus=t.SpatialNavigation.setFocus,t.navigateByDirection=t.SpatialNavigation.navigateByDirection,t.pause=t.SpatialNavigation.pause,t.resume=t.SpatialNavigation.resume,t.updateAllLayouts=t.SpatialNavigation.updateAllLayouts,t.getCurrentFocusKey=t.SpatialNavigation.getCurrentFocusKey,t.doesFocusableExist=t.SpatialNavigation.doesFocusableExist,t.updateRtl=t.SpatialNavigation.updateRtl},35:function(e,t,o){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=s(o(119)),n="undefined"!=typeof window&&window.document,r=n?window.innerWidth:0,a=n?window.innerHeight:0,u=function(){function e(t){n&&(this.debugCtx=e.createCanvas("sn-debug","1010",t),this.layoutsCtx=e.createCanvas("sn-layouts","1000",t),this.writingDirection=t)}return e.createCanvas=function(e,t,o){var s=document.querySelector("#".concat(e))||document.createElement("canvas");s.setAttribute("id",e),s.setAttribute("dir",o===i.default.LTR?"ltr":"rtl");var n=s.getContext("2d");return s.style.zIndex=t,s.style.position="fixed",s.style.top="0",s.style.left="0",document.body.appendChild(s),s.width=r,s.height=a,n},e.prototype.clear=function(){n&&this.debugCtx.clearRect(0,0,r,a)},e.prototype.clearLayouts=function(){n&&this.layoutsCtx.clearRect(0,0,r,a)},e.prototype.drawLayout=function(e,t,o){if(n){this.layoutsCtx.strokeStyle="green",this.layoutsCtx.strokeRect(e.left,e.top,e.width,e.height),this.layoutsCtx.font="8px monospace",this.layoutsCtx.fillStyle="red";var s=this.writingDirection===i.default.LTR?"left":"right",r=e[s];this.layoutsCtx.fillText(t,r,e.top+10),this.layoutsCtx.fillText(o,r,e.top+25),this.layoutsCtx.fillText("".concat(s,": ").concat(r),r,e.top+40),this.layoutsCtx.fillText("top: ".concat(e.top),r,e.top+55)}},e.prototype.drawPoint=function(e,t,o,s){void 0===o&&(o="blue"),void 0===s&&(s=10),n&&(this.debugCtx.strokeStyle=o,this.debugCtx.lineWidth=3,this.debugCtx.strokeRect(e-s/2,t-s/2,s,s))},e}();t.default=u},119:function(e,t){var o;Object.defineProperty(t,"__esModule",{value:!0}),function(e){e[e.LTR=0]="LTR",e[e.RTL=1]="RTL"}(o||(o={})),t.default=o},607:function(e,t,o){var s=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var i=Object.getOwnPropertyDescriptor(t,o);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,i)}:function(e,t,o,s){void 0===s&&(s=o),e[s]=t[o]}),i=this&&this.__exportStar||function(e,t){for(var o in e)"default"===o||Object.prototype.hasOwnProperty.call(t,o)||s(t,e,o)};Object.defineProperty(t,"__esModule",{value:!0}),i(o(79),t),i(o(445),t),i(o(654),t)},964:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.getBoundingClientRect=void 0;var o=function(e){for(var t=e.offsetParent,o=e.offsetHeight,s=e.offsetWidth,i=e.offsetLeft,n=e.offsetTop;t&&1===t.nodeType;)i+=t.offsetLeft-t.scrollLeft,n+=t.offsetTop-t.scrollTop,t=t.offsetParent;return{height:o,left:i,top:n,width:s}};t.default=function(e){var t=e&&e.parentElement;if(e&&t){var s=o(t),i=o(e),n=i.height,r=i.left,a=i.top,u=i.width;return{x:r-s.left,y:a-s.top,width:u,height:n,left:r,top:a,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}},t.getBoundingClientRect=function(e){if(e&&e.getBoundingClientRect){var t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height,left:t.left,top:t.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}}},445:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.useFocusContext=t.FocusContext=void 0;var s=o(156),i=o(654);t.FocusContext=(0,s.createContext)(i.ROOT_FOCUS_KEY),t.FocusContext.displayName="FocusContext",t.useFocusContext=function(){return(0,s.useContext)(t.FocusContext)}},79:function(e,t,o){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.useFocusable=void 0;var i=o(156),n=s(o(604)),r=s(o(461)),a=o(654),u=o(445);t.useFocusable=function(e){var t=void 0===e?{}:e,o=t.focusable,s=void 0===o||o,c=t.saveLastFocusedChild,l=void 0===c||c,d=t.trackChildren,h=void 0!==d&&d,f=t.autoRestoreFocus,p=void 0===f||f,y=t.forceFocus,v=void 0!==y&&y,g=t.isFocusBoundary,b=void 0!==g&&g,F=t.focusBoundaryDirections,C=t.focusKey,m=t.preferredChildFocusKey,K=t.onEnterPress,x=void 0===K?n.default:K,w=t.onEnterRelease,E=void 0===w?n.default:w,D=t.onArrowPress,M=void 0===D?function(){return!0}:D,L=t.onFocus,N=void 0===L?n.default:L,P=t.onBlur,R=void 0===P?n.default:P,B=t.extraProps,_=(0,i.useCallback)((function(e){x(B,e)}),[x,B]),O=(0,i.useCallback)((function(){E(B)}),[E,B]),k=(0,i.useCallback)((function(e,t){return M(e,B,t)}),[B,M]),T=(0,i.useCallback)((function(e,t){N(e,B,t)}),[B,N]),A=(0,i.useCallback)((function(e,t){R(e,B,t)}),[B,R]),S=(0,i.useRef)(null),q=(0,i.useState)(!1),U=q[0],j=q[1],H=(0,i.useState)(!1),I=H[0],Y=H[1],G=(0,u.useFocusContext)(),W=(0,i.useMemo)((function(){return C||(0,r.default)("sn:focusable-item-")}),[C]),z=(0,i.useCallback)((function(e){void 0===e&&(e={}),a.SpatialNavigation.setFocus(W,e)}),[W]);return(0,i.useEffect)((function(){var e=S.current;return a.SpatialNavigation.addFocusable({focusKey:W,node:e,parentFocusKey:G,preferredChildFocusKey:m,onEnterPress:_,onEnterRelease:O,onArrowPress:k,onFocus:T,onBlur:A,onUpdateFocus:function(e){return void 0===e&&(e=!1),j(e)},onUpdateHasFocusedChild:function(e){return void 0===e&&(e=!1),Y(e)},saveLastFocusedChild:l,trackChildren:h,isFocusBoundary:b,focusBoundaryDirections:F,autoRestoreFocus:p,forceFocus:v,focusable:s}),function(){a.SpatialNavigation.removeFocusable({focusKey:W})}}),[]),(0,i.useEffect)((function(){var e=S.current;a.SpatialNavigation.updateFocusable(W,{node:e,preferredChildFocusKey:m,focusable:s,isFocusBoundary:b,focusBoundaryDirections:F,onEnterPress:_,onEnterRelease:O,onArrowPress:k,onFocus:T,onBlur:A})}),[W,m,s,b,F,_,O,k,T,A]),{ref:S,focusSelf:z,focused:U,hasFocusedChild:I,focusKey:W}}},150:function(t){t.exports=e},117:function(e){e.exports=t},747:function(e){e.exports=o},23:function(e){e.exports=s},842:function(e){e.exports=i},682:function(e){e.exports=n},784:function(e){e.exports=r},604:function(e){e.exports=a},432:function(e){e.exports=u},67:function(e){e.exports=c},461:function(e){e.exports=l},156:function(e){e.exports=d}},f={};return function e(t){var o=f[t];if(void 0!==o)return o.exports;var s=f[t]={exports:{}};return h[t].call(s.exports,s,s.exports,e),s.exports}(607)}()}));

package.json

 {
   "name": "@noriginmedia/norigin-spatial-navigation",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "React hooks based Spatial Navigation solution",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81041

increased by0.28%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes