react-aria-menubutton - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

 # Changelog
 
+## 0.8.0
+- Overlay to enable close-when-clicking-outside for mobile.
+
 ## 0.7.0
@@ -4,0 +7,0 @@ - New, more flexible API: provided components are just wrappers around whatever elements they're given.

dist-modules/ariaMenuButton.js

@@ -11,3 +11,3 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -14,0 +14,0 @@ var _react = require('react');

dist-modules/Button.js

@@ -9,3 +9,3 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -12,0 +12,0 @@ var _react = require('react');

dist-modules/Menu.js

@@ -9,3 +9,3 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -43,2 +43,3 @@ var _react = require('react');
     var id = _props.id;
+    var noOverlay = _props.noOverlay;
 
@@ -53,3 +54,3 @@ var childrenToRender = (function () {
 
-    return _react2['default'].createElement(tag, {
+    var menuEl = _react2['default'].createElement(tag, {
       className: className,
@@ -59,4 +60,23 @@ id: id,
       role: 'menu',
-      onBlur: manager.handleBlur
+      onBlur: manager.handleBlur,
+      style: noOverlay ? undefined : { position: 'relative', zIndex: 100 }
     }, childrenToRender);
+
+    if (noOverlay) return menuEl;
+
+    var overlay = !manager.isOpen ? false : _react2['default'].createElement('div', {
+      style: {
+        cursor: 'pointer',
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+        zIndex: 99
+      },
+      onClick: manager.closeMenu
+    });
+
+    return _react2['default'].createElement('div', {}, menuEl, overlay);
   };
@@ -74,2 +94,3 @@
   className: _react.PropTypes.string,
+  noOverlay: _react.PropTypes.bool,
   tag: _react.PropTypes.string
@@ -76,0 +97,0 @@ };

dist-modules/MenuItem.js

@@ -9,3 +9,3 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -12,0 +12,0 @@ var _react = require('react');

dist/ariaMenuButton.js

@@ -321,2 +321,3 @@ (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){
     var id = _props.id;
+    var noOverlay = _props.noOverlay;
 
@@ -331,3 +332,3 @@ var childrenToRender = (function () {
 
-    return _react2['default'].createElement(tag, {
+    var menuEl = _react2['default'].createElement(tag, {
       className: className,
@@ -337,4 +338,23 @@ id: id,
       role: 'menu',
-      onBlur: manager.handleBlur
+      onBlur: manager.handleBlur,
+      style: noOverlay ? undefined : { position: 'relative', zIndex: 100 }
     }, childrenToRender);
+
+    if (noOverlay) return menuEl;
+
+    var overlay = !manager.isOpen ? false : _react2['default'].createElement('div', {
+      style: {
+        cursor: 'pointer',
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+        zIndex: 99
+      },
+      onClick: manager.closeMenu
+    });
+
+    return _react2['default'].createElement('div', {}, menuEl, overlay);
   };
@@ -352,2 +372,3 @@
   className: _react.PropTypes.string,
+  noOverlay: _react.PropTypes.bool,
   tag: _react.PropTypes.string
@@ -354,0 +375,0 @@ };

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(){return function e(t,n,o){function r(i,s){if(!n[i]){if(!t[i]){var a="function"==typeof require&&require;if(!s&&a)return a(i,!0);if(u)return u(i,!0);var p=new Error("Cannot find module '"+i+"'");throw p.code="MODULE_NOT_FOUND",p}var c=n[i]={exports:{}};t[i][0].call(c.exports,function(e){var n=t[i][1][e];return r(n?n:e)},c,c.exports,e,t,n,o)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<o.length;i++)r(o[i]);return r}({1:[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 u(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&&(e.__proto__=t)}n.__esModule=!0;var i=e("react"),s=o(i),a=e(7),p=o(a),c=function(e){function t(n){r(this,t),e.call(this,n),n.manager.button=this}return u(t,e),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,u=e.id;return s["default"].createElement(o,{className:r,id:u,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}(s["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"]},{7:7,react:"react"}],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 u(){var e=this;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 s(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(!d["default"](e.keyCode))return;e.preventDefault(),this.moveToLetter(String.fromCharCode(e.keyCode))}}n.__esModule=!0;var a=e("react"),p=o(a),c=e(7),l=o(c),f=e(6),d=o(f),h=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=u.bind(this),this.handleSelection=i.bind(this),this.handleMenuKey=s.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&&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,u=o.length;u>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"]=h,t.exports=n["default"]},{6:6,7:7,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 u(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&&(e.__proto__=t)}n.__esModule=!0;var i=e("react"),s=o(i),a=function(e){function t(n){r(this,t),e.call(this,n),n.manager.menu=this}return u(t,e),t.prototype.componentWillUpdate=function(){var e=this.props.manager;e.isOpen||(e.menuItems=[])},t.prototype.render=function(){var e=this.props,t=e.manager,n=e.children,o=e.tag,r=e.className,u=e.id,i=function(){return"function"==typeof n?n({isOpen:t.isOpen}):t.isOpen?n:[]}();return s["default"].createElement(o,{className:r,id:u,onKeyDown:t.handleMenuKey,role:"menu",onBlur:t.handleBlur},i)},t}(s["default"].Component);n["default"]=a,a.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},a.defaultProps={tag:"div"},t.exports=n["default"]},{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 u(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&&(e.__proto__=t)}n.__esModule=!0;var i=e("react"),s=o(i),a=e(7),p=o(a),c=function(e){function t(){r(this,t),e.apply(this,arguments)}return u(t,e),t.prototype.componentDidMount=function(){var e=this.props;this.managedIndex=e.manager.menuItems.push({node:s["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 s["default"].createElement(t,{className:o,id:r,onClick:this.selectItem.bind(this),onKeyDown:this.handleKeyDown.bind(this),role:"menuitem",tabIndex:"-1"},n)},t}(s["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])},c.defaultProps={tag:"div"},t.exports=n["default"]},{7:7,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 u(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&&(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},s=e("react"),a=o(s),p=e(2),c=o(p),l=e(1),f=o(l),d=e(3),h=o(d),m=e(4),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 u(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 u(n,e),n.prototype.render=function(){return a["default"].createElement(h["default"],i({manager:t},this.props))},n}(a["default"].Component),MenuItem:function(e){function n(){r(this,n),e.apply(this,arguments)}return u(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"]},{1:1,2:2,3:3,4:4,react:"react"}],6:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]=function(e){return e>=65&&91>=e},t.exports=n["default"]},{}],7:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",UP:"ArrowUp",DOWN:"ArrowDown"},t.exports=n["default"]},{}]},{},[5])(5)});
+!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(){return function e(t,n,o){function r(u,s){if(!n[u]){if(!t[u]){var a="function"==typeof require&&require;if(!s&&a)return a(u,!0);if(i)return i(u,!0);var p=new Error("Cannot find module '"+u+"'");throw p.code="MODULE_NOT_FOUND",p}var c=n[u]={exports:{}};t[u][0].call(c.exports,function(e){var n=t[u][1][e];return r(n?n:e)},c,c.exports,e,t,n,o)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<o.length;u++)r(o[u]);return r}({1:[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 i(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&&(e.__proto__=t)}n.__esModule=!0;var u=e("react"),s=o(u),a=e(7),p=o(a),c=function(e){function t(n){r(this,t),e.call(this,n),n.manager.button=this}return i(t,e),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,i=e.id;return s["default"].createElement(o,{className:r,id:i,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}(s["default"].Component);n["default"]=c,c.propTypes={children:u.PropTypes.oneOfType([u.PropTypes.string,u.PropTypes.element]).isRequired,manager:u.PropTypes.object.isRequired,className:u.PropTypes.string,id:u.PropTypes.string,tag:u.PropTypes.string},c.defaultProps={tag:"span"},t.exports=n["default"]},{7:7,react:"react"}],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 i(){var e=this;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 u(e,t){this.options.closeOnSelection&&this.closeMenu(),this.options.onSelection(e,t)}function s(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(!d["default"](e.keyCode))return;e.preventDefault(),this.moveToLetter(String.fromCharCode(e.keyCode))}}n.__esModule=!0;var a=e("react"),p=o(a),c=e(7),l=o(c),f=e(6),d=o(f),h=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=i.bind(this),this.handleSelection=u.bind(this),this.handleMenuKey=s.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&&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,i=o.length;i>r;r++){var u=o[r];if(!u.text&&!u.content.charAt)throw new Error("ariaMenuButton MenuItems must have a textual child or a `text` prop");if(u.text){if(u.text.charAt(0).toLowerCase()!==e.toLowerCase())continue}else if(u.content.charAt(0).toLowerCase()!==e.toLowerCase())continue;return void this.moveFocus(t.indexOf(u))}},e}();n["default"]=h,t.exports=n["default"]},{6:6,7:7,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 i(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&&(e.__proto__=t)}n.__esModule=!0;var u=e("react"),s=o(u),a=function(e){function t(n){r(this,t),e.call(this,n),n.manager.menu=this}return i(t,e),t.prototype.componentWillUpdate=function(){var e=this.props.manager;e.isOpen||(e.menuItems=[])},t.prototype.render=function(){var e=this.props,t=e.manager,n=e.children,o=e.tag,r=e.className,i=e.id,u=e.noOverlay,a=function(){return"function"==typeof n?n({isOpen:t.isOpen}):t.isOpen?n:[]}(),p=s["default"].createElement(o,{className:r,id:i,onKeyDown:t.handleMenuKey,role:"menu",onBlur:t.handleBlur,style:u?void 0:{position:"relative",zIndex:100}},a);if(u)return p;var c=t.isOpen?s["default"].createElement("div",{style:{cursor:"pointer",position:"fixed",top:0,bottom:0,left:0,right:0,WebkitTapHighlightColor:"rgba(0,0,0,0)",zIndex:99},onClick:t.closeMenu}):!1;return s["default"].createElement("div",{},p,c)},t}(s["default"].Component);n["default"]=a,a.propTypes={children:u.PropTypes.oneOfType([u.PropTypes.func,u.PropTypes.element]).isRequired,manager:u.PropTypes.object.isRequired,id:u.PropTypes.string,className:u.PropTypes.string,noOverlay:u.PropTypes.bool,tag:u.PropTypes.string},a.defaultProps={tag:"div"},t.exports=n["default"]},{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 i(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&&(e.__proto__=t)}n.__esModule=!0;var u=e("react"),s=o(u),a=e(7),p=o(a),c=function(e){function t(){r(this,t),e.apply(this,arguments)}return i(t,e),t.prototype.componentDidMount=function(){var e=this.props;this.managedIndex=e.manager.menuItems.push({node:s["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 s["default"].createElement(t,{className:o,id:r,onClick:this.selectItem.bind(this),onKeyDown:this.handleKeyDown.bind(this),role:"menuitem",tabIndex:"-1"},n)},t}(s["default"].Component);n["default"]=c,c.propTypes={children:u.PropTypes.oneOfType([u.PropTypes.element,u.PropTypes.string,u.PropTypes.arrayOf(u.PropTypes.element)]).isRequired,manager:u.PropTypes.object.isRequired,className:u.PropTypes.string,id:u.PropTypes.string,tag:u.PropTypes.string,text:u.PropTypes.string,value:u.PropTypes.oneOfType([u.PropTypes.bool,u.PropTypes.number,u.PropTypes.string])},c.defaultProps={tag:"div"},t.exports=n["default"]},{7:7,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 i(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&&(e.__proto__=t)}n.__esModule=!0;var u=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},s=e("react"),a=o(s),p=e(2),c=o(p),l=e(1),f=o(l),d=e(3),h=o(d),m=e(4),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 i(n,e),n.prototype.render=function(){return a["default"].createElement(f["default"],u({manager:t},this.props))},n}(a["default"].Component),Menu:function(e){function n(){r(this,n),e.apply(this,arguments)}return i(n,e),n.prototype.render=function(){return a["default"].createElement(h["default"],u({manager:t},this.props))},n}(a["default"].Component),MenuItem:function(e){function n(){r(this,n),e.apply(this,arguments)}return i(n,e),n.prototype.render=function(){return a["default"].createElement(y["default"],u({manager:t},this.props))},n}(a["default"].Component)}},t.exports=n["default"]},{1:1,2:2,3:3,4:4,react:"react"}],6:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]=function(e){return e>=65&&91>=e},t.exports=n["default"]},{}],7:[function(e,t,n){"use strict";n.__esModule=!0,n["default"]={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",UP:"ArrowUp",DOWN:"ArrowDown"},t.exports=n["default"]},{}]},{},[5])(5)});

package.json

 {
   "name": "react-aria-menubutton",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A fully accessible, easily themeable, React-powered menu button",
@@ -53,17 +53,17 @@ "main": "index.js",
   "devDependencies": {
-    "babel": "5.6.23",
+    "babel": "5.8.21",
     "babelify": "6.1.3",
-    "browser-sync": "2.7.13",
-    "browserify": "11.0.0",
-    "bundle-collapser": "1.2.0",
-    "es5-shim": "4.1.9",
-    "eslint": "0.24.1",
-    "eslint-plugin-react": "2.7.1",
-    "karma": "0.13.2",
-    "karma-phantomjs-launcher": "0.2.0",
+    "browser-sync": "2.8.2",
+    "browserify": "11.0.1",
+    "bundle-collapser": "1.2.1",
+    "es5-shim": "4.1.10",
+    "eslint": "1.0.0",
+    "eslint-plugin-react": "3.2.0",
+    "karma": "0.13.8",
+    "karma-phantomjs-launcher": "0.2.1",
     "karma-tap": "1.0.3",
-    "parallelshell": "1.2.0",
+    "parallelshell": "2.0.0",
     "sinon": "1.15.4",
-    "tape": "4.0.0",
-    "trash": "1.4.1",
+    "tape": "4.0.2",
+    "trash": "2.0.0",
     "uglify-js": "2.4.23",
@@ -70,0 +70,0 @@ "watchify": "3.3.0"

README.md

@@ -11,6 +11,8 @@ # react-aria-menubutton [![Build Status](https://travis-ci.org/davidtheclark/react-aria-menubutton.svg?branch=master)](https://travis-ci.org/davidtheclark/react-aria-menubutton)
 
-Please check out [the demo](http://davidtheclark.github.io/react-aria-menubutton/).
+Please check out [the demo](http://davidtheclark.github.io/react-aria-menubutton/demo/).
 
 ## Project Goal
 
+If you're interested in this project, you should also check out [react-aria-tabpanel](https://github.com/davidtheclark/react-aria-tabpanel).
+
 ### Accessibility
@@ -23,3 +25,3 @@
 
-Follow [the link](http://www.w3.org/TR/wai-aria-practices/#menubutton) and read about the keyboard interactions and ARIA attributes. [The demo](http://davidtheclark.github.io/react-aria-menubutton/) also lists all of the interactions that are built in.
+Follow [the link](http://www.w3.org/TR/wai-aria-practices/#menubutton) and read about the keyboard interactions and ARIA attributes. [The demo](http://davidtheclark.github.io/react-aria-menubutton/demo/) also lists all of the interactions that are built in.
 
@@ -34,3 +36,3 @@ *If you think that this component does not satisfy the spec or if you know of other ways to make it even more accessible, please file an issue.*
 
-The current API is more flexible: it **does not provide any classes**, only **provides smart components to wrap *your* components**. These components provide the keyboard interaction and ARIA attributes, while your components do whatever you want your components to do.
+The current API is more flexible: it **does not provide any classes**, only **provides "smart" components to wrap *your* components**. The *library's* components take care of keyboard interaction and ARIA attributes, while *your* components just do whatever you want your components to do.
 
@@ -283,3 +285,3 @@ ## Installation
 
-### Menu
+### `Menu`
 
@@ -303,2 +305,12 @@ A React component to wrap the content of your menu-button-pattern's menu.
 
+##### noOverlay
+
+Type: `Boolean` Default: `false`
+
+By default, a transparent overlay is applied to the page that when clicked closes the menu. This is the only way I know how to consistently provide the clicking-outside-closes-menu functionality on mobile.
+
+You can turn this off by setting this `noOverlay` prop to `true`.
+
+(But if it is causing problems, annoying you or not working in some way, please let me know with an issue!)
+
 ##### tag
@@ -322,3 +334,3 @@
 
-### MenuItem
+### `MenuItem`
 
@@ -325,0 +337,0 @@ A React component to wrap the content of one of your menu-button-pattern's menu items.

src/Menu.js

@@ -19,3 +19,3 @@ import React, { PropTypes } from 'react';
   render() {
-    const { manager, children, tag, className, id } = this.props;
+    const { manager, children, tag, className, id, noOverlay } = this.props;
 
@@ -30,3 +30,3 @@ const childrenToRender = (() => {
 
-    return React.createElement(tag, {
+    const menuEl = React.createElement(tag, {
       className,
@@ -37,3 +37,25 @@ id,
       onBlur: manager.handleBlur,
+      style: (noOverlay) ? undefined : { position: 'relative', zIndex: 100 },
     }, childrenToRender);
+
+    if (noOverlay) return menuEl;
+
+    const overlay = (!manager.isOpen) ? false : React.createElement('div', {
+      style: {
+        cursor: 'pointer',
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+        zIndex: 99,
+      },
+      onClick: manager.closeMenu,
+    });
+
+    return React.createElement('div', {},
+      menuEl,
+      overlay
+    );
   }
@@ -47,2 +69,3 @@ }
   className: PropTypes.string,
+  noOverlay: PropTypes.bool,
   tag: PropTypes.string,
@@ -49,0 +72,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

73044

increased by4.43%

Lines of code

1213

increased by4.84%

Number of lines in readme file

378

increased by3.28%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes