Socket
Socket
Sign inDemoInstall

react-aria-menubutton

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-aria-menubutton - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

3

CHANGELOG.md
# Changelog
## 0.3.0
- Remove `classnames` dependency.
## 0.2.0

@@ -4,0 +7,0 @@ - Add `dist-modules` for modular consumption.

9

dist-modules/createAriaMenuButton.js

@@ -28,5 +28,4 @@ 'use strict';

var React = arguments[0] === undefined ? global.React : arguments[0];
var classNames = arguments[1] === undefined ? global.classNames : arguments[1];
var Menu = _createMenu2['default'](React, classNames);
var Menu = _createMenu2['default'](React);
var CSSTransitionGroup = React.addons ? React.addons.CSSTransitionGroup : false;

@@ -162,6 +161,4 @@

var outsideId = props.id ? '' + props.id + '-outside' : undefined;
var triggerClasses = classNames({
'AriaMenuButton-trigger': true,
'is-open': isOpen
});
var triggerClasses = 'AriaMenuButton-trigger';
if (isOpen) triggerClasses += ' is-open';

@@ -168,0 +165,0 @@ var menu = isOpen ? React.createElement(Menu, _extends({}, props, {

10

dist-modules/createMenu.js

@@ -18,5 +18,5 @@ 'use strict';

function createMenu(React, classNames) {
function createMenu(React) {
var MenuItem = _createMenuItem2['default'](React, classNames);
var MenuItem = _createMenuItem2['default'](React);

@@ -63,6 +63,4 @@ var Menu = (function (_React$Component) {

var menuClasses = classNames({
'AriaMenuButton-menu': true,
'AriaMenuButton-menu--flushRight': props.flushRight
});
var menuClasses = 'AriaMenuButton-menu';
if (props.flushRight) menuClasses += ' AriaMenuButton-menu--flushRight';

@@ -69,0 +67,0 @@ return React.createElement(

8

dist-modules/createMenuItem.js

@@ -12,3 +12,3 @@ 'use strict';

function createMenuItem(React, classNames) {
function createMenuItem(React) {
var MenuItem = (function (_React$Component) {

@@ -55,6 +55,4 @@ function MenuItem() {

var props = this.props;
var itemClasses = classNames({
'AriaMenuButton-menuItem': true,
'is-selected': props.isSelected
});
var itemClasses = 'AriaMenuButton-menuItem';
if (props.isSelected) itemClasses += ' is-selected';

@@ -61,0 +59,0 @@ // tabindex -1 because: "With focus on the button pressing

193

dist/createAriaMenuButton.js
(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.createAriaMenuButton = 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 (global){
"use strict";
'use strict';
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { "default": obj }; };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
var _inherits = function (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; };
var _inherits = function (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; };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
module.exports = createAriaMenuButton;
exports.__esModule = true;
exports['default'] = createAriaMenuButton;
var keys = _interopRequireWildcard(require("./keys"));
var _import = require('./keys');
var createMenu = _interopRequire(require("./createMenu"));
var keys = _interopRequireWildcard(_import);
var focusManager = _interopRequire(require("./focusManager"));
var _createMenu = require('./createMenu');
var _createMenu2 = _interopRequireWildcard(_createMenu);
var _focusManager = require('./focusManager');
var _focusManager2 = _interopRequireWildcard(_focusManager);
function createAriaMenuButton() {
var React = arguments[0] === undefined ? global.React : arguments[0];
var classNames = arguments[1] === undefined ? global.classNames : arguments[1];
var Menu = createMenu(React, classNames);
var Menu = _createMenu2['default'](React);
var CSSTransitionGroup = React.addons ? React.addons.CSSTransitionGroup : false;

@@ -36,3 +40,3 @@

this.state = { isOpen: !!props.startOpen };
this.focusManager = focusManager();
this.focusManager = _focusManager2['default']();
}

@@ -48,3 +52,3 @@

if (this.props.transition && !CSSTransitionGroup) {
throw new Error("If you want to use transitions with ariaMenuButton, you need to pass it " + "React with addons");
throw new Error('If you want to use transitions with ariaMenuButton, you need to pass it ' + 'React with addons');
}

@@ -132,11 +136,11 @@ };

AriaMenuButton.prototype.handleBlur = function handleBlur() {
var _this = this;
var _this2 = this;
this.blurTimeout = setTimeout(function () {
var activeEl = document.activeElement;
if (activeEl === _this.focusManager.trigger) return;
if (_this.focusManager.focusables.some(function (f) {
if (activeEl === _this2.focusManager.trigger) return;
if (_this2.focusManager.focusables.some(function (f) {
return f.node === activeEl;
})) return;
if (_this.state.isOpen) _this.closeMenu(false);
if (_this2.state.isOpen) _this2.closeMenu(false);
}, 0);

@@ -151,3 +155,3 @@ };

AriaMenuButton.prototype.handleOverlayClick = function handleOverlayClick() {
console.log("overlay click triggered");
console.log('overlay click triggered');
this.closeMenu(false);

@@ -160,8 +164,6 @@ };

var triggerId = props.id ? "" + props.id + "-trigger" : undefined;
var outsideId = props.id ? "" + props.id + "-outside" : undefined;
var triggerClasses = classNames({
"AriaMenuButton-trigger": true,
"is-open": isOpen
});
var triggerId = props.id ? '' + props.id + '-trigger' : undefined;
var outsideId = props.id ? '' + props.id + '-outside' : undefined;
var triggerClasses = 'AriaMenuButton-trigger';
if (isOpen) triggerClasses += ' is-open';

@@ -175,10 +177,10 @@ var menu = isOpen ? React.createElement(Menu, _extends({}, props, {

CSSTransitionGroup,
{ transitionName: "is",
component: "div",
className: "AriaMenuButton-menuWrapper AriaMenuButton-menuWrapper--trans",
{ transitionName: 'is',
component: 'div',
className: 'AriaMenuButton-menuWrapper AriaMenuButton-menuWrapper--trans',
onKeyDown: this.handleMenuKey.bind(this) },
menu
) : React.createElement(
"div",
{ className: "AriaMenuButton-menuWrapper",
'div',
{ className: 'AriaMenuButton-menuWrapper',
onKeyDown: this.handleMenuKey.bind(this) },

@@ -195,22 +197,22 @@ menu

var innerStyle = !isOpen ? {} : {
display: "inline-block",
position: "relative",
zIndex: "100"
display: 'inline-block',
position: 'relative',
zIndex: '100'
};
var outsideOverlay = !isOpen ? false : React.createElement("div", { id: outsideId,
var outsideOverlay = !isOpen ? false : React.createElement('div', { id: outsideId,
onClick: this.handleOverlayClick.bind(this),
ref: "overlay",
ref: 'overlay',
style: {
cursor: "pointer",
position: "fixed",
cursor: 'pointer',
position: 'fixed',
top: 0, bottom: 0, left: 0, right: 0,
zIndex: "99",
WebkitTapHighlightColor: "rgba(0,0,0,0)"
zIndex: '99',
WebkitTapHighlightColor: 'rgba(0,0,0,0)'
} });
return React.createElement(
"div",
'div',
{ id: props.id,
className: "AriaMenuButton",
className: 'AriaMenuButton',
onKeyDown: this.handleAnywhereKey.bind(this),

@@ -220,6 +222,6 @@ onBlur: this.handleBlur.bind(this) },

React.createElement(
"div",
'div',
{ style: innerStyle },
React.createElement(
"div",
'div',
{ id: triggerId,

@@ -229,7 +231,7 @@ className: triggerClasses,

onKeyDown: this.handleTriggerKey.bind(this),
ref: "trigger",
"aria-haspopup": true,
"aria-expanded": isOpen,
role: "button",
tabIndex: "0" },
ref: 'trigger',
'aria-haspopup': true,
'aria-expanded': isOpen,
role: 'button',
tabIndex: '0' },
props.triggerContent

@@ -264,23 +266,27 @@ ),

}
module.exports = exports['default'];
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./createMenu":2,"./focusManager":4,"./keys":5}],2:[function(require,module,exports){
"use strict";
'use strict';
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
var _inherits = function (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; };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var _inherits = function (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; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
module.exports = createMenu;
exports.__esModule = true;
exports['default'] = createMenu;
var createMenuItem = _interopRequire(require("./createMenuItem"));
var _createMenuItem = require('./createMenuItem');
function createMenu(React, classNames) {
var _createMenuItem2 = _interopRequireWildcard(_createMenuItem);
var MenuItem = createMenuItem(React, classNames);
function createMenu(React) {
var MenuItem = _createMenuItem2['default'](React);
var Menu = (function (_React$Component) {

@@ -315,6 +321,6 @@ function Menu() {

return React.createElement(
"li",
'li',
{ key: i,
className: "AriaMenuButton-li",
role: "presentation" },
className: 'AriaMenuButton-li',
role: 'presentation' },
React.createElement(MenuItem, _extends({}, item, {

@@ -327,11 +333,9 @@ focusManager: props.focusManager,

var menuClasses = classNames({
"AriaMenuButton-menu": true,
"AriaMenuButton-menu--flushRight": props.flushRight
});
var menuClasses = 'AriaMenuButton-menu';
if (props.flushRight) menuClasses += ' AriaMenuButton-menu--flushRight';
return React.createElement(
"ol",
'ol',
{ className: menuClasses,
role: "menu" },
role: 'menu' },
items

@@ -357,17 +361,17 @@ );

module.exports = exports['default'];
},{"./createMenuItem":3}],3:[function(require,module,exports){
"use strict";
'use strict';
var _inherits = function (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; };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var _inherits = function (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; };
module.exports = createMenuItem;
exports.__esModule = true;
exports['default'] = createMenuItem;
var _keys = require("./keys");
var _ENTER$SPACE = require('./keys');
var ENTER = _keys.ENTER;
var SPACE = _keys.SPACE;
function createMenuItem(React, classNames) {
function createMenuItem(React) {
var MenuItem = (function (_React$Component) {

@@ -401,3 +405,3 @@ function MenuItem() {

} // If there's no value, we'll send the label
var v = typeof props.value !== "undefined" ? props.value : props.content;
var v = typeof props.value !== 'undefined' ? props.value : props.content;
props.handleSelection(v, e);

@@ -407,3 +411,3 @@ };

MenuItem.prototype.handleKey = function handleKey(e) {
if (e.key !== ENTER && e.key !== SPACE) {
if (e.key !== _ENTER$SPACE.ENTER && e.key !== _ENTER$SPACE.SPACE) {
return;

@@ -416,6 +420,4 @@ }e.preventDefault();

var props = this.props;
var itemClasses = classNames({
"AriaMenuButton-menuItem": true,
"is-selected": props.isSelected
});
var itemClasses = 'AriaMenuButton-menuItem';
if (props.isSelected) itemClasses += ' is-selected';

@@ -430,3 +432,3 @@ // tabindex -1 because: "With focus on the button pressing

return React.createElement(
"div",
'div',
{ id: props.id,

@@ -436,5 +438,5 @@ className: itemClasses,

onKeyDown: this.handleKey.bind(this),
role: "menuitem",
tabIndex: "-1",
"data-value": props.value },
role: 'menuitem',
tabIndex: '-1',
'data-value': props.value },
props.content

@@ -461,6 +463,9 @@ );

module.exports = exports['default'];
},{"./keys":5}],4:[function(require,module,exports){
"use strict";
'use strict';
module.exports = focusManager;
exports.__esModule = true;
exports['default'] = focusManager;
var focusManagerProto = {

@@ -494,3 +499,3 @@

if (!item.text && !item.content.charAt) {
throw new Error("AriaMenuButton items must have textual `content` or a `text` prop");
throw new Error('AriaMenuButton items must have textual `content` or a `text` prop');
}

@@ -516,4 +521,6 @@ if (item.text) {

module.exports = exports['default'];
},{}],5:[function(require,module,exports){
"use strict";
'use strict';

@@ -524,11 +531,11 @@ exports.__esModule = true;

var ENTER = "Enter";
var ENTER = 'Enter';
exports.ENTER = ENTER;
var SPACE = " ";
var SPACE = ' ';
exports.SPACE = SPACE;
var ESCAPE = "Escape";
var ESCAPE = 'Escape';
exports.ESCAPE = ESCAPE;
var UP = "ArrowUp";
var UP = 'ArrowUp';
exports.UP = UP;
var DOWN = "ArrowDown";
var DOWN = 'ArrowDown';
exports.DOWN = DOWN;

@@ -535,0 +542,0 @@ var LOWEST_LETTER_CODE = 65;

2

dist/createAriaMenuButton.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.createAriaMenuButton=e()}}(function(){return function e(t,n,o){function r(s,u){if(!n[s]){if(!t[s]){var a="function"==typeof require&&require;if(!u&&a)return a(s,!0);if(i)return i(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var l=n[s]={exports:{}};t[s][0].call(l.exports,function(e){var n=t[s][1][e];return r(n?n:e)},l,l.exports,e,t,n,o)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<o.length;s++)r(o[s]);return r}({1:[function(e,t,n){(function(n){"use strict";function o(){var e=void 0===arguments[0]?n.React:arguments[0],t=void 0===arguments[1]?n.classNames:arguments[1],o=p(e,t),i=e.addons?e.addons.CSSTransitionGroup:!1,s=function(n){function s(e){a(this,s),n.call(this,e),this.state={isOpen:!!e.startOpen},this.focusManager=f()}return u(s,n),s.prototype.shouldComponentUpdate=function(e,t){return this.state.isOpen!==t.isOpen||this.props.selectedValue!==e.selectedValue},s.prototype.componentWillMount=function(){if(this.props.transition&&!i)throw new Error("If you want to use transitions with ariaMenuButton, you need to pass it React with addons")},s.prototype.componentDidMount=function(){this.focusManager.trigger=e.findDOMNode(this.refs.trigger)},s.prototype.openMenu=function(){var e=void 0===arguments[0]?!1:arguments[0];this.setState({isOpen:!0,innerFocus:e})},s.prototype.closeMenu=function(){var e=this,t=void 0===arguments[0]?!0:arguments[0];this.setState({isOpen:!1,innerFocus:!1},function(){t&&e.focusManager.focusTrigger(),e.focusManager.currentFocus=-1})},s.prototype.toggleMenu=function(){this.state.isOpen?this.closeMenu():this.openMenu()},s.prototype.handleAnywhereKey=function(e){var t=e.key,n=r(e);(t===l.DOWN||n)&&(e.preventDefault(),t===l.DOWN?this.state.isOpen?this.focusManager.moveDown():this.openMenu(!0):n&&this.state.isOpen&&this.checkLetterKeys(e.keyCode))},s.prototype.handleTriggerKey=function(e){var t=e.key;(t===l.ENTER||t===l.SPACE)&&(e.preventDefault(),this.toggleMenu())},s.prototype.handleMenuKey=function(e){e.key===l.ESCAPE?this.closeMenu():e.key===l.UP&&this.state.isOpen&&(e.preventDefault(),this.focusManager.moveUp())},s.prototype.checkLetterKeys=function(e){this.focusManager.moveToLetter(String.fromCharCode(e))},s.prototype.handleBlur=function(){var e=this;this.blurTimeout=setTimeout(function(){var t=document.activeElement;t!==e.focusManager.trigger&&(e.focusManager.focusables.some(function(e){return e.node===t})||e.state.isOpen&&e.closeMenu(!1))},0)},s.prototype.handleSelection=function(e){this.props.closeOnSelection&&this.closeMenu(),this.props.handleSelection(e)},s.prototype.handleOverlayClick=function(){console.log("overlay click triggered"),this.closeMenu(!1)},s.prototype.render=function(){var n=this.props,r=this.state.isOpen,s=n.id?""+n.id+"-trigger":void 0,u=n.id?""+n.id+"-outside":void 0,a=t({"AriaMenuButton-trigger":!0,"is-open":r}),l=r?e.createElement(o,c({},n,{handleSelection:this.handleSelection.bind(this),receiveFocus:this.state.innerFocus,focusManager:this.focusManager})):!1,p=n.transition?e.createElement(i,{transitionName:"is",component:"div",className:"AriaMenuButton-menuWrapper AriaMenuButton-menuWrapper--trans",onKeyDown:this.handleMenuKey.bind(this)},l):e.createElement("div",{className:"AriaMenuButton-menuWrapper",onKeyDown:this.handleMenuKey.bind(this)},l),f=r?{display:"inline-block",position:"relative",zIndex:"100"}:{},h=r?e.createElement("div",{id:u,onClick:this.handleOverlayClick.bind(this),ref:"overlay",style:{cursor:"pointer",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"99",WebkitTapHighlightColor:"rgba(0,0,0,0)"}}):!1;return e.createElement("div",{id:n.id,className:"AriaMenuButton",onKeyDown:this.handleAnywhereKey.bind(this),onBlur:this.handleBlur.bind(this)},h,e.createElement("div",{style:f},e.createElement("div",{id:s,className:a,onClick:this.toggleMenu.bind(this),onKeyDown:this.handleTriggerKey.bind(this),ref:"trigger","aria-haspopup":!0,"aria-expanded":r,role:"button",tabIndex:"0"},n.triggerContent),p))},s}(e.Component),h=e.PropTypes;return s.propTypes={handleSelection:h.func.isRequired,items:h.arrayOf(h.object).isRequired,triggerContent:h.oneOfType([h.string,h.element]).isRequired,closeOnSelection:h.bool,flushRight:h.bool,id:h.string,startOpen:h.bool,selectedValue:h.oneOfType([h.string,h.number,h.bool]),transition:h.bool},s}function r(e){return e.keyCode>=l.LOWEST_LETTER_CODE&&e.keyCode<=l.HIGHEST_LETTER_CODE}var i=function(e){return e&&e.__esModule?e["default"]:e},s=function(e){return e&&e.__esModule?e:{"default":e}},u=function(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)},a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c=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};t.exports=o;var l=s(e("./keys")),p=i(e("./createMenu")),f=i(e("./focusManager"))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./createMenu":2,"./focusManager":4,"./keys":5}],2:[function(e,t,n){"use strict";function o(e,t){var n=a(e,t),o=function(o){function r(){s(this,r),null!=o&&o.apply(this,arguments)}return i(r,o),r.prototype.shouldComponentUpdate=function(e){return this.props.selectedValue!==e.selectedValue},r.prototype.componentWillMount=function(){this.props.focusManager.focusables=[]},r.prototype.componentDidMount=function(){this.props.receiveFocus&&this.props.focusManager.move(0)},r.prototype.render=function(){var o=this.props,r=o.selectedValue,i=o.items.map(function(t,i){return e.createElement("li",{key:i,className:"AriaMenuButton-li",role:"presentation"},e.createElement(n,u({},t,{focusManager:o.focusManager,handleSelection:o.handleSelection,isSelected:t.value===r})))}),s=t({"AriaMenuButton-menu":!0,"AriaMenuButton-menu--flushRight":o.flushRight});return e.createElement("ol",{className:s,role:"menu"},i)},r}(e.Component),r=e.PropTypes;return o.propTypes={focusManager:r.object.isRequired,items:r.arrayOf(r.object).isRequired,flushRight:r.bool,handleSelection:r.func,receiveFocus:r.bool,selectedValue:r.any},o}var r=function(e){return e&&e.__esModule?e["default"]:e},i=function(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)},s=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},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};t.exports=o;var a=r(e("./createMenuItem"))},{"./createMenuItem":3}],3:[function(e,t,n){"use strict";function o(e,t){var n=function(n){function o(){i(this,o),null!=n&&n.apply(this,arguments)}return r(o,n),o.prototype.shouldComponentUpdate=function(e){return this.props.isSelected!==e.isSelected},o.prototype.componentDidMount=function(){this.props.focusManager.focusables.push({content:this.props.content,text:this.props.text,node:e.findDOMNode(this)})},o.prototype.handleClick=function(e){var t=this.props;if(!t.isSelected){var n="undefined"!=typeof t.value?t.value:t.content;t.handleSelection(n,e)}},o.prototype.handleKey=function(e){(e.key===u||e.key===a)&&(e.preventDefault(),this.handleClick(e))},o.prototype.render=function(){var n=this.props,o=t({"AriaMenuButton-menuItem":!0,"is-selected":n.isSelected});return e.createElement("div",{id:n.id,className:o,onClick:this.handleClick.bind(this),onKeyDown:this.handleKey.bind(this),role:"menuitem",tabIndex:"-1","data-value":n.value},n.content)},o}(e.Component),o=e.PropTypes;return n.propTypes={focusManager:o.object.isRequired,handleSelection:o.func.isRequired,content:o.oneOfType([o.string,o.element]).isRequired,id:o.string,isSelected:o.bool,text:o.string,value:o.oneOfType([o.string,o.number,o.bool])},n}var r=function(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)},i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")};t.exports=o;var s=e("./keys"),u=s.ENTER,a=s.SPACE},{"./keys":5}],4:[function(e,t,n){"use strict";function o(){return Object.create(r)}t.exports=o;var r={focusables:[],trigger:null,currentFocus:-1,move:function(e){this.focusables[e].node.focus(),this.currentFocus=e},moveUp:function(){var e=-1===this.currentFocus||0===this.currentFocus?this.focusables.length-1:this.currentFocus-1;this.move(e)},moveDown:function(){var e=-1===this.currentFocus||this.currentFocus===this.focusables.length-1?0:this.currentFocus+1;this.move(e)},moveToLetter:function(e){for(var t=this.focusables.slice(this.currentFocus+1).concat(this.focusables.slice(0,this.currentFocus+1)),n=0,o=t.length;o>n;n++){var r=t[n];if(!r.text&&!r.content.charAt)throw new Error("AriaMenuButton items must have textual `content` or a `text` prop");if(r.text){if(r.text.charAt(0).toLowerCase()!==e.toLowerCase())continue}else if(r.content.charAt(0).toLowerCase()!==e.toLowerCase())continue;return r.node.focus(),void(this.currentFocus=this.focusables.indexOf(r))}},focusTrigger:function(){this.trigger.focus()}}},{}],5:[function(e,t,n){"use strict";n.__esModule=!0;var o="Enter";n.ENTER=o;var r=" ";n.SPACE=r;var i="Escape";n.ESCAPE=i;var s="ArrowUp";n.UP=s;var u="ArrowDown";n.DOWN=u;var a=65;n.LOWEST_LETTER_CODE=a;var c=91;n.HIGHEST_LETTER_CODE=c},{}]},{},[1])(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.createAriaMenuButton=e()}}(function(){return function e(t,n,o){function r(s,u){if(!n[s]){if(!t[s]){var a="function"==typeof require&&require;if(!u&&a)return a(s,!0);if(i)return i(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var l=n[s]={exports:{}};t[s][0].call(l.exports,function(e){var n=t[s][1][e];return r(n?n:e)},l,l.exports,e,t,n,o)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<o.length;s++)r(o[s]);return r}({1:[function(e,t,n){(function(o){"use strict";function r(){var e=void 0===arguments[0]?o.React:arguments[0],t=d["default"](e),n=e.addons?e.addons.CSSTransitionGroup:!1,r=function(o){function r(e){u(this,r),o.call(this,e),this.state={isOpen:!!e.startOpen},this.focusManager=y["default"]()}return a(r,o),r.prototype.shouldComponentUpdate=function(e,t){return this.state.isOpen!==t.isOpen||this.props.selectedValue!==e.selectedValue},r.prototype.componentWillMount=function(){if(this.props.transition&&!n)throw new Error("If you want to use transitions with ariaMenuButton, you need to pass it React with addons")},r.prototype.componentDidMount=function(){this.focusManager.trigger=e.findDOMNode(this.refs.trigger)},r.prototype.openMenu=function(){var e=void 0===arguments[0]?!1:arguments[0];this.setState({isOpen:!0,innerFocus:e})},r.prototype.closeMenu=function(){var e=this,t=void 0===arguments[0]?!0:arguments[0];this.setState({isOpen:!1,innerFocus:!1},function(){t&&e.focusManager.focusTrigger(),e.focusManager.currentFocus=-1})},r.prototype.toggleMenu=function(){this.state.isOpen?this.closeMenu():this.openMenu()},r.prototype.handleAnywhereKey=function(e){var t=e.key,n=i(e);(t===p.DOWN||n)&&(e.preventDefault(),t===p.DOWN?this.state.isOpen?this.focusManager.moveDown():this.openMenu(!0):n&&this.state.isOpen&&this.checkLetterKeys(e.keyCode))},r.prototype.handleTriggerKey=function(e){var t=e.key;(t===p.ENTER||t===p.SPACE)&&(e.preventDefault(),this.toggleMenu())},r.prototype.handleMenuKey=function(e){e.key===p.ESCAPE?this.closeMenu():e.key===p.UP&&this.state.isOpen&&(e.preventDefault(),this.focusManager.moveUp())},r.prototype.checkLetterKeys=function(e){this.focusManager.moveToLetter(String.fromCharCode(e))},r.prototype.handleBlur=function(){var e=this;this.blurTimeout=setTimeout(function(){var t=document.activeElement;t!==e.focusManager.trigger&&(e.focusManager.focusables.some(function(e){return e.node===t})||e.state.isOpen&&e.closeMenu(!1))},0)},r.prototype.handleSelection=function(e){this.props.closeOnSelection&&this.closeMenu(),this.props.handleSelection(e)},r.prototype.handleOverlayClick=function(){console.log("overlay click triggered"),this.closeMenu(!1)},r.prototype.render=function(){var o=this.props,r=this.state.isOpen,i=o.id?""+o.id+"-trigger":void 0,s=o.id?""+o.id+"-outside":void 0,u="AriaMenuButton-trigger";r&&(u+=" is-open");var a=r?e.createElement(t,c({},o,{handleSelection:this.handleSelection.bind(this),receiveFocus:this.state.innerFocus,focusManager:this.focusManager})):!1,l=o.transition?e.createElement(n,{transitionName:"is",component:"div",className:"AriaMenuButton-menuWrapper AriaMenuButton-menuWrapper--trans",onKeyDown:this.handleMenuKey.bind(this)},a):e.createElement("div",{className:"AriaMenuButton-menuWrapper",onKeyDown:this.handleMenuKey.bind(this)},a),p=r?{display:"inline-block",position:"relative",zIndex:"100"}:{},f=r?e.createElement("div",{id:s,onClick:this.handleOverlayClick.bind(this),ref:"overlay",style:{cursor:"pointer",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"99",WebkitTapHighlightColor:"rgba(0,0,0,0)"}}):!1;return e.createElement("div",{id:o.id,className:"AriaMenuButton",onKeyDown:this.handleAnywhereKey.bind(this),onBlur:this.handleBlur.bind(this)},f,e.createElement("div",{style:p},e.createElement("div",{id:i,className:u,onClick:this.toggleMenu.bind(this),onKeyDown:this.handleTriggerKey.bind(this),ref:"trigger","aria-haspopup":!0,"aria-expanded":r,role:"button",tabIndex:"0"},o.triggerContent),l))},r}(e.Component),s=e.PropTypes;return r.propTypes={handleSelection:s.func.isRequired,items:s.arrayOf(s.object).isRequired,triggerContent:s.oneOfType([s.string,s.element]).isRequired,closeOnSelection:s.bool,flushRight:s.bool,id:s.string,startOpen:s.bool,selectedValue:s.oneOfType([s.string,s.number,s.bool]),transition:s.bool},r}function i(e){return e.keyCode>=p.LOWEST_LETTER_CODE&&e.keyCode<=p.HIGHEST_LETTER_CODE}var s=function(e){return e&&e.__esModule?e:{"default":e}},u=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(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)},c=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};n.__esModule=!0,n["default"]=r;var l=e("./keys"),p=s(l),f=e("./createMenu"),d=s(f),h=e("./focusManager"),y=s(h);t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./createMenu":2,"./focusManager":4,"./keys":5}],2:[function(e,t,n){"use strict";function o(e){var t=c["default"](e),n=function(n){function o(){i(this,o),null!=n&&n.apply(this,arguments)}return s(o,n),o.prototype.shouldComponentUpdate=function(e){return this.props.selectedValue!==e.selectedValue},o.prototype.componentWillMount=function(){this.props.focusManager.focusables=[]},o.prototype.componentDidMount=function(){this.props.receiveFocus&&this.props.focusManager.move(0)},o.prototype.render=function(){var n=this.props,o=n.selectedValue,r=n.items.map(function(r,i){return e.createElement("li",{key:i,className:"AriaMenuButton-li",role:"presentation"},e.createElement(t,u({},r,{focusManager:n.focusManager,handleSelection:n.handleSelection,isSelected:r.value===o})))}),i="AriaMenuButton-menu";return n.flushRight&&(i+=" AriaMenuButton-menu--flushRight"),e.createElement("ol",{className:i,role:"menu"},r)},o}(e.Component),o=e.PropTypes;return n.propTypes={focusManager:o.object.isRequired,items:o.arrayOf(o.object).isRequired,flushRight:o.bool,handleSelection:o.func,receiveFocus:o.bool,selectedValue:o.any},n}var r=function(e){return e&&e.__esModule?e:{"default":e}},i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=function(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)},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};n.__esModule=!0,n["default"]=o;var a=e("./createMenuItem"),c=r(a);t.exports=n["default"]},{"./createMenuItem":3}],3:[function(e,t,n){"use strict";function o(e){var t=function(t){function n(){r(this,n),null!=t&&t.apply(this,arguments)}return i(n,t),n.prototype.shouldComponentUpdate=function(e){return this.props.isSelected!==e.isSelected},n.prototype.componentDidMount=function(){this.props.focusManager.focusables.push({content:this.props.content,text:this.props.text,node:e.findDOMNode(this)})},n.prototype.handleClick=function(e){var t=this.props;if(!t.isSelected){var n="undefined"!=typeof t.value?t.value:t.content;t.handleSelection(n,e)}},n.prototype.handleKey=function(e){(e.key===s.ENTER||e.key===s.SPACE)&&(e.preventDefault(),this.handleClick(e))},n.prototype.render=function(){var t=this.props,n="AriaMenuButton-menuItem";return t.isSelected&&(n+=" is-selected"),e.createElement("div",{id:t.id,className:n,onClick:this.handleClick.bind(this),onKeyDown:this.handleKey.bind(this),role:"menuitem",tabIndex:"-1","data-value":t.value},t.content)},n}(e.Component),n=e.PropTypes;return t.propTypes={focusManager:n.object.isRequired,handleSelection:n.func.isRequired,content:n.oneOfType([n.string,n.element]).isRequired,id:n.string,isSelected:n.bool,text:n.string,value:n.oneOfType([n.string,n.number,n.bool])},t}var r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(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,n["default"]=o;var s=e("./keys");t.exports=n["default"]},{"./keys":5}],4:[function(e,t,n){"use strict";function o(){return Object.create(r)}n.__esModule=!0,n["default"]=o;var r={focusables:[],trigger:null,currentFocus:-1,move:function(e){this.focusables[e].node.focus(),this.currentFocus=e},moveUp:function(){var e=-1===this.currentFocus||0===this.currentFocus?this.focusables.length-1:this.currentFocus-1;this.move(e)},moveDown:function(){var e=-1===this.currentFocus||this.currentFocus===this.focusables.length-1?0:this.currentFocus+1;this.move(e)},moveToLetter:function(e){for(var t=this.focusables.slice(this.currentFocus+1).concat(this.focusables.slice(0,this.currentFocus+1)),n=0,o=t.length;o>n;n++){var r=t[n];if(!r.text&&!r.content.charAt)throw new Error("AriaMenuButton items must have textual `content` or a `text` prop");if(r.text){if(r.text.charAt(0).toLowerCase()!==e.toLowerCase())continue}else if(r.content.charAt(0).toLowerCase()!==e.toLowerCase())continue;return r.node.focus(),void(this.currentFocus=this.focusables.indexOf(r))}},focusTrigger:function(){this.trigger.focus()}};t.exports=n["default"]},{}],5:[function(e,t,n){"use strict";n.__esModule=!0;var o="Enter";n.ENTER=o;var r=" ";n.SPACE=r;var i="Escape";n.ESCAPE=i;var s="ArrowUp";n.UP=s;var u="ArrowDown";n.DOWN=u;var a=65;n.LOWEST_LETTER_CODE=a;var c=91;n.HIGHEST_LETTER_CODE=c},{}]},{},[1])(1)});

3

package.json
{
"name": "react-aria-menubutton",
"version": "0.2.0",
"version": "0.3.0",
"description": "A fully accessible, easily themeable, React-powered menu button",

@@ -21,3 +21,2 @@ "main": "index.js",

"dependencies": {
"classnames": "^1.0.0",
"react": "0.13.x"

@@ -24,0 +23,0 @@ },

16

README.md

@@ -26,6 +26,5 @@ # react-aria-menubutton [![Build Status](https://travis-ci.org/davidtheclark/react-aria-menubutton.svg?branch=master)](https://travis-ci.org/davidtheclark/react-aria-menubutton)

- React 0.13.x
- classNames ^1.0.0
If you have these dependencies exposed as globals, everything will be fine.
If not (for instance, if you're using a module system), you will pass the dependencies in when you call `createAriaMenuButton()`, as [documented below](#api).
If you have React exposed as a global, everything will be fine.
If not (for instance, if you're using a module system), you will pass the dependency in when you call `createAriaMenuButton()`, as [documented below](#api).

@@ -44,6 +43,5 @@ ## Installation

var React = require('react');
var classNames = require('classnames');
var createAriaMenuButton = require('react-aria-menubutton');
var AriaMenuButton = createAriaMenuButton(React, classNames);
var AriaMenuButton = createAriaMenuButton(React);

@@ -66,3 +64,3 @@ React.render(

<script>
// Assuming React and classNames are globally available
// Assuming React is globally available
var AriaMenuButton = createAriaMenuButton();

@@ -108,8 +106,8 @@ // ...

### createAriaMenuButton(React, classNames)
### createAriaMenuButton(React)
Returns a React component, an `AriaMenuButton`, as described below.
If `React` and `classNames` are available on the global (`window`) object, you do not have to pass them in as arguments.
Otherwise, pass in the dependencies to get your special button.
If `React` is available on the global (`window`) object, you do not have to pass them in as arguments.
Otherwise, pass in the dependency to get your special button.

@@ -116,0 +114,0 @@ ### AriaMenuButton

10

src/createAriaMenuButton.js

@@ -5,5 +5,5 @@ import * as keys from './keys';

export default function createAriaMenuButton(React=global.React, classNames=global.classNames) {
export default function createAriaMenuButton(React=global.React) {
const Menu = createMenu(React, classNames);
const Menu = createMenu(React);
const CSSTransitionGroup = (React.addons) ? React.addons.CSSTransitionGroup : false;

@@ -132,6 +132,4 @@

const outsideId = (props.id) ? `${props.id}-outside` : undefined;
const triggerClasses = classNames({
'AriaMenuButton-trigger': true,
'is-open': isOpen
});
let triggerClasses = 'AriaMenuButton-trigger';
if (isOpen) triggerClasses += ' is-open';

@@ -138,0 +136,0 @@ const menu = (isOpen) ? (

10

src/createMenu.js
import createMenuItem from './createMenuItem';
export default function createMenu(React, classNames) {
export default function createMenu(React) {
const MenuItem = createMenuItem(React, classNames);
const MenuItem = createMenuItem(React);

@@ -38,6 +38,4 @@ class Menu extends React.Component {

const menuClasses = classNames({
'AriaMenuButton-menu': true,
'AriaMenuButton-menu--flushRight': props.flushRight
});
let menuClasses = 'AriaMenuButton-menu';
if (props.flushRight) menuClasses += ' AriaMenuButton-menu--flushRight';

@@ -44,0 +42,0 @@ return (

8

src/createMenuItem.js
import { ENTER, SPACE } from './keys';
export default function createMenuItem(React, classNames) {
export default function createMenuItem(React) {

@@ -35,6 +35,4 @@ class MenuItem extends React.Component {

const props = this.props;
const itemClasses = classNames({
'AriaMenuButton-menuItem': true,
'is-selected': props.isSelected
});
let itemClasses = 'AriaMenuButton-menuItem';
if (props.isSelected) itemClasses += ' is-selected';

@@ -41,0 +39,0 @@ // tabindex -1 because: "With focus on the button pressing

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc