react-aria-menubutton - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

 # Changelog
 
+## 0.3.0
+- Remove `classnames` dependency.
+
 ## 0.2.0
@@ -4,0 +7,0 @@ - Add `dist-modules` for modular consumption.

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, {

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(

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

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;

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

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

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

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) ? (

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 (

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

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

Improved metrics

Dependency count

1

decreased by-50%

Worsened metrics

Total package byte prevSize

79543

decreased by-0.17%

Lines of code

1529

decreased by-0.71%

Number of lines in readme file

172

decreased by-1.15%

Dependency changes

• - Removedclassnames@^1.0.0

• - Removedclassnames@1.2.2(transitive)