react-aria-menubutton - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

CHANGELOG.md

 # Changelog
 
+## 2.0.1
+
+- Allow for the case that selecting a menu item unmounts the menu (mostly by manager timers more intelligently).
+
 ## 2.0.0
@@ -4,0 +8,0 @@

dist-modules/Button.js

@@ -22,9 +22,16 @@ 'use strict';
 
-  function Button(props) {
+  function Button() {
     _classCallCheck(this, Button);
 
-    _React$Component.call(this, props);
-    props.manager.button = this;
+    _React$Component.apply(this, arguments);
   }
 
+  Button.prototype.componentWillMount = function componentWillMount() {
+    this.props.manager.button = this;
+  };
+
+  Button.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.props.manager.powerDown();
+  };
+
   Button.prototype.handleKeyDown = function handleKeyDown(event) {
@@ -31,0 +38,0 @@ var manager = this.props.manager;

dist-modules/Manager.js

@@ -46,2 +46,10 @@ 'use strict';
 
+  Manager.prototype.powerDown = function powerDown() {
+    this.button = null;
+    this.menu = null;
+    this.menuItems = [];
+    clearTimeout(this.blurTimer);
+    clearTimeout(this.moveFocusTimer);
+  };
+
   Manager.prototype.update = function update() {
@@ -63,3 +71,3 @@ this.menu.setState({ isOpen: this.isOpen });
     if (focusMenu) {
-      setTimeout(function () {
+      this.moveFocusTimer = setTimeout(function () {
         return _this.moveFocus(0);
@@ -143,3 +151,3 @@ }, 0);
 
-  setTimeout(function () {
+  this.blurTimer = setTimeout(function () {
     var activeEl = document.activeElement;
@@ -146,0 +154,0 @@ if (activeEl === _react2['default'].findDOMNode(_this2.button)) return;

dist-modules/Menu.js

@@ -22,19 +22,20 @@ 'use strict';
 
-  function Menu(props) {
+  function Menu() {
+    _classCallCheck(this, Menu);
+
+    _React$Component.apply(this, arguments);
+  }
+
+  Menu.prototype.componentWillMount = function componentWillMount() {
     var _this = this;
 
-    _classCallCheck(this, Menu);
+    this.props.manager.menu = this;
 
-    _React$Component.call(this, props);
-    props.manager.menu = this;
-
+    new _tapJs2['default'](document.body);
     this.isListeningForTap = false;
     this.tapHandler = function (e) {
       if (_react2['default'].findDOMNode(_this).contains(e.target)) return;
-      props.manager.closeMenu();
+      if (_react2['default'].findDOMNode(_this.props.manager.button).contains(e.target)) return;
+      _this.props.manager.closeMenu();
     };
-  }
-
-  Menu.prototype.componentWillMount = function componentWillMount() {
-    new _tapJs2['default'](document.body);
   };
@@ -58,2 +59,7 @@
 
+  Menu.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.removeTapListeners();
+    this.props.manager.powerDown();
+  };
+
   Menu.prototype.addTapListeners = function addTapListeners() {
@@ -60,0 +66,0 @@ document.body.addEventListener('tap', this.tapHandler, true);

dist/ariaMenuButton.js

@@ -142,9 +142,16 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ariaMenuButton = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
-  function Button(props) {
+  function Button() {
     _classCallCheck(this, Button);
 
-    _React$Component.call(this, props);
-    props.manager.button = this;
+    _React$Component.apply(this, arguments);
   }
 
+  Button.prototype.componentWillMount = function componentWillMount() {
+    this.props.manager.button = this;
+  };
+
+  Button.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.props.manager.powerDown();
+  };
+
   Button.prototype.handleKeyDown = function handleKeyDown(event) {
@@ -260,2 +267,10 @@ var manager = this.props.manager;
 
+  Manager.prototype.powerDown = function powerDown() {
+    this.button = null;
+    this.menu = null;
+    this.menuItems = [];
+    clearTimeout(this.blurTimer);
+    clearTimeout(this.moveFocusTimer);
+  };
+
   Manager.prototype.update = function update() {
@@ -277,3 +292,3 @@ this.menu.setState({ isOpen: this.isOpen });
     if (focusMenu) {
-      setTimeout(function () {
+      this.moveFocusTimer = setTimeout(function () {
         return _this.moveFocus(0);
@@ -357,3 +372,3 @@ }, 0);
 
-  setTimeout(function () {
+  this.blurTimer = setTimeout(function () {
     var activeEl = document.activeElement;
@@ -427,19 +442,20 @@ if (activeEl === _react2['default'].findDOMNode(_this2.button)) return;
 
-  function Menu(props) {
+  function Menu() {
+    _classCallCheck(this, Menu);
+
+    _React$Component.apply(this, arguments);
+  }
+
+  Menu.prototype.componentWillMount = function componentWillMount() {
     var _this = this;
 
-    _classCallCheck(this, Menu);
+    this.props.manager.menu = this;
 
-    _React$Component.call(this, props);
-    props.manager.menu = this;
-
+    new _tapJs2['default'](document.body);
     this.isListeningForTap = false;
     this.tapHandler = function (e) {
       if (_react2['default'].findDOMNode(_this).contains(e.target)) return;
-      props.manager.closeMenu();
+      if (_react2['default'].findDOMNode(_this.props.manager.button).contains(e.target)) return;
+      _this.props.manager.closeMenu();
     };
-  }
-
-  Menu.prototype.componentWillMount = function componentWillMount() {
-    new _tapJs2['default'](document.body);
   };
@@ -463,2 +479,7 @@
 
+  Menu.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.removeTapListeners();
+    this.props.manager.powerDown();
+  };
+
   Menu.prototype.addTapListeners = function addTapListeners() {
@@ -465,0 +486,0 @@ document.body.addEventListener('tap', this.tapHandler, true);

dist/ariaMenuButton.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.ariaMenuButton=e()}}(function(){var e;return function t(e,n,o){function r(i,u){if(!n[i]){if(!e[i]){var a="function"==typeof require&&require;if(!u&&a)return a(i,!0);if(s)return s(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(t){var n=e[i][1][t];return r(n?n:t)},p,p.exports,t,e,n,o)}return n[i].exports}for(var s="function"==typeof require&&require,i=0;i<o.length;i++)r(o[i]);return r}({1:[function(t,n,o){!function(t,r){"use strict";"function"==typeof e&&e.amd?e(function(){return t.Tap=r(t,t.document)}):"object"==typeof o?n.exports=r(t,t.document):t.Tap=r(t,t.document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(e){this.el="object"==typeof e?e:t.getElementById(e),this.moved=!1,this.startX=0,this.startY=0,this.hasTouchEventOccured=!1,this.el.addEventListener("touchstart",this,!1),this.el.addEventListener("mousedown",this,!1)}return n.prototype.start=function(e){"touchstart"===e.type?(this.hasTouchEventOccured=!0,this.el.addEventListener("touchmove",this,!1),this.el.addEventListener("touchend",this,!1),this.el.addEventListener("touchcancel",this,!1)):"mousedown"===e.type&&this.el.addEventListener("mouseup",this,!1),this.moved=!1,this.startX="touchstart"===e.type?e.touches[0].clientX:e.clientX,this.startY="touchstart"===e.type?e.touches[0].clientY:e.clientY},n.prototype.move=function(e){(Math.abs(e.touches[0].clientX-this.startX)>10||Math.abs(e.touches[0].clientY-this.startY)>10)&&(this.moved=!0)},n.prototype.end=function(n){var o;this.el.removeEventListener("touchmove",this,!1),this.el.removeEventListener("touchend",this,!1),this.el.removeEventListener("touchcancel",this,!1),this.el.removeEventListener("mouseup",this,!1),this.moved||(e.CustomEvent?o=new e.CustomEvent("tap",{bubbles:!0,cancelable:!0}):(o=t.createEvent("Event"),o.initEvent("tap",!0,!0)),n.stopPropagation(),n.target.dispatchEvent(o)||n.preventDefault())},n.prototype.cancel=function(){this.hasTouchEventOccured=!1,this.moved=!1,this.startX=0,this.startY=0},n.prototype.destroy=function(){this.el.removeEventListener("touchstart",this,!1),this.el.removeEventListener("touchmove",this,!1),this.el.removeEventListener("touchend",this,!1),this.el.removeEventListener("touchcancel",this,!1),this.el.removeEventListener("mousedown",this,!1),this.el.removeEventListener("mouseup",this,!1)},n.prototype.handleEvent=function(e){switch(e.type){case"touchstart":this.start(e);break;case"touchmove":this.move(e);break;case"touchend":this.end(e);break;case"touchcancel":this.cancel(e);break;case"mousedown":this.start(e);break;case"mouseup":this.end(e)}},n})},{}],2:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=e("react"),u=o(i),a=e(8),c=o(a),p=function(e){function t(n){r(this,t),e.call(this,n),n.manager.button=this}return s(t,e),t.prototype.handleKeyDown=function(e){var t=this.props.manager,n=e.key;return n===c["default"].DOWN?(e.preventDefault(),void(t.isOpen?t.moveFocusDown():t.openMenu({focusMenu:!0}))):n===c["default"].ENTER||n===c["default"].SPACE?(e.preventDefault(),void t.toggleMenu()):void t.handleMenuKey(e)},t.prototype.handleClick=function(){this.props.manager.toggleMenu()},t.prototype.render=function(){var e=this.props,t=e.manager,n=e.children,o=e.tag,r=e.className,s=e.id;return u["default"].createElement(o,{className:r,id:s,role:"button",tabIndex:"0","aria-haspopup":!0,"aria-expanded":t.isOpen,onKeyDown:this.handleKeyDown.bind(this),onClick:this.handleClick.bind(this),onBlur:t.handleBlur},n)},t}(u["default"].Component);n["default"]=p,p.propTypes={children:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]).isRequired,manager:i.PropTypes.object.isRequired,className:i.PropTypes.string,id:i.PropTypes.string,tag:i.PropTypes.string},p.defaultProps={tag:"span"},t.exports=n["default"]},{8:8,react:"react"}],3:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(){var e=this;setTimeout(function(){var t=document.activeElement;t!==c["default"].findDOMNode(e.button)&&(e.menuItems.some(function(e){return e.node===t})||e.isOpen&&e.closeMenu({focusButton:!1}))},0)}function i(e,t){this.options.closeOnSelection&&this.closeMenu(),this.options.onSelection(e,t)}function u(e){if(this.isOpen)switch(e.key){case l["default"].ESCAPE:e.preventDefault(),this.closeMenu();break;case l["default"].UP:e.preventDefault(),this.moveFocusUp();break;case l["default"].DOWN:e.preventDefault(),this.moveFocusDown();break;default:if(!h["default"](e.keyCode))return;if(e.ctrlKey||e.metaKey||e.altKey)return;e.preventDefault(),this.moveToLetter(String.fromCharCode(e.keyCode))}}n.__esModule=!0;var a=e("react"),c=o(a),p=e(8),l=o(p),f=e(7),h=o(f),d=function(){function e(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];r(this,e),this.options=t,"undefined"==typeof this.options.closeOnSelection&&(this.options.closeOnSelection=!0),this.handleBlur=s.bind(this),this.handleSelection=i.bind(this),this.handleMenuKey=u.bind(this),this.button=null,this.menu=null,this.menuItems=[],this.isOpen=!1,this.currentFocus=-1}return e.prototype.update=function(){this.menu.setState({isOpen:this.isOpen}),this.button.setState({menuOpen:this.isOpen})},e.prototype.openMenu=function(){var e=this,t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],n=t.focusMenu,o=void 0===n?!1:n;this.isOpen=!0,this.update(),o?setTimeout(function(){return e.moveFocus(0)},0):this.currentFocus=-1},e.prototype.closeMenu=function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=e.focusButton,n=void 0===t?!0:t;this.isOpen=!1,this.update(),n&&c["default"].findDOMNode(this.button).focus()},e.prototype.toggleMenu=function(){this.isOpen?this.closeMenu():this.openMenu()},e.prototype.moveFocus=function(e){this.menuItems[e].node.focus(),this.currentFocus=e},e.prototype.moveFocusUp=function(){var e=this.menuItems,t=this.currentFocus,n=-1===t||0===t?e.length-1:t-1;this.moveFocus(n)},e.prototype.moveFocusDown=function(){var e=this.menuItems,t=this.currentFocus,n=-1===t||t===e.length-1?0:t+1;this.moveFocus(n)},e.prototype.moveToLetter=function(e){for(var t=this.menuItems,n=this.currentFocus,o=t.slice(n+1).concat(t.slice(0,n+1)),r=0,s=o.length;s>r;r++){var i=o[r];if(!i.text&&!i.content.charAt)throw new Error("ariaMenuButton MenuItems must have a textual child or a `text` prop");if(i.text){if(i.text.charAt(0).toLowerCase()!==e.toLowerCase())continue}else if(i.content.charAt(0).toLowerCase()!==e.toLowerCase())continue;return void this.moveFocus(t.indexOf(i))}},e}();n["default"]=d,t.exports=n["default"]},{7:7,8:8,react:"react"}],4:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=e("react"),u=o(i),a=e(1),c=o(a),p=function(e){function t(n){var o=this;r(this,t),e.call(this,n),n.manager.menu=this,this.isListeningForTap=!1,this.tapHandler=function(e){u["default"].findDOMNode(o).contains(e.target)||n.manager.closeMenu()}}return s(t,e),t.prototype.componentWillMount=function(){new c["default"](document.body)},t.prototype.componentWillUpdate=function(){var e=this.props.manager;e.isOpen&&!this.isListeningForTap?this.addTapListeners():!e.isOpen&&this.isListeningForTap&&this.removeTapListeners(),e.isOpen||(e.menuItems=[])},t.prototype.addTapListeners=function(){document.body.addEventListener("tap",this.tapHandler,!0),this.isListeningForTap=!0},t.prototype.removeTapListeners=function(){document.body.removeEventListener("tap",this.tapHandler,!0),this.isListeningForTap=!1},t.prototype.render=function(){var e=this.props,t=e.manager,n=e.children,o=e.tag,r=e.className,s=e.id,i=function(){return"function"==typeof n?n({isOpen:t.isOpen}):t.isOpen?n:!1}();return i?u["default"].createElement(o,{className:r,id:s,onKeyDown:t.handleMenuKey,role:"menu",onBlur:t.handleBlur},i):!1},t}(u["default"].Component);n["default"]=p,p.propTypes={children:i.PropTypes.oneOfType([i.PropTypes.func,i.PropTypes.element]).isRequired,manager:i.PropTypes.object.isRequired,id:i.PropTypes.string,className:i.PropTypes.string,tag:i.PropTypes.string},p.defaultProps={tag:"div"},t.exports=n["default"]},{1:1,react:"react"}],5:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=e("react"),u=o(i),a=e(8),c=o(a),p=function(e){function t(){r(this,t),e.apply(this,arguments)}return s(t,e),t.prototype.componentDidMount=function(){var e=this.props;this.managedIndex=e.manager.menuItems.push({node:u["default"].findDOMNode(this),content:e.children,text:e.text})-1},t.prototype.handleKeyDown=function(e){(e.key===c["default"].ENTER||e.key===c["default"].SPACE)&&(e.preventDefault(),this.selectItem(e))},t.prototype.selectItem=function(e){var t=this.props,n="undefined"!=typeof t.value?t.value:t.children;t.manager.handleSelection(n,e),t.manager.currentFocus=this.managedIndex},t.prototype.render=function(){var e=this.props,t=e.tag,n=e.children,o=e.className,r=e.id;return u["default"].createElement(t,{className:o,id:r,onClick:this.selectItem.bind(this),onKeyDown:this.handleKeyDown.bind(this),role:"menuitem",tabIndex:"-1"},n)},t}(u["default"].Component);n["default"]=p,p.propTypes={children:i.PropTypes.oneOfType([i.PropTypes.element,i.PropTypes.string,i.PropTypes.arrayOf(i.PropTypes.element)]).isRequired,manager:i.PropTypes.object.isRequired,className:i.PropTypes.string,id:i.PropTypes.string,tag:i.PropTypes.string,text:i.PropTypes.string,value:i.PropTypes.oneOfType([i.PropTypes.bool,i.PropTypes.number,i.PropTypes.string,i.PropTypes.object])},p.defaultProps={tag:"div"},t.exports=n["default"]},{8:8,react:"react"}],6:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},u=e("react"),a=o(u),c=e(3),p=o(c),l=e(2),f=o(l),h=e(4),d=o(h),m=e(5),y=o(m);n["default"]=function(e){var t=new p["default"](e);return{Button:function(e){function n(){r(this,n),e.apply(this,arguments)}return s(n,e),n.prototype.render=function(){return a["default"].createElement(f["default"],i({manager:t},this.props))},n}(a["default"].Component),Menu:function(e){function n(){r(this,n),e.apply(this,arguments)}return s(n,e),n.prototype.render=function(){return a["default"].createElement(d["default"],i({manager:t},this.props))},n}(a["default"].Component),MenuItem:function(e){function n(){r(this,n),e.apply(this,arguments)}return s(n,e),n.prototype.render=function(){return a["default"].createElement(y["default"],i({manager:t},this.props))},n}(a["default"].Component)}},t.exports=n["default"]},{2:2,3:3,4:4,5:5,react:"react"}],7:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]=function(e){return e>=65&&91>=e},t.exports=n["default"]},{}],8:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",UP:"ArrowUp",DOWN:"ArrowDown"},t.exports=n["default"]},{}]},{},[6])(6)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.ariaMenuButton=e()}}(function(){var e;return function t(e,n,o){function r(i,u){if(!n[i]){if(!e[i]){var a="function"==typeof require&&require;if(!u&&a)return a(i,!0);if(s)return s(i,!0);var p=new Error("Cannot find module '"+i+"'");throw p.code="MODULE_NOT_FOUND",p}var c=n[i]={exports:{}};e[i][0].call(c.exports,function(t){var n=e[i][1][t];return r(n?n:t)},c,c.exports,t,e,n,o)}return n[i].exports}for(var s="function"==typeof require&&require,i=0;i<o.length;i++)r(o[i]);return r}({1:[function(t,n,o){!function(t,r){"use strict";"function"==typeof e&&e.amd?e(function(){return t.Tap=r(t,t.document)}):"object"==typeof o?n.exports=r(t,t.document):t.Tap=r(t,t.document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(e){this.el="object"==typeof e?e:t.getElementById(e),this.moved=!1,this.startX=0,this.startY=0,this.hasTouchEventOccured=!1,this.el.addEventListener("touchstart",this,!1),this.el.addEventListener("mousedown",this,!1)}return n.prototype.start=function(e){"touchstart"===e.type?(this.hasTouchEventOccured=!0,this.el.addEventListener("touchmove",this,!1),this.el.addEventListener("touchend",this,!1),this.el.addEventListener("touchcancel",this,!1)):"mousedown"===e.type&&this.el.addEventListener("mouseup",this,!1),this.moved=!1,this.startX="touchstart"===e.type?e.touches[0].clientX:e.clientX,this.startY="touchstart"===e.type?e.touches[0].clientY:e.clientY},n.prototype.move=function(e){(Math.abs(e.touches[0].clientX-this.startX)>10||Math.abs(e.touches[0].clientY-this.startY)>10)&&(this.moved=!0)},n.prototype.end=function(n){var o;this.el.removeEventListener("touchmove",this,!1),this.el.removeEventListener("touchend",this,!1),this.el.removeEventListener("touchcancel",this,!1),this.el.removeEventListener("mouseup",this,!1),this.moved||(e.CustomEvent?o=new e.CustomEvent("tap",{bubbles:!0,cancelable:!0}):(o=t.createEvent("Event"),o.initEvent("tap",!0,!0)),n.stopPropagation(),n.target.dispatchEvent(o)||n.preventDefault())},n.prototype.cancel=function(){this.hasTouchEventOccured=!1,this.moved=!1,this.startX=0,this.startY=0},n.prototype.destroy=function(){this.el.removeEventListener("touchstart",this,!1),this.el.removeEventListener("touchmove",this,!1),this.el.removeEventListener("touchend",this,!1),this.el.removeEventListener("touchcancel",this,!1),this.el.removeEventListener("mousedown",this,!1),this.el.removeEventListener("mouseup",this,!1)},n.prototype.handleEvent=function(e){switch(e.type){case"touchstart":this.start(e);break;case"touchmove":this.move(e);break;case"touchend":this.end(e);break;case"touchcancel":this.cancel(e);break;case"mousedown":this.start(e);break;case"mouseup":this.end(e)}},n})},{}],2:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=e("react"),u=o(i),a=e(8),p=o(a),c=function(e){function t(){r(this,t),e.apply(this,arguments)}return s(t,e),t.prototype.componentWillMount=function(){this.props.manager.button=this},t.prototype.componentWillUnmount=function(){this.props.manager.powerDown()},t.prototype.handleKeyDown=function(e){var t=this.props.manager,n=e.key;return n===p["default"].DOWN?(e.preventDefault(),void(t.isOpen?t.moveFocusDown():t.openMenu({focusMenu:!0}))):n===p["default"].ENTER||n===p["default"].SPACE?(e.preventDefault(),void t.toggleMenu()):void t.handleMenuKey(e)},t.prototype.handleClick=function(){this.props.manager.toggleMenu()},t.prototype.render=function(){var e=this.props,t=e.manager,n=e.children,o=e.tag,r=e.className,s=e.id;return u["default"].createElement(o,{className:r,id:s,role:"button",tabIndex:"0","aria-haspopup":!0,"aria-expanded":t.isOpen,onKeyDown:this.handleKeyDown.bind(this),onClick:this.handleClick.bind(this),onBlur:t.handleBlur},n)},t}(u["default"].Component);n["default"]=c,c.propTypes={children:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]).isRequired,manager:i.PropTypes.object.isRequired,className:i.PropTypes.string,id:i.PropTypes.string,tag:i.PropTypes.string},c.defaultProps={tag:"span"},t.exports=n["default"]},{8:8,react:"react"}],3:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(){var e=this;this.blurTimer=setTimeout(function(){var t=document.activeElement;t!==p["default"].findDOMNode(e.button)&&(e.menuItems.some(function(e){return e.node===t})||e.isOpen&&e.closeMenu({focusButton:!1}))},0)}function i(e,t){this.options.closeOnSelection&&this.closeMenu(),this.options.onSelection(e,t)}function u(e){if(this.isOpen)switch(e.key){case l["default"].ESCAPE:e.preventDefault(),this.closeMenu();break;case l["default"].UP:e.preventDefault(),this.moveFocusUp();break;case l["default"].DOWN:e.preventDefault(),this.moveFocusDown();break;default:if(!h["default"](e.keyCode))return;if(e.ctrlKey||e.metaKey||e.altKey)return;e.preventDefault(),this.moveToLetter(String.fromCharCode(e.keyCode))}}n.__esModule=!0;var a=e("react"),p=o(a),c=e(8),l=o(c),f=e(7),h=o(f),d=function(){function e(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];r(this,e),this.options=t,"undefined"==typeof this.options.closeOnSelection&&(this.options.closeOnSelection=!0),this.handleBlur=s.bind(this),this.handleSelection=i.bind(this),this.handleMenuKey=u.bind(this),this.button=null,this.menu=null,this.menuItems=[],this.isOpen=!1,this.currentFocus=-1}return e.prototype.powerDown=function(){this.button=null,this.menu=null,this.menuItems=[],clearTimeout(this.blurTimer),clearTimeout(this.moveFocusTimer)},e.prototype.update=function(){this.menu.setState({isOpen:this.isOpen}),this.button.setState({menuOpen:this.isOpen})},e.prototype.openMenu=function(){var e=this,t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],n=t.focusMenu,o=void 0===n?!1:n;this.isOpen=!0,this.update(),o?this.moveFocusTimer=setTimeout(function(){return e.moveFocus(0)},0):this.currentFocus=-1},e.prototype.closeMenu=function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=e.focusButton,n=void 0===t?!0:t;this.isOpen=!1,this.update(),n&&p["default"].findDOMNode(this.button).focus()},e.prototype.toggleMenu=function(){this.isOpen?this.closeMenu():this.openMenu()},e.prototype.moveFocus=function(e){this.menuItems[e].node.focus(),this.currentFocus=e},e.prototype.moveFocusUp=function(){var e=this.menuItems,t=this.currentFocus,n=-1===t||0===t?e.length-1:t-1;this.moveFocus(n)},e.prototype.moveFocusDown=function(){var e=this.menuItems,t=this.currentFocus,n=-1===t||t===e.length-1?0:t+1;this.moveFocus(n)},e.prototype.moveToLetter=function(e){for(var t=this.menuItems,n=this.currentFocus,o=t.slice(n+1).concat(t.slice(0,n+1)),r=0,s=o.length;s>r;r++){var i=o[r];if(!i.text&&!i.content.charAt)throw new Error("ariaMenuButton MenuItems must have a textual child or a `text` prop");if(i.text){if(i.text.charAt(0).toLowerCase()!==e.toLowerCase())continue}else if(i.content.charAt(0).toLowerCase()!==e.toLowerCase())continue;return void this.moveFocus(t.indexOf(i))}},e}();n["default"]=d,t.exports=n["default"]},{7:7,8:8,react:"react"}],4:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=e("react"),u=o(i),a=e(1),p=o(a),c=function(e){function t(){r(this,t),e.apply(this,arguments)}return s(t,e),t.prototype.componentWillMount=function(){var e=this;this.props.manager.menu=this,new p["default"](document.body),this.isListeningForTap=!1,this.tapHandler=function(t){u["default"].findDOMNode(e).contains(t.target)||u["default"].findDOMNode(e.props.manager.button).contains(t.target)||e.props.manager.closeMenu()}},t.prototype.componentWillUpdate=function(){var e=this.props.manager;e.isOpen&&!this.isListeningForTap?this.addTapListeners():!e.isOpen&&this.isListeningForTap&&this.removeTapListeners(),e.isOpen||(e.menuItems=[])},t.prototype.componentWillUnmount=function(){this.removeTapListeners(),this.props.manager.powerDown()},t.prototype.addTapListeners=function(){document.body.addEventListener("tap",this.tapHandler,!0),this.isListeningForTap=!0},t.prototype.removeTapListeners=function(){document.body.removeEventListener("tap",this.tapHandler,!0),this.isListeningForTap=!1},t.prototype.render=function(){var e=this.props,t=e.manager,n=e.children,o=e.tag,r=e.className,s=e.id,i=function(){return"function"==typeof n?n({isOpen:t.isOpen}):t.isOpen?n:!1}();return i?u["default"].createElement(o,{className:r,id:s,onKeyDown:t.handleMenuKey,role:"menu",onBlur:t.handleBlur},i):!1},t}(u["default"].Component);n["default"]=c,c.propTypes={children:i.PropTypes.oneOfType([i.PropTypes.func,i.PropTypes.element]).isRequired,manager:i.PropTypes.object.isRequired,id:i.PropTypes.string,className:i.PropTypes.string,tag:i.PropTypes.string},c.defaultProps={tag:"div"},t.exports=n["default"]},{1:1,react:"react"}],5:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=e("react"),u=o(i),a=e(8),p=o(a),c=function(e){function t(){r(this,t),e.apply(this,arguments)}return s(t,e),t.prototype.componentDidMount=function(){var e=this.props;this.managedIndex=e.manager.menuItems.push({node:u["default"].findDOMNode(this),content:e.children,text:e.text})-1},t.prototype.handleKeyDown=function(e){(e.key===p["default"].ENTER||e.key===p["default"].SPACE)&&(e.preventDefault(),this.selectItem(e))},t.prototype.selectItem=function(e){var t=this.props,n="undefined"!=typeof t.value?t.value:t.children;t.manager.handleSelection(n,e),t.manager.currentFocus=this.managedIndex},t.prototype.render=function(){var e=this.props,t=e.tag,n=e.children,o=e.className,r=e.id;return u["default"].createElement(t,{className:o,id:r,onClick:this.selectItem.bind(this),onKeyDown:this.handleKeyDown.bind(this),role:"menuitem",tabIndex:"-1"},n)},t}(u["default"].Component);n["default"]=c,c.propTypes={children:i.PropTypes.oneOfType([i.PropTypes.element,i.PropTypes.string,i.PropTypes.arrayOf(i.PropTypes.element)]).isRequired,manager:i.PropTypes.object.isRequired,className:i.PropTypes.string,id:i.PropTypes.string,tag:i.PropTypes.string,text:i.PropTypes.string,value:i.PropTypes.oneOfType([i.PropTypes.bool,i.PropTypes.number,i.PropTypes.string,i.PropTypes.object])},c.defaultProps={tag:"div"},t.exports=n["default"]},{8:8,react:"react"}],6:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}n.__esModule=!0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},u=e("react"),a=o(u),p=e(3),c=o(p),l=e(2),f=o(l),h=e(4),d=o(h),m=e(5),y=o(m);n["default"]=function(e){var t=new c["default"](e);return{Button:function(e){function n(){r(this,n),e.apply(this,arguments)}return s(n,e),n.prototype.render=function(){return a["default"].createElement(f["default"],i({manager:t},this.props))},n}(a["default"].Component),Menu:function(e){function n(){r(this,n),e.apply(this,arguments)}return s(n,e),n.prototype.render=function(){return a["default"].createElement(d["default"],i({manager:t},this.props))},n}(a["default"].Component),MenuItem:function(e){function n(){r(this,n),e.apply(this,arguments)}return s(n,e),n.prototype.render=function(){return a["default"].createElement(y["default"],i({manager:t},this.props))},n}(a["default"].Component)}},t.exports=n["default"]},{2:2,3:3,4:4,5:5,react:"react"}],7:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]=function(e){return e>=65&&91>=e},t.exports=n["default"]},{}],8:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",UP:"ArrowUp",DOWN:"ArrowDown"},t.exports=n["default"]},{}]},{},[6])(6)});

package.json

 {
   "name": "react-aria-menubutton",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A fully accessible and flexible React-powered menu button",
@@ -10,3 +10,3 @@ "main": "index.js",
     "demo-bundle": "browserify demo/js/demo.js -t babelify --extension=.jsx -o demo/demo-bundle.js",
-    "demo-watch": "watchify demo/js/demo.js -t babelify --extension=.jsx -o demo/demo-bundle.js -v",
+    "demo-watch": "watchify demo/js/demo.js -t babelify -d --extension=.jsx -o demo/demo-bundle.js -v",
     "demo-bs": "browser-sync start --server demo --files=\"demo/**/*.css,demo/index.html,demo/demo-bundle.js\"",
@@ -13,0 +13,0 @@ "demo-dev": "parallelshell \"npm run demo-watch\" \"npm run demo-bs\"",

src/Button.js

@@ -5,7 +5,10 @@ import React, { PropTypes } from 'react';
 export default class Button extends React.Component {
-  constructor(props) {
-    super(props);
-    props.manager.button = this;
+  componentWillMount() {
+    this.props.manager.button = this;
   }
 
+  componentWillUnmount() {
+    this.props.manager.powerDown();
+  }
+
   handleKeyDown(event) {
@@ -12,0 +15,0 @@ const { manager } = this.props;

src/Manager.js

@@ -26,2 +26,10 @@ import React from 'react';
 
+  powerDown() {
+    this.button = null;
+    this.menu = null;
+    this.menuItems = [];
+    clearTimeout(this.blurTimer)
+    clearTimeout(this.moveFocusTimer)
+  }
+
   update() {
@@ -36,3 +44,3 @@ this.menu.setState({ isOpen: this.isOpen });
     if (focusMenu) {
-      setTimeout(() => this.moveFocus(0), 0);
+      this.moveFocusTimer = setTimeout(() => this.moveFocus(0), 0);
     } else {
@@ -104,3 +112,3 @@ this.currentFocus = -1;
 function handleBlur() {
-  setTimeout(() => {
+  this.blurTimer = setTimeout(() => {
     const activeEl = document.activeElement;
@@ -107,0 +115,0 @@ if (activeEl === React.findDOMNode(this.button)) return;

src/Menu.js

@@ -5,17 +5,14 @@ import React, { PropTypes } from 'react';
 export default class Menu extends React.Component {
-  constructor(props) {
-    super(props);
-    props.manager.menu = this;
+  componentWillMount() {
+    this.props.manager.menu = this;
 
+    new Tap(document.body);
     this.isListeningForTap = false;
     this.tapHandler = (e) => {
       if (React.findDOMNode(this).contains(e.target)) return;
-      props.manager.closeMenu();
+      if (React.findDOMNode(this.props.manager.button).contains(e.target)) return;
+      this.props.manager.closeMenu();
     }
   }
 
-  componentWillMount() {
-    new Tap(document.body);
-  }
-
   componentWillUpdate() {
@@ -36,2 +33,7 @@ const { manager } = this.props;
 
+  componentWillUnmount() {
+    this.removeTapListeners();
+    this.props.manager.powerDown();
+  }
+
   addTapListeners() {
@@ -38,0 +40,0 @@ document.body.addEventListener('tap', this.tapHandler, true);

No alert changes

Improved metrics

Total package byte prevSize

84534

increased by2.98%

Lines of code

1386

increased by3.36%

No dependency changes