@leonchabbey/norigin-spatial-navigation
Version:
React hooks based Spatial Navigation solution
1 lines • 24.4 kB
JavaScript
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(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/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/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/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,l,c){return function(){"use strict";var d={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))},l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.setKeyMap=t.destroy=t.setThrottle=t.init=t.SpatialNavigation=t.ROOT_FOCUS_KEY=void 0;var c=l(o(747)),d=l(o(842)),h=l(o(432)),f=l(o(23)),p=l(o(682)),y=l(o(784)),v=l(o(67)),g=l(o(117)),b=a(o(964)),C=l(o(35)),F="left",K="right",m="up",x="down",w="enter",E=((s={}).left=[37],s.up=[38],s.right=[39],s.down=[40],s.enter=[13],s);t.ROOT_FOCUS_KEY="SN:ROOT";var L=["#0FF","#FF0","#F0F"],P={leading:!0,trailing:!1},N={x:0,y:0,width:0,height:0,left:0,top:0},M=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.pressedKeys={},this.paused=!1,this.keyDownEventListener=null,this.keyDownEventListenerThrottled=null,this.keyUpEventListener=null,this.keyMap=E,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.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,l=e?a:r;return t?o?u:u+l:o?u+l: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 m:var u=t?n+r:n;a.a={x:s,y:u},a.b={x:s+i,y:u};break;case x:u=t?n:n+r,a.a={x:s,y:u},a.b={x:s+i,y:u};break;case F:var l=t?s+i:s;a.a={x:l,y:n},a.b={x:l,y:n+r};break;case K:l=t?s:s+i,a.a={x:l,y:n},a.b={x:l,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],l=n[a],c=i[a],d=r[a],h=.2*(l-u);return Math.max(0,Math.min(l,d)-Math.max(u,c))>=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],l=n[a],c=i[a],d=r[a],h=[];return h.push(Math.abs(c-u)),h.push(Math.abs(c-l)),h.push(Math.abs(d-u)),h.push(Math.abs(d-l)),Math.min.apply(Math,h)},e.prototype.sortSiblingsByPriority=function(t,o,s,n){var i=this,r=s===x||s===m,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),l=u?e.getPrimaryAxisDistance:e.getSecondaryAxisDistance,c=u?e.getSecondaryAxisDistance:e.getPrimaryAxisDistance,d=l(a,o,r),h=c(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,l=void 0===u?0:u,c=t.throttleKeypresses,d=void 0!==c&&c,h=t.useGetBoundingClientRect,f=void 0!==h&&h;this.enabled||(this.enabled=!0,this.nativeMode=a,this.throttleKeypresses=d,this.useGetBoundingClientRect=f,this.debug=s,this.nativeMode||(Number.isInteger(l)&&l>0&&(this.throttle=l),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=this.visualDebugger;if(t){var o=function(){requestAnimationFrame((function(){t.clearLayouts(),(0,y.default)(e.focusableComponents,(function(e,o){t.drawLayout(e.layout,o,e.parentFocusKey)})),o()}))};o()}else this.log("startDrawLayouts","Can't draw layouts, visual debugger is not initialized")},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=E,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;if("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===w&&e.focusKey?e.onEnterPress(s):!1===e.onArrowPress(o,s)?(e.log("keyDownEventListener","default navigation prevented"),e.visualDebugger&&e.visualDebugger.clear()):e.onKeyEvent(t)}}};var t=this.keyDownEventListener;this.throttle&&(this.keyDownEventListenerThrottled=(0,v.default)(this.keyDownEventListener.bind(this),this.throttle,P),t=this.keyDownEventListenerThrottled),this.keyUpEventListener=function(t){var o,s=e.getEventType(t.keyCode);s&&delete e.pressedKeys[s],e.throttle&&!e.throttleKeypresses&&(null===(o=e.keyDownEventListenerThrottled)||void 0===o||o.cancel()),s===w&&e.focusKey&&e.onEnterRelease()},window.addEventListener("keyup",this.keyUpEventListener),window.addEventListener("keydown",t)}},e.prototype.unbindEventHandlers=function(){if("undefined"!=typeof window&&window.removeEventListener){this.keyUpEventListener&&(window.removeEventListener("keyup",this.keyUpEventListener),this.keyUpEventListener=null);var e=this.throttle?this.keyDownEventListenerThrottled:this.keyDownEventListener;e&&(window.removeEventListener("keydown",e),this.keyDownEventListenerThrottled=null,this.keyDownEventListener=null)}},e.prototype.onEnterPress=function(e){var t=this.focusKey&&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.focusKey&&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.focusKey&&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.nativeMode){var o=[x,m,F,K];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)}));t?this.smartNavigate(t,null,{event:e}):this.log("onKeyEvent","no direction found for keyCode",e.keyCode)},e.prototype.smartNavigate=function(t,o,s){var n=this;if(!this.nativeMode){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 i=o||this.focusKey,r=i&&this.focusableComponents[i];if(this.log("smartNavigate","currentComponent",r?r.focusKey:void 0,r?r.node:void 0),r){this.updateLayout(r.focusKey);var a=r.parentFocusKey,u=r.focusKey,l=r.layout,h=t===x||t===m,f=t===x||t===K,p=e.getCutoffCoordinate(h,f,!1,l),v=(0,c.default)(this.focusableComponents,(function(t){if(t.parentFocusKey===a&&t.focusable){n.updateLayout(t.focusKey);var o=e.getCutoffCoordinate(h,f,!0,t.layout);return f?o>=p:o<=p}return!1}));if(this.debug&&(this.log("smartNavigate","currentCutoffCoordinate",p),this.log("smartNavigate","siblings","".concat(v.length," elements:"),v.map((function(e){return e.focusKey})).join(", "),v.map((function(e){return e.node})))),this.visualDebugger){var g=e.getRefCorners(t,!1,l);this.visualDebugger.drawPoint(g.a.x,g.a.y),this.visualDebugger.drawPoint(g.b.x,g.b.y)}var b=this.sortSiblingsByPriority(v,l,t,u),C=(0,d.default)(b);if(this.log("smartNavigate","nextComponent",C?C.focusKey:void 0,C?C.node:void 0),C)this.setFocus(C.focusKey,s);else{var F=this.focusableComponents[a];this.saveLastFocusedChildKey(F,u),F&&F.isFocusBoundary||this.smartNavigate(t,a,s)}}}},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.getNextFocusKey=function(e){var t,o=this,s=this.focusableComponents[e];if(!s||this.nativeMode)return e;var n=(0,c.default)(this.focusableComponents,(function(t){return t.parentFocusKey===e&&t.focusable}));if(n.length>0){var i=s.lastFocusedChildKey,r=s.preferredChildFocusKey;if(this.log("getNextFocusKey","lastFocusedChildKey is",i),this.log("getNextFocusKey","preferredChildFocusKey is",r),i&&s.saveLastFocusedChild&&this.isParticipatingFocusableComponent(i))return this.log("getNextFocusKey","lastFocusedChildKey will be focused",i),this.getNextFocusKey(i);if(r&&this.isParticipatingFocusableComponent(r))return this.log("getNextFocusKey","preferredChildFocusKey will be focused",r),this.getNextFocusKey(r);n.forEach((function(e){return o.updateLayout(e.focusKey)}));var a=null===(t=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)}(n))||void 0===t?void 0:t.focusKey;return a?(this.log("getNextFocusKey","childKey will be focused",a),this.getNextFocusKey(a)):(this.log("getNextFocusKey","no next focus key found"),null)}return this.log("getNextFocusKey","targetFocusKey",e),e},e.prototype.addFocusable=function(e){var t=e.focusKey,o=e.parentFocusKey,s=e.onEnterPress,n=e.onEnterRelease,i=e.onArrowPress,r=e.onFocus,a=e.onBlur,u=e.saveLastFocusedChild,l=e.trackChildren,c=e.onUpdateFocus,d=e.onUpdateHasFocusedChild,h=e.preferredChildFocusKey,f=e.autoRestoreFocus,p=e.focusable,y=e.isFocusBoundary,v=e.node;this.focusableComponents[t]={focusKey:t,node:v,parentFocusKey:o,onEnterPress:s,onEnterRelease:n,onArrowPress:i,onFocus:r,onBlur:a,onUpdateFocus:c,onUpdateHasFocusedChild:d,saveLastFocusedChild:u,trackChildren:l,preferredChildFocusKey:h,focusable:p,isFocusBoundary:y,autoRestoreFocus:f,lastFocusedChildKey:void 0,layout:N,layoutUpdated:!1},this.nativeMode||(this.updateLayout(t),t===this.focusKey&&this.setFocus(t))},e.prototype.removeFocusable=function(e){var t=e.focusKey,o=this.focusableComponents[t];if(o){var s=o.parentFocusKey;delete this.focusableComponents[t];var n=this.focusableComponents[s],i=t===this.focusKey;if(n&&n.lastFocusedChildKey===t&&(n.lastFocusedChildKey=void 0),this.nativeMode)return;(0,p.default)(this.focusableComponents,(function(e){e.parentFocusKey===t&&e.focusable&&(e.parentFocusKey=s)})),i&&n&&n.autoRestoreFocus&&this.setFocus(s)}},e.prototype.getNodeLayoutByComponent=function(e){return this.updateLayout(e.focusKey),e.layout},e.prototype.setCurrentFocusedKey=function(e,t){if(this.focusKey&&this.isFocusableComponent(this.focusKey)&&e!==this.focusKey){var o=this.focusableComponents[this.focusKey],s=this.focusableComponents[o.parentFocusKey];this.saveLastFocusedChildKey(s,this.focusKey),o.onUpdateFocus(!1);var i=this.getNodeLayoutByComponent(o);o.onBlur(n(n({},i),{node:o.node}),t)}if(this.focusKey=e,this.isFocusableComponent(this.focusKey)){var r=this.focusableComponents[this.focusKey];r.onUpdateFocus(!0),i=this.getNodeLayoutByComponent(r),r.onFocus(n(n({},i),{node:r.node}),t)}},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,g.default)(this.parentsHavingFocusedChild,s),l=(0,g.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)(l,(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){if(this.isParticipatingFocusableComponent(e)){var o=this.focusableComponents[e],s=o.onFocus,i=o.node,r=this.getNodeLayoutByComponent(o);s(n(n({},r),{node:i}),t)}},e.prototype.onIntermediateNodeBecameBlurred=function(e,t){if(this.isParticipatingFocusableComponent(e)){var o=this.focusableComponents[e],s=o.onBlur,i=o.node,r=this.getNodeLayoutByComponent(o);s(n(n({},r),{node:i}),t)}},e.prototype.pause=function(){this.paused=!0},e.prototype.resume=function(){this.paused=!1},e.prototype.setFocus=function(e,t){if(void 0===t&&(t={}),this.enabled){this.log("setFocus","focusKey",e);var o=this.focusKey,s=this.getNextFocusKey(e);s?(this.log("setFocus","newFocusKey",s),this.setCurrentFocusedKey(s,t),this.updateParentsHasFocusedChild(s,t),o&&this.updateParentsLastFocusedChild(o)):this.log("setFocus","couldn't find a newFocusKey",s)}},e.prototype.updateAllLayouts=function(){var e=this;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;if(!o)return this.log("updateLayout","component doesn't have a node",e),void(t.layout=N);var s=this.useGetBoundingClientRect?(0,b.getBoundingClientRect)(o):(0,b.default)(o);t.layout=s}},e.prototype.updateFocusable=function(e,t){var o=t.node,s=t.preferredChildFocusKey,n=t.focusable,i=t.isFocusBoundary,r=t.onEnterPress,a=t.onEnterRelease,u=t.onArrowPress,l=t.onFocus,c=t.onBlur;if(!this.nativeMode){var d=this.focusableComponents[e];d&&(d.preferredChildFocusKey=s,d.focusable=n,d.isFocusBoundary=i,d.onEnterPress=r,d.onEnterRelease=a,d.onArrowPress=u,d.onFocus=l,d.onBlur=c,o&&(d.node=o))}},e.prototype.isNativeMode=function(){return this.nativeMode},e}();t.SpatialNavigation=new M,t.init=t.SpatialNavigation.init,t.setThrottle=t.SpatialNavigation.setThrottle,t.destroy=t.SpatialNavigation.destroy,t.setKeyMap=t.SpatialNavigation.setKeyMap},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")):(this.debugCtx=null,this.layoutsCtx=null)}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(){this.debugCtx&&this.debugCtx.clearRect(0,0,s,n)},e.prototype.clearLayouts=function(){this.layoutsCtx&&this.layoutsCtx.clearRect(0,0,s,n)},e.prototype.drawLayout=function(e,t,s){this.layoutsCtx&&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,o,s){void 0===o&&(o="blue"),void 0===s&&(s=10),this.debugCtx&&(this.debugCtx.strokeStyle=o,this.debugCtx.lineWidth=3,this.debugCtx.strokeRect(e-s/2,t-s/2,s,s))},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(893),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.parentElement;if(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.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}}},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(893),l=s(o(828));t.useFocusable=function(e){var t=void 0===e?{}:e,o=t.focusable,s=void 0===o||o,c=t.saveLastFocusedChild,d=void 0===c||c,h=t.trackChildren,f=void 0!==h&&h,p=t.autoRestoreFocus,y=void 0===p||p,v=t.isFocusBoundary,g=void 0!==v&&v,b=t.focusKey,C=t.preferredChildFocusKey,F=t.onEnterPress,K=void 0===F?i.default:F,m=t.onEnterRelease,x=void 0===m?i.default:m,w=t.onArrowPress,E=void 0===w?function(){return!0}:w,L=t.onFocus,P=void 0===L?i.default:L,N=t.onBlur,M=void 0===N?i.default:N,k=t.extraProps,B=void 0===k?{}:k,D=(0,n.useCallback)((function(e){K(B,e)}),[K,B]),_=(0,n.useCallback)((function(){x(B)}),[x,B]),R=(0,n.useCallback)((function(e,t){return E(e,B,t)}),[B,E]),O=(0,n.useCallback)((function(e,t){P(e,B,t)}),[B,P]),S=(0,n.useCallback)((function(e,t){M(e,B,t)}),[B,M]),A=(0,n.useRef)(null),q=(0,n.useState)(!1),j=q[0],T=q[1],U=(0,n.useState)(!1),H=U[0],I=U[1],G=(0,u.useFocusContext)(),Y=(0,n.useMemo)((function(){return b||(0,r.default)("sn:focusable-item-")}),[b]),W=(0,n.useCallback)((function(e){void 0===e&&(e={}),a.SpatialNavigation.setFocus(Y,e)}),[Y]);return(0,l.default)((function(){return a.SpatialNavigation.addFocusable({focusKey:Y,node:A.current,parentFocusKey:G,preferredChildFocusKey:C,onEnterPress:D,onEnterRelease:_,onArrowPress:R,onFocus:O,onBlur:S,onUpdateFocus:function(e){return void 0===e&&(e=!1),T(e)},onUpdateHasFocusedChild:function(e){return void 0===e&&(e=!1),I(e)},saveLastFocusedChild:d,trackChildren:f,isFocusBoundary:g,autoRestoreFocus:y,focusable:s}),function(){a.SpatialNavigation.removeFocusable({focusKey:Y})}})),(0,n.useEffect)((function(){a.SpatialNavigation.updateFocusable(Y,{node:A.current,preferredChildFocusKey:C,focusable:s,isFocusBoundary:g,onEnterPress:D,onEnterRelease:_,onArrowPress:R,onFocus:O,onBlur:S})}),[Y,C,s,g,D,_,R,O,S]),{ref:A,focusSelf:W,focused:j,hasFocusedChild:H,focusKey:Y,setFocus:a.SpatialNavigation.isNativeMode()?i.default:a.SpatialNavigation.setFocus,navigateByDirection:a.SpatialNavigation.navigateByDirection,pause:a.SpatialNavigation.pause,resume:a.SpatialNavigation.resume,updateAllLayouts:a.SpatialNavigation.updateAllLayouts,getCurrentFocusKey:a.SpatialNavigation.getCurrentFocusKey}}},893: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.useFocusContext=function(){return(0,s.useContext)(t.FocusContext)}},828:function(e,t,o){Object.defineProperty(t,"__esModule",{value:!0});var s=o(156);t.default=function(e){var t=(0,s.useRef)(e),o=(0,s.useRef)(),n=(0,s.useRef)(!1),i=(0,s.useRef)(!1),r=(0,s.useState)(0)[1];n.current&&(i.current=!0),(0,s.useLayoutEffect)((function(){return n.current||(o.current=t.current(),n.current=!0),r((function(e){return e+1})),function(){i.current&&o.current&&o.current()}}),[])}},117:function(t){t.exports=e},747:function(e){e.exports=t},23:function(e){e.exports=o},842:function(e){e.exports=s},682:function(e){e.exports=n},784:function(e){e.exports=i},604:function(e){e.exports=r},432:function(e){e.exports=a},67:function(e){e.exports=u},461:function(e){e.exports=l},156:function(e){e.exports=c}},h={};return function e(t){var o=h[t];if(void 0!==o)return o.exports;var s=h[t]={exports:{}};return d[t].call(s.exports,s,s.exports,e),s.exports}(607)}()}));