Uses one build for bower, npm, and global builds

bower.json

@@ -6,7 +6,7 @@
     "Jason Madsen"
   ],
   "description": "Accessible menu component for React.JS",
-  "main": "dist/react-menu.js",
+  "main": "dist/umd/react-menu.js",
   "keywords": [
     "react",
     "menu",
@@ -25,4 +25,4 @@
     "karma.conf.js",
     "package.json"
   ]
-}
+}

dist/lib/components/Menu.js

@@ -0,0 +1,150 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+
+var cloneWithProps = require('react/lib/cloneWithProps');
+var MenuTrigger = require('./MenuTrigger');
+var MenuOptions = require('./MenuOptions');
+var MenuOption = require('./MenuOption');
+var uuid = require('../helpers/uuid');
+var injectCSS = require('../helpers/injectCSS');
+var buildClassName = require('../mixins/buildClassName');
+
+var Menu = module.exports = React.createClass({
+
+  displayName: 'Menu',
+
+  statics: {
+    injectCSS: injectCSS
+  },
+
+  mixins: [buildClassName],
+
+  childContextTypes: {
+    id: React.PropTypes.string,
+    active: React.PropTypes.bool
+  },
+
+  getChildContext: function () {
+    return {
+      id: this.state.id,
+      active: this.state.active
+    };
+  },
+
+  getInitialState: function(){
+    return {
+      id: uuid(),
+      active: false,
+      selectedIndex: 0,
+      horizontalPlacement: 'right', // only 'right' || 'left'
+      verticalPlacement: 'bottom' // only 'top' || 'bottom'
+    };
+  },
+
+  closeMenu: function() {
+    this.setState({active: false}, this.focusTrigger);
+  },
+
+  focusTrigger: function() {
+    this.refs.trigger.getDOMNode().focus();
+  },
+
+  handleBlur: function(e) {
+    // give next element a tick to take focus
+    setTimeout(function() {
+      if (!this.getDOMNode().contains(document.activeElement) && this.state.active){
+        this.closeMenu();
+      }
+    }.bind(this), 1);
+  },
+
+  handleTriggerToggle: function() {
+    this.setState({active: !this.state.active}, this.afterTriggerToggle);
+  },
+
+  afterTriggerToggle: function() {
+    if (this.state.active) {
+      this.refs.options.focusOption(0);
+      this.updatePositioning();
+    }
+  },
+
+  updatePositioning: function() {
+    var triggerRect = this.refs.trigger.getDOMNode().getBoundingClientRect();
+    var optionsRect = this.refs.options.getDOMNode().getBoundingClientRect();
+    var positionState = {};
+    // horizontal = left if it wont fit on left side
+    if (triggerRect.left + optionsRect.width > window.innerWidth) {
+      positionState.horizontalPlacement = 'left';
+    } else {
+      positionState.horizontalPlacement = 'right';
+    }
+    if (triggerRect.top + optionsRect.height > window.innerHeight) {
+      positionState.verticalPlacement = 'top';
+    } else {
+      positionState.verticalPlacement = 'bottom';
+    }
+    this.setState(positionState);
+  },
+
+  handleKeys: function(e) {
+    if (e.key === 'Escape') {
+      this.closeMenu();
+    }
+  },
+
+  verifyTwoChildren: function() {
+    var ok = (React.Children.count(this.props.children) === 2);
+    if (!ok)
+      throw 'react-menu can only take two children, a MenuTrigger, and a MenuOptions';
+    return ok;
+  },
+
+  renderTrigger: function() {
+    var trigger;
+    if(this.verifyTwoChildren()) {
+      React.Children.forEach(this.props.children, function(child){
+        if (child.type === MenuTrigger.type) {
+          trigger = cloneWithProps(child, {
+            ref: 'trigger',
+            onToggleActive: this.handleTriggerToggle
+          });
+        }
+      }.bind(this));
+    }
+    return trigger;
+  },
+
+  renderMenuOptions: function() {
+    var options;
+    if(this.verifyTwoChildren()) {
+      React.Children.forEach(this.props.children, function(child){
+        if (child.type === MenuOptions.type) {
+          options = cloneWithProps(child, {
+            ref: 'options',
+            horizontalPlacement: this.state.horizontalPlacement,
+            verticalPlacement: this.state.verticalPlacement,
+            onSelectionMade: this.closeMenu
+          });
+        }
+      }.bind(this));
+    }
+    return options;
+  },
+
+
+  render: function() {
+    return (
+      React.DOM.div({
+        className: this.buildClassName('Menu'), 
+        onKeyDown: this.handleKeys, 
+        onBlur: this.handleBlur
+      }, 
+        this.renderTrigger(), 
+        this.renderMenuOptions()
+      )
+    )
+  }
+
+});

dist/lib/components/MenuOption.js

@@ -0,0 +1,83 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var buildClassName = require('../mixins/buildClassName');
+
+var MenuOption = module.exports = React.createClass({displayName: 'exports',
+
+  propTypes: {
+    active: React.PropTypes.bool,
+    onSelect: React.PropTypes.func,
+    onDisabledSelect: React.PropTypes.func,
+    disabled: React.PropTypes.bool
+  },
+
+  mixins: [buildClassName],
+
+  notifyDisabledSelect: function() {
+    if (this.props.onDisabledSelect) {
+      this.props.onDisabledSelect();
+    }
+  },
+
+  onSelect: function() {
+    if (this.props.disabled) {
+      this.notifyDisabledSelect();
+      //early return if disabled
+      return;
+    }
+    if (this.props.onSelect) {
+      this.props.onSelect();
+    }
+    this.props._internalSelect();
+  },
+
+  handleKeyUp: function(e) {
+    if (e.key === ' ') {
+      this.onSelect();
+    }
+  },
+
+  handleKeyDown: function(e) {
+    if (e.key === 'Enter') {
+      this.onSelect();
+    }
+  },
+
+  handleClick: function() {
+    this.onSelect();
+  },
+
+  handleHover: function() {
+    this.props._internalFocus(this.props.index);
+  },
+
+  buildName: function() {
+    var name = this.buildClassName('Menu__MenuOption');
+    if (this.props.active){
+      name += ' Menu__MenuOption--active';
+    }
+    if (this.props.disabled) {
+      name += ' Menu__MenuOption--disabled';
+    }
+    return name;
+  },
+
+  render: function() {
+    return (
+      React.DOM.div({
+        onClick: this.handleClick, 
+        onKeyUp: this.handleKeyUp, 
+        onKeyDown: this.handleKeyDown, 
+        onMouseOver: this.handleHover, 
+        className: this.buildName(), 
+        role: "menuitem", 
+        tabIndex: "-1", 
+        'aria-disabled': this.props.disabled
+      }, 
+        this.props.children
+      )
+    )
+  }
+
+});

dist/lib/components/MenuOptions.js

@@ -0,0 +1,108 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var MenuOption = require('./MenuOption');
+var cloneWithProps = require('react/lib/cloneWithProps')
+var buildClassName = require('../mixins/buildClassName');
+
+var MenuOptions = module.exports = React.createClass({displayName: 'exports',
+
+  contextTypes: {
+    id: React.PropTypes.string,
+    active: React.PropTypes.bool
+  },
+
+  getInitialState: function() {
+    return {activeIndex: 0}
+  },
+
+  mixins: [buildClassName],
+
+  onSelectionMade: function() {
+    this.props.onSelectionMade();
+  },
+
+
+  moveSelectionUp: function() {
+    this.updateFocusIndexBy(-1);
+  },
+
+  moveSelectionDown: function() {
+    this.updateFocusIndexBy(1);
+  },
+
+  handleKeys: function(e) {
+    var options = {
+      'ArrowDown': this.moveSelectionDown,
+      'ArrowUp': this.moveSelectionUp,
+      'Escape': this.closeMenu
+    }
+    if(options[e.key]){
+      options[e.key].call(this);
+    }
+  },
+
+  normalizeSelectedBy: function(delta, numOptions){
+    this.selectedIndex += delta;
+    if (this.selectedIndex > numOptions - 1) {
+      this.selectedIndex = 0;
+    } else if (this.selectedIndex < 0) {
+      this.selectedIndex = numOptions - 1;
+    }
+  },
+
+  focusOption: function(index) {
+    this.selectedIndex = index;
+    this.updateFocusIndexBy(0);
+  },
+
+  updateFocusIndexBy: function(delta) {
+    var optionNodes = this.getDOMNode().querySelectorAll('.Menu__MenuOption');
+    this.normalizeSelectedBy(delta, optionNodes.length);
+    this.setState({activeIndex: this.selectedIndex}, function () {
+      optionNodes[this.selectedIndex].focus();
+    });
+  },
+
+  renderOptions: function() {
+    var index = 0;
+    return React.Children.map(this.props.children, function(c){
+      var clonedOption = c;
+      if (c.type === MenuOption.type) {
+        var active = this.state.activeIndex === index;
+        clonedOption = cloneWithProps(c, {
+          active: active,
+          index: index,
+          _internalFocus: this.focusOption,
+          _internalSelect: this.onSelectionMade
+        });
+        index++;
+      }
+      return clonedOption;
+    }.bind(this));
+  },
+
+  buildName: function() {
+    var cn = this.buildClassName('Menu__MenuOptions');
+    cn += ' Menu__MenuOptions--horizontal-' + this.props.horizontalPlacement;
+    cn += ' Menu__MenuOptions--vertical-' + this.props.verticalPlacement;
+    return cn;
+  },
+
+  render: function() {
+    return (
+      React.DOM.div({
+        id: this.context.id, 
+        role: "menu", 
+        tabIndex: "-1", 
+        'aria-expanded': this.context.active, 
+        style: {visibility: this.context.active ? 'visible' : 'hidden'}, 
+        className: this.buildName(), 
+        onKeyDown: this.handleKeys
+      }, 
+        this.renderOptions()
+      )
+    )
+  }
+
+});