Socket
Socket
Sign inDemoInstall

react-aria-menubutton

Package Overview
Dependencies
34
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.7.0 to 0.8.0

3

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.

2

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');

@@ -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');

@@ -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 @@ };

@@ -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');

@@ -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 @@ };

@@ -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)});
{
"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"

@@ -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.

@@ -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 @@ };

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc