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

Comparing version 2.0.1 to 2.0.2

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,n,i,r,a,u,c,l,d){return function(){"use strict";var h={654:function(e,t,o){var s,n=this&&this.__assign||function(){return n=Object.assign||function(e){for(var t,o=1,s=arguments.length;o<s;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},n.apply(this,arguments)},i=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,n)}: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)&&i(t,e,o);return r(t,e),t},u=this&&this.__spreadArray||function(e,t,o){if(o||2===arguments.length)for(var s,n=0,i=t.length;n<i;n++)!s&&n in t||(s||(s=Array.prototype.slice.call(t,0,n)),s[n]=t[n]);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.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(747)),d=c(o(842)),h=c(o(432)),f=c(o(23)),p=c(o(682)),y=c(o(784)),v=c(o(67)),g=c(o(150)),b=c(o(117)),F=a(o(964)),C=c(o(35)),K="left",m="right",x="up",w="down",E="enter",P=((s={}).left=[37],s.up=[38],s.right=[39],s.down=[40],s.enter=[13],s);t.ROOT_FOCUS_KEY="SN:ROOT";var B=["#0FF","#FF0","#F0F"],D={leading:!0,trailing:!1},L=function(){function e(){this.focusableComponents={},this.focusKey=null,this.parentsHavingFocusedChild=[],this.enabled=!1,this.nativeMode=!1,this.throttle=0,this.throttleKeypresses=!1,this.useGetBoundingClientRect=!1,this.shouldFocusDOMNode=!1,this.pressedKeys={},this.paused=!1,this.keyDownEventListener=null,this.keyUpEventListener=null,this.keyMap=P,this.onKeyEvent=this.onKeyEvent.bind(this),this.pause=this.pause.bind(this),this.resume=this.resume.bind(this),this.setFocus=this.setFocus.bind(this),this.updateAllLayouts=this.updateAllLayouts.bind(this),this.navigateByDirection=this.navigateByDirection.bind(this),this.init=this.init.bind(this),this.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.setFocusDebounced=(0,g.default)(this.setFocus,300,{leading:!1,trailing:!0}),this.debug=!1,this.visualDebugger=null,this.logIndex=0}return e.getCutoffCoordinate=function(e,t,o,s){var n=s.left,i=s.top,r=s.width,a=s.height,u=e?i:n,c=e?a:r;return t?o?u:u+c:o?u+c:u},e.getRefCorners=function(e,t,o){var s=o.left,n=o.top,i=o.width,r=o.height,a={a:{x:0,y:0},b:{x:0,y:0}};switch(e){case x:var u=t?n+r:n;a.a={x:s,y:u},a.b={x:s+i,y:u};break;case w:u=t?n:n+r,a.a={x:s,y:u},a.b={x:s+i,y:u};break;case K:var c=t?s+i:s;a.a={x:c,y:n},a.b={x:c,y:n+r};break;case m:c=t?s:s+i,a.a={x:c,y:n},a.b={x:c,y:n+r}}return a},e.isAdjacentSlice=function(e,t,o){var s=e.a,n=e.b,i=t.a,r=t.b,a=o?"x":"y",u=s[a],c=n[a],l=i[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,n=t.a,i=o?"y":"x";return Math.abs(n[i]-s[i])},e.getSecondaryAxisDistance=function(e,t,o){var s=e.a,n=e.b,i=t.a,r=t.b,a=o?"x":"y",u=s[a],c=n[a],l=i[a],d=r[a],h=[];return h.push(Math.abs(l-u)),h.push(Math.abs(l-c)),h.push(Math.abs(d-u)),h.push(Math.abs(d-c)),Math.min.apply(Math,h)},e.prototype.sortSiblingsByPriority=function(t,o,s,n){var i=this,r=s===w||s===x,a=e.getRefCorners(s,!1,o);return(0,h.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),h=l(a,o,r),f=5*d+h,p=(f+1)/(u?5:1);return i.log("smartNavigate","distance (primary, secondary, total weighted) for ".concat(t.focusKey," relative to ").concat(n," is"),d,h,f),i.log("smartNavigate","priority for ".concat(t.focusKey," relative to ").concat(n," is"),p),i.visualDebugger&&(i.visualDebugger.drawPoint(o.a.x,o.a.y,"yellow",6),i.visualDebugger.drawPoint(o.b.x,o.b.y,"yellow",6)),p}))},e.prototype.init=function(e){var t=void 0===e?{}:e,o=t.debug,s=void 0!==o&&o,n=t.visualDebug,i=void 0!==n&&n,r=t.nativeMode,a=void 0!==r&&r,u=t.throttle,c=void 0===u?0:u,l=t.throttleKeypresses,d=void 0!==l&&l,h=t.useGetBoundingClientRect,f=void 0!==h&&h,p=t.shouldFocusDOMNode,y=void 0!==p&&p;this.enabled||(this.enabled=!0,this.nativeMode=a,this.throttleKeypresses=d,this.useGetBoundingClientRect=f,this.shouldFocusDOMNode=y&&!a,this.debug=s,this.nativeMode||(Number.isInteger(c)&&c>0&&(this.throttle=c),this.bindEventHandlers(),i&&(this.visualDebugger=new C.default,this.startDrawLayouts())))},e.prototype.setThrottle=function(e){var t=void 0===e?{}:e,o=t.throttle,s=void 0===o?0:o,n=t.throttleKeypresses,i=void 0!==n&&n;this.throttleKeypresses=i,this.nativeMode||(this.unbindEventHandlers(),Number.isInteger(s)&&(this.throttle=s),this.bindEventHandlers())},e.prototype.startDrawLayouts=function(){var e=this,t=function(){requestAnimationFrame((function(){e.visualDebugger.clearLayouts(),(0,y.default)(e.focusableComponents,(function(t,o){e.visualDebugger.drawLayout(t.layout,o,t.parentFocusKey)})),t()}))};t()},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=P,this.unbindEventHandlers())},e.prototype.getEventType=function(e){return(0,f.default)(this.getKeyMap(),(function(t){return t.includes(e)}))},e.prototype.bindEventHandlers=function(){var e=this;"undefined"!=typeof window&&window.addEventListener&&(this.keyDownEventListener=function(t){if(!0!==e.paused){e.debug&&(e.logIndex+=1);var o=e.getEventType(t.keyCode);if(o){e.pressedKeys[o]=e.pressedKeys[o]?e.pressedKeys[o]+1:1,t.preventDefault(),t.stopPropagation();var s={pressedKeys:e.pressedKeys};o===E&&e.focusKey?e.onEnterPress(s):!1===e.onArrowPress(o,s)?(e.log("keyDownEventListener","default navigation prevented"),e.visualDebugger&&e.visualDebugger.clear()):e.onKeyEvent(t)}}},this.throttle&&(this.keyDownEventListenerThrottled=(0,v.default)(this.keyDownEventListener.bind(this),this.throttle,D)),this.keyUpEventListener=function(t){var o=e.getEventType(t.keyCode);delete e.pressedKeys[o],e.throttle&&!e.throttleKeypresses&&e.keyDownEventListenerThrottled.cancel(),o===E&&e.focusKey&&e.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=[w,x,K,m];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.onKeyEvent=function(e){this.visualDebugger&&this.visualDebugger.clear();var t=(0,f.default)(this.getKeyMap(),(function(t){return t.includes(e.keyCode)}));this.smartNavigate(t,null,{event:e})},e.prototype.smartNavigate=function(t,o,s){var n=this;if(!this.nativeMode){var i=t===w||t===x,r=t===w||t===m;this.log("smartNavigate","direction",t),this.log("smartNavigate","fromParentFocusKey",o),this.log("smartNavigate","this.focusKey",this.focusKey),o||(0,y.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,h=a.layout,f=e.getCutoffCoordinate(i,r,!1,h),p=(0,l.default)(this.focusableComponents,(function(t){if(t.parentFocusKey===u&&t.focusable){n.updateLayout(t.focusKey);var o=e.getCutoffCoordinate(i,r,!0,t.layout);return r?o>=f:o<=f}return!1}));if(this.debug&&(this.log("smartNavigate","currentCutoffCoordinate",f),this.log("smartNavigate","siblings","".concat(p.length," elements:"),p.map((function(e){return e.focusKey})).join(", "),p.map((function(e){return e.node})),p.map((function(e){return e})))),this.visualDebugger){var v=e.getRefCorners(t,!1,h);this.visualDebugger.drawPoint(v.a.x,v.a.y),this.visualDebugger.drawPoint(v.b.x,v.b.y)}var g=this.sortSiblingsByPriority(p,h,t,c),b=(0,d.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],C=(null==F?void 0:F.isFocusBoundary)?F.focusBoundaryDirections||[t]:[];F&&C.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(B[this.logIndex%B.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,l.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,node:null},"down",t.ROOT_FOCUS_KEY);return null===(e=(0,d.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,l.default)(this.focusableComponents,(function(t){return t.parentFocusKey===e&&t.focusable}));if(s.length>0){var n=o.lastFocusedChildKey,i=o.preferredChildFocusKey;if(this.log("getNextFocusKey","lastFocusedChildKey is",n),this.log("getNextFocusKey","preferredChildFocusKey is",i),n&&o.saveLastFocusedChild&&this.isParticipatingFocusableComponent(n))return this.log("getNextFocusKey","lastFocusedChildKey will be focused",n),this.getNextFocusKey(n);if(i&&this.isParticipatingFocusableComponent(i))return this.log("getNextFocusKey","preferredChildFocusKey will be focused",i),this.getNextFocusKey(i);s.forEach((function(e){return t.updateLayout(e.focusKey)}));var r=function(e){var t=(0,h.default)(e,(function(e){var t=e.layout;return Math.abs(t.left)+Math.abs(t.top)}));return(0,d.default)(t)}(s).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,n=e.onEnterPress,i=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:n,onEnterRelease:i,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,node:o},layoutUpdated:!1},!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 n=this.parentsHavingFocusedChild.includes(t);this.parentsHavingFocusedChild=this.parentsHavingFocusedChild.filter((function(e){return e!==t}));var i=this.focusableComponents[s],r=t===this.focusKey;if(i&&i.lastFocusedChildKey===t&&(i.lastFocusedChildKey=null),this.nativeMode)return;(r||n)&&i&&i.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(),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=[],n=this.focusableComponents[e];n;){var i=n.parentFocusKey,r=this.focusableComponents[i];if(r){var a=r.focusKey;s.push(a)}n=r}var u=(0,b.default)(this.parentsHavingFocusedChild,s),c=(0,b.default)(s,this.parentsHavingFocusedChild);(0,p.default)(u,(function(e){var s=o.focusableComponents[e];s&&s.trackChildren&&s.onUpdateHasFocusedChild(!1),o.onIntermediateNodeBecameBlurred(e,t)})),(0,p.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=n(n({},this.getKeyMap()),function(e){var t={};return Object.entries(e).forEach((function(e){var o=e[0],s=e[1];"number"==typeof s?t[o]=[s]:Array.isArray(s)&&(t[o]=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,y.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,F.getBoundingClientRect)(o):(0,F.default)(o);t.layout=n(n({},s),{node:o})}},e.prototype.updateFocusable=function(e,t){var o=t.node,s=t.preferredChildFocusKey,n=t.focusable,i=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=n,h.isFocusBoundary=i,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}();t.SpatialNavigation=new L,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},35:function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var o="undefined"!=typeof window&&window.document,s=o?window.innerWidth:0,n=o?window.innerHeight:0,i=function(){function e(){o&&(this.debugCtx=e.createCanvas("sn-debug","1010"),this.layoutsCtx=e.createCanvas("sn-layouts","1000"))}return e.createCanvas=function(e,t){var o=document.querySelector("#".concat(e))||document.createElement("canvas");o.setAttribute("id",e);var i=o.getContext("2d");return o.style.zIndex=t,o.style.position="fixed",o.style.top="0",o.style.left="0",document.body.appendChild(o),o.width=s,o.height=n,i},e.prototype.clear=function(){o&&this.debugCtx.clearRect(0,0,s,n)},e.prototype.clearLayouts=function(){o&&this.layoutsCtx.clearRect(0,0,s,n)},e.prototype.drawLayout=function(e,t,s){o&&(this.layoutsCtx.strokeStyle="green",this.layoutsCtx.strokeRect(e.left,e.top,e.width,e.height),this.layoutsCtx.font="8px monospace",this.layoutsCtx.fillStyle="red",this.layoutsCtx.fillText(t,e.left,e.top+10),this.layoutsCtx.fillText(s,e.left,e.top+25),this.layoutsCtx.fillText("left: ".concat(e.left),e.left,e.top+40),this.layoutsCtx.fillText("top: ".concat(e.top),e.left,e.top+55))},e.prototype.drawPoint=function(e,t,s,n){void 0===s&&(s="blue"),void 0===n&&(n=10),o&&(this.debugCtx.strokeStyle=s,this.debugCtx.lineWidth=3,this.debugCtx.strokeRect(e-n/2,t-n/2,n,n))},e}();t.default=i},607:function(e,t,o){var s=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,n)}:function(e,t,o,s){void 0===s&&(s=o),e[s]=t[o]}),n=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}),n(o(79),t),n(o(445),t),n(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,n=e.offsetLeft,i=e.offsetTop;t&&1===t.nodeType;)n+=t.offsetLeft-t.scrollLeft,i+=t.offsetTop-t.scrollTop,t=t.offsetParent;return{height:o,left:n,top:i,width:s}};t.default=function(e){var t=e&&e.parentElement;if(e&&t){var s=o(t),n=o(e),i=n.height,r=n.left,a=n.top,u=n.width;return{x:r-s.left,y:a-s.top,width:u,height:i,left:r,top:a}}return{x:0,y:0,width:0,height:0,left:0,top: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}}return{x:0,y:0,width:0,height:0,left:0,top:0}}},445:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.useFocusContext=t.FocusContext=void 0;var s=o(156),n=o(654);t.FocusContext=(0,s.createContext)(n.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 n=o(156),i=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,K=t.preferredChildFocusKey,m=t.onEnterPress,x=void 0===m?i.default:m,w=t.onEnterRelease,E=void 0===w?i.default:w,P=t.onArrowPress,B=void 0===P?function(){return!0}:P,D=t.onFocus,L=void 0===D?i.default:D,N=t.onBlur,M=void 0===N?i.default:N,k=t.extraProps,_=(0,n.useCallback)((function(e){x(k,e)}),[x,k]),O=(0,n.useCallback)((function(){E(k)}),[E,k]),R=(0,n.useCallback)((function(e,t){return B(e,k,t)}),[k,B]),S=(0,n.useCallback)((function(e,t){L(e,k,t)}),[k,L]),A=(0,n.useCallback)((function(e,t){M(e,k,t)}),[k,M]),q=(0,n.useRef)(null),T=(0,n.useState)(!1),j=T[0],H=T[1],U=(0,n.useState)(!1),I=U[0],Y=U[1],G=(0,u.useFocusContext)(),W=(0,n.useMemo)((function(){return C||(0,r.default)("sn:focusable-item-")}),[C]),z=(0,n.useCallback)((function(e){void 0===e&&(e={}),a.SpatialNavigation.setFocus(W,e)}),[W]);return(0,n.useEffect)((function(){var e=q.current;return a.SpatialNavigation.addFocusable({focusKey:W,node:e,parentFocusKey:G,preferredChildFocusKey:K,onEnterPress:_,onEnterRelease:O,onArrowPress:R,onFocus:S,onBlur:A,onUpdateFocus:function(e){return void 0===e&&(e=!1),H(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,n.useEffect)((function(){var e=q.current;a.SpatialNavigation.updateFocusable(W,{node:e,preferredChildFocusKey:K,focusable:s,isFocusBoundary:b,focusBoundaryDirections:F,onEnterPress:_,onEnterRelease:O,onArrowPress:R,onFocus:S,onBlur:A})}),[W,K,s,b,F,_,O,R,S,A]),{ref:q,focusSelf:z,focused:j,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=n},682:function(e){e.exports=i},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,n,i,r,a,u,c,l,d){return function(){"use strict";var h={654:function(e,t,o){var s,n=this&&this.__assign||function(){return n=Object.assign||function(e){for(var t,o=1,s=arguments.length;o<s;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},n.apply(this,arguments)},i=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,n)}: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)&&i(t,e,o);return r(t,e),t},u=this&&this.__spreadArray||function(e,t,o){if(o||2===arguments.length)for(var s,n=0,i=t.length;n<i;n++)!s&&n in t||(s||(s=Array.prototype.slice.call(t,0,n)),s[n]=t[n]);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.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=a(o(964)),K="left",m="right",x="up",w="down",E="enter",P=((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 D=["#0FF","#FF0","#F0F"],B={leading:!0,trailing:!1},L=function(){function e(){this.focusableComponents={},this.focusKey=null,this.parentsHavingFocusedChild=[],this.enabled=!1,this.nativeMode=!1,this.throttle=0,this.throttleKeypresses=!1,this.useGetBoundingClientRect=!1,this.shouldFocusDOMNode=!1,this.pressedKeys={},this.paused=!1,this.keyDownEventListener=null,this.keyUpEventListener=null,this.keyMap=P,this.onKeyEvent=this.onKeyEvent.bind(this),this.pause=this.pause.bind(this),this.resume=this.resume.bind(this),this.setFocus=this.setFocus.bind(this),this.updateAllLayouts=this.updateAllLayouts.bind(this),this.navigateByDirection=this.navigateByDirection.bind(this),this.init=this.init.bind(this),this.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.setFocusDebounced=(0,l.default)(this.setFocus,300,{leading:!1,trailing:!0}),this.debug=!1,this.visualDebugger=null,this.logIndex=0}return e.getCutoffCoordinate=function(e,t,o,s){var n=s.left,i=s.top,r=s.width,a=s.height,u=e?i:n,c=e?a:r;return t?o?u:u+c:o?u+c:u},e.getRefCorners=function(e,t,o){var s=o.left,n=o.top,i=o.width,r=o.height,a={a:{x:0,y:0},b:{x:0,y:0}};switch(e){case x:var u=t?n+r:n;a.a={x:s,y:u},a.b={x:s+i,y:u};break;case w:u=t?n:n+r,a.a={x:s,y:u},a.b={x:s+i,y:u};break;case K:var c=t?s+i:s;a.a={x:c,y:n},a.b={x:c,y:n+r};break;case m:c=t?s:s+i,a.a={x:c,y:n},a.b={x:c,y:n+r}}return a},e.isAdjacentSlice=function(e,t,o){var s=e.a,n=e.b,i=t.a,r=t.b,a=o?"x":"y",u=s[a],c=n[a],l=i[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,n=t.a,i=o?"y":"x";return Math.abs(n[i]-s[i])},e.getSecondaryAxisDistance=function(e,t,o){var s=e.a,n=e.b,i=t.a,r=t.b,a=o?"x":"y",u=s[a],c=n[a],l=i[a],d=r[a],h=[];return h.push(Math.abs(l-u)),h.push(Math.abs(l-c)),h.push(Math.abs(d-u)),h.push(Math.abs(d-c)),Math.min.apply(Math,h)},e.prototype.sortSiblingsByPriority=function(t,o,s,n){var i=this,r=s===w||s===x,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),h=l(a,o,r),f=5*d+h,p=(f+1)/(u?5:1);return i.log("smartNavigate","distance (primary, secondary, total weighted) for ".concat(t.focusKey," relative to ").concat(n," is"),d,h,f),i.log("smartNavigate","priority for ".concat(t.focusKey," relative to ").concat(n," is"),p),i.visualDebugger&&(i.visualDebugger.drawPoint(o.a.x,o.a.y,"yellow",6),i.visualDebugger.drawPoint(o.b.x,o.b.y,"yellow",6)),p}))},e.prototype.init=function(e){var t=void 0===e?{}:e,o=t.debug,s=void 0!==o&&o,n=t.visualDebug,i=void 0!==n&&n,r=t.nativeMode,a=void 0!==r&&r,u=t.throttle,c=void 0===u?0:u,l=t.throttleKeypresses,d=void 0!==l&&l,h=t.useGetBoundingClientRect,f=void 0!==h&&h,p=t.shouldFocusDOMNode,y=void 0!==p&&p;this.enabled||(this.enabled=!0,this.nativeMode=a,this.throttleKeypresses=d,this.useGetBoundingClientRect=f,this.shouldFocusDOMNode=y&&!a,this.debug=s,this.nativeMode||(Number.isInteger(c)&&c>0&&(this.throttle=c),this.bindEventHandlers(),i&&(this.visualDebugger=new F.default,this.startDrawLayouts())))},e.prototype.setThrottle=function(e){var t=void 0===e?{}:e,o=t.throttle,s=void 0===o?0:o,n=t.throttleKeypresses,i=void 0!==n&&n;this.throttleKeypresses=i,this.nativeMode||(this.unbindEventHandlers(),Number.isInteger(s)&&(this.throttle=s),this.bindEventHandlers())},e.prototype.startDrawLayouts=function(){var e=this,t=function(){requestAnimationFrame((function(){e.visualDebugger.clearLayouts(),(0,v.default)(e.focusableComponents,(function(t,o){e.visualDebugger.drawLayout(t.layout,o,t.parentFocusKey)})),t()}))};t()},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=P,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.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),n=t.getEventType(s);if(n){t.pressedKeys[n]=t.pressedKeys[n]?t.pressedKeys[n]+1:1,o.preventDefault(),o.stopPropagation();var i={pressedKeys:t.pressedKeys};n===E&&t.focusKey?t.onEnterPress(i):!1===t.onArrowPress(n,i)?(t.log("keyDownEventListener","default navigation prevented"),t.visualDebugger&&t.visualDebugger.clear()):t.onKeyEvent(o)}}},this.throttle&&(this.keyDownEventListenerThrottled=(0,b.default)(this.keyDownEventListener.bind(this),this.throttle,B)),this.keyUpEventListener=function(o){var s=e.getKeyCode(o),n=t.getEventType(s);delete t.pressedKeys[n],t.throttle&&!t.throttleKeypresses&&t.keyDownEventListenerThrottled.cancel(),n===E&&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=[w,x,K,m];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.onKeyEvent=function(t){this.visualDebugger&&this.visualDebugger.clear();var o=e.getKeyCode(t),s=(0,f.default)(this.getKeyMap(),(function(e){return e.includes(o)}));this.smartNavigate(s,null,{event:t})},e.prototype.smartNavigate=function(t,o,s){var n=this;if(!this.nativeMode){var i=t===w||t===x,r=t===w||t===m;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(i,r,!1,l),f=(0,h.default)(this.focusableComponents,(function(t){if(t.parentFocusKey===u&&t.focusable){n.updateLayout(t.focusKey);var o=e.getCutoffCoordinate(i,r,!0,t.layout);return 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],C=(null==F?void 0:F.isFocusBoundary)?F.focusBoundaryDirections||[t]:[];F&&C.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(D[this.logIndex%D.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,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 n=o.lastFocusedChildKey,i=o.preferredChildFocusKey;if(this.log("getNextFocusKey","lastFocusedChildKey is",n),this.log("getNextFocusKey","preferredChildFocusKey is",i),n&&o.saveLastFocusedChild&&this.isParticipatingFocusableComponent(n))return this.log("getNextFocusKey","lastFocusedChildKey will be focused",n),this.getNextFocusKey(n);if(i&&this.isParticipatingFocusableComponent(i))return this.log("getNextFocusKey","preferredChildFocusKey will be focused",i),this.getNextFocusKey(i);s.forEach((function(e){return t.updateLayout(e.focusKey)}));var r=function(e){var t=(0,g.default)(e,(function(e){var t=e.layout;return Math.abs(t.left)+Math.abs(t.top)}));return(0,p.default)(t)}(s).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,n=e.onEnterPress,i=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:n,onEnterRelease:i,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,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 n=this.parentsHavingFocusedChild.includes(t);this.parentsHavingFocusedChild=this.parentsHavingFocusedChild.filter((function(e){return e!==t}));var i=this.focusableComponents[s],r=t===this.focusKey;if(i&&i.lastFocusedChildKey===t&&(i.lastFocusedChildKey=null),this.nativeMode)return;(r||n)&&i&&i.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(),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=[],n=this.focusableComponents[e];n;){var i=n.parentFocusKey,r=this.focusableComponents[i];if(r){var a=r.focusKey;s.push(a)}n=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=n(n({},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,C.getBoundingClientRect)(o):(0,C.default)(o);t.layout=n(n({},s),{node:o})}},e.prototype.updateFocusable=function(e,t){var o=t.node,s=t.preferredChildFocusKey,n=t.focusable,i=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=n,h.isFocusBoundary=i,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}();t.SpatialNavigation=new L,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},35:function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var o="undefined"!=typeof window&&window.document,s=o?window.innerWidth:0,n=o?window.innerHeight:0,i=function(){function e(){o&&(this.debugCtx=e.createCanvas("sn-debug","1010"),this.layoutsCtx=e.createCanvas("sn-layouts","1000"))}return e.createCanvas=function(e,t){var o=document.querySelector("#".concat(e))||document.createElement("canvas");o.setAttribute("id",e);var i=o.getContext("2d");return o.style.zIndex=t,o.style.position="fixed",o.style.top="0",o.style.left="0",document.body.appendChild(o),o.width=s,o.height=n,i},e.prototype.clear=function(){o&&this.debugCtx.clearRect(0,0,s,n)},e.prototype.clearLayouts=function(){o&&this.layoutsCtx.clearRect(0,0,s,n)},e.prototype.drawLayout=function(e,t,s){o&&(this.layoutsCtx.strokeStyle="green",this.layoutsCtx.strokeRect(e.left,e.top,e.width,e.height),this.layoutsCtx.font="8px monospace",this.layoutsCtx.fillStyle="red",this.layoutsCtx.fillText(t,e.left,e.top+10),this.layoutsCtx.fillText(s,e.left,e.top+25),this.layoutsCtx.fillText("left: ".concat(e.left),e.left,e.top+40),this.layoutsCtx.fillText("top: ".concat(e.top),e.left,e.top+55))},e.prototype.drawPoint=function(e,t,s,n){void 0===s&&(s="blue"),void 0===n&&(n=10),o&&(this.debugCtx.strokeStyle=s,this.debugCtx.lineWidth=3,this.debugCtx.strokeRect(e-n/2,t-n/2,n,n))},e}();t.default=i},607:function(e,t,o){var s=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,s,n)}:function(e,t,o,s){void 0===s&&(s=o),e[s]=t[o]}),n=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}),n(o(79),t),n(o(445),t),n(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,n=e.offsetLeft,i=e.offsetTop;t&&1===t.nodeType;)n+=t.offsetLeft-t.scrollLeft,i+=t.offsetTop-t.scrollTop,t=t.offsetParent;return{height:o,left:n,top:i,width:s}};t.default=function(e){var t=e&&e.parentElement;if(e&&t){var s=o(t),n=o(e),i=n.height,r=n.left,a=n.top,u=n.width;return{x:r-s.left,y:a-s.top,width:u,height:i,left:r,top:a}}return{x:0,y:0,width:0,height:0,left:0,top: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}}return{x:0,y:0,width:0,height:0,left:0,top:0}}},445:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0}),t.useFocusContext=t.FocusContext=void 0;var s=o(156),n=o(654);t.FocusContext=(0,s.createContext)(n.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 n=o(156),i=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,K=t.preferredChildFocusKey,m=t.onEnterPress,x=void 0===m?i.default:m,w=t.onEnterRelease,E=void 0===w?i.default:w,P=t.onArrowPress,D=void 0===P?function(){return!0}:P,B=t.onFocus,L=void 0===B?i.default:B,N=t.onBlur,M=void 0===N?i.default:N,_=t.extraProps,k=(0,n.useCallback)((function(e){x(_,e)}),[x,_]),O=(0,n.useCallback)((function(){E(_)}),[E,_]),R=(0,n.useCallback)((function(e,t){return D(e,_,t)}),[_,D]),A=(0,n.useCallback)((function(e,t){L(e,_,t)}),[_,L]),S=(0,n.useCallback)((function(e,t){M(e,_,t)}),[_,M]),q=(0,n.useRef)(null),T=(0,n.useState)(!1),j=T[0],U=T[1],H=(0,n.useState)(!1),I=H[0],Y=H[1],G=(0,u.useFocusContext)(),W=(0,n.useMemo)((function(){return C||(0,r.default)("sn:focusable-item-")}),[C]),z=(0,n.useCallback)((function(e){void 0===e&&(e={}),a.SpatialNavigation.setFocus(W,e)}),[W]);return(0,n.useEffect)((function(){var e=q.current;return a.SpatialNavigation.addFocusable({focusKey:W,node:e,parentFocusKey:G,preferredChildFocusKey:K,onEnterPress:k,onEnterRelease:O,onArrowPress:R,onFocus:A,onBlur:S,onUpdateFocus:function(e){return void 0===e&&(e=!1),U(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,n.useEffect)((function(){var e=q.current;a.SpatialNavigation.updateFocusable(W,{node:e,preferredChildFocusKey:K,focusable:s,isFocusBoundary:b,focusBoundaryDirections:F,onEnterPress:k,onEnterRelease:O,onArrowPress:R,onFocus:A,onBlur:S})}),[W,K,s,b,F,k,O,R,A,S]),{ref:q,focusSelf:z,focused:j,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=n},682:function(e){e.exports=i},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)}()}));

dist/SpatialNavigation.d.ts

@@ -30,6 +30,6 @@ export declare type Direction = 'up' | 'down' | 'left' | 'right';
 export declare type BackwardsCompatibleKeyMap = {
-    [index: string]: number | number[];
+    [index: string]: string | number | (number | string)[];
 };
 export declare type KeyMap = {
-    [index: string]: number[];
+    [index: string]: (string | number)[];
 };
@@ -36,0 +36,0 @@ export declare const init: ({ debug, visualDebug, nativeMode, throttle: throttleParam, throttleKeypresses, useGetBoundingClientRect, shouldFocusDOMNode }?: {

package.json

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

README.md

@@ -264,10 +264,10 @@ # Norigin Spatial Navigation
 ### `setKeyMap`
-Method to set custom key codes. I.e. when the device key codes differ from a standard browser arrow key codes.
+Method to set custom key codes (numbers) or key event names (strings) [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#non-printable_keys_function_keys). I.e. when the device key codes differ from a standard browser arrow key codes.
 ```jsx
 setKeyMap({
-  left: 9001,
-  up: 9002,
-  right: 9003,
-  down: 9004,
-  enter: 9005
+  left: 9001, // or 'ArrowLeft'
+  up: 9002, // or 'ArrowUp'
+  right: 9003, // or 'ArrowRight'
+  down: 9004, // or 'ArrowDown'
+  enter: 9005 // or 'Enter'
 });
@@ -274,0 +274,0 @@ ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63894

increased by0.93%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes