react-aria - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

bower.json

 {
   "name": "react-aria",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "homepage": "https://github.com/souporserious/react-aria",
@@ -12,8 +12,13 @@ "authors": [
     "react",
-    "component",
+    "reactjs",
     "react-component",
-    "ui",
-    "motion",
-    "transition",
-    "animation"
+    "aria",
+    "accessibility",
+    "accessible",
+    "dialog",
+    "dropdown",
+    "modal",
+    "menu",
+    "popover",
+    "widget"
   ],
@@ -20,0 +25,0 @@ "license": "ISC",

dist/react-aria.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("React"), require("ReactDOM"));
+		module.exports = factory(require("React"), require("createFocusGroup"), require("createTapListener"), require("ReactDOM"), require("focusTrap"));
 	else if(typeof define === 'function' && define.amd)
-		define(["React", "ReactDOM"], factory);
+		define(["React", "createFocusGroup", "createTapListener", "ReactDOM", "focusTrap"], factory);
 	else if(typeof exports === 'object')
-		exports["ReactARIA"] = factory(require("React"), require("ReactDOM"));
+		exports["ReactARIA"] = factory(require("React"), require("createFocusGroup"), require("createTapListener"), require("ReactDOM"), require("focusTrap"));
 	else
-		root["ReactARIA"] = factory(root["React"], root["ReactDOM"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_8__) {
+		root["ReactARIA"] = factory(root["React"], root["createFocusGroup"], root["createTapListener"], root["ReactDOM"], root["focusTrap"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_10__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -65,25 +65,25 @@ /******/ 	// The module cache
 
-	var _ariaManager = __webpack_require__(1);
+	var _AriaManager2 = __webpack_require__(1);
 
-	var _ariaManager2 = _interopRequireDefault(_ariaManager);
+	var _AriaManager3 = _interopRequireDefault(_AriaManager2);
 
-	exports.AriaManager = _ariaManager2['default'];
+	exports.AriaManager = _AriaManager3['default'];
 
-	var _toggle = __webpack_require__(7);
+	var _AriaToggle2 = __webpack_require__(7);
 
-	var _toggle2 = _interopRequireDefault(_toggle);
+	var _AriaToggle3 = _interopRequireDefault(_AriaToggle2);
 
-	exports.Toggle = _toggle2['default'];
+	exports.AriaToggle = _AriaToggle3['default'];
 
-	var _menu = __webpack_require__(9);
+	var _AriaPopover2 = __webpack_require__(9);
 
-	var _menu2 = _interopRequireDefault(_menu);
+	var _AriaPopover3 = _interopRequireDefault(_AriaPopover2);
 
-	exports.Menu = _menu2['default'];
+	exports.AriaPopover = _AriaPopover3['default'];
 
-	var _menuItem = __webpack_require__(10);
+	var _AriaItem2 = __webpack_require__(11);
 
-	var _menuItem2 = _interopRequireDefault(_menuItem);
+	var _AriaItem3 = _interopRequireDefault(_AriaItem2);
 
-	exports.MenuItem = _menuItem2['default'];
+	exports.AriaItem = _AriaItem3['default'];
 
@@ -130,13 +130,34 @@ /***/ },
 
+	var KEYS = {
+	  tab: 9,
+	  escape: 27,
+	  enter: 13,
+	  space: 32,
+	  end: 35,
+	  home: 36,
+	  arrowLeft: 37,
+	  arrowUp: 38,
+	  arrowRight: 39,
+	  arrowDown: 40
+	};
+
 	var checkedProps = {
 	  tag: _react.PropTypes.string,
+	  trapFocus: _react.PropTypes.bool,
 	  children: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.node]).isRequired,
-	  stringSearch: _react.PropTypes.bool,
-	  forwardArrows: _react.PropTypes.arrayOf(_react.PropTypes.string),
-	  backArrows: _react.PropTypes.arrayOf(_react.PropTypes.string),
+	  keybindings: _react.PropTypes.shape({
+	    next: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.array]),
+	    prev: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.array]),
+	    first: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.array]),
+	    last: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.array])
+	  }),
 	  wrap: _react.PropTypes.bool,
 	  stringSearch: _react.PropTypes.bool,
 	  stringSearchDelay: _react.PropTypes.number,
-	  onSelection: _react.PropTypes.func.isRequired,
-	  closeOnSelection: _react.PropTypes.bool
+	  openPopoverOn: _react.PropTypes.oneOf(['tap', 'hover']),
+	  closeOnOutsideClick: _react.PropTypes.bool,
+	  closeOnItemSelection: _react.PropTypes.bool,
+	  onPopoverOpen: _react.PropTypes.func,
+	  onPopoverClose: _react.PropTypes.func,
+	  onItemSelection: _react.PropTypes.func
 	};
@@ -147,3 +168,43 @@
 
-	  function AriaManager() {
+	  _createClass(AriaManager, null, [{
+	    key: 'childContextTypes',
+	    value: {
+	      ariaManager: _react.PropTypes.object.isRequired
+	    },
+	    enumerable: true
+	  }, {
+	    key: 'propTypes',
+	    value: checkedProps,
+	    enumerable: true
+	  }, {
+	    key: 'defaultProps',
+	    value: {
+	      tag: 'div',
+	      trapFocus: false,
+	      keybindings: {
+	        next: [{ keyCode: KEYS.arrowDown }, { keyCode: KEYS.arrowRight }],
+	        prev: [{ keyCode: KEYS.arrowUp }, { keyCode: KEYS.arrowLeft }],
+	        first: { keyCode: KEYS.home },
+	        last: { keyCode: KEYS.end }
+	      },
+	      wrap: true,
+	      stringSearch: true,
+	      stringSearchDelay: 600,
+	      openPopoverOn: 'tap',
+	      closeOnOutsideClick: true,
+	      closeOnItemSelection: true,
+	      onPopoverOpen: function onPopoverOpen() {
+	        return null;
+	      },
+	      onPopoverClose: function onPopoverClose() {
+	        return null;
+	      },
+	      onItemSelection: function onItemSelection() {
+	        return null;
+	      }
+	    },
+	    enumerable: true
+	  }]);
+
+	  function AriaManager(props) {
 	    var _this = this;
@@ -153,18 +214,10 @@
 
-	    _get(Object.getPrototypeOf(AriaManager.prototype), 'constructor', this).apply(this, arguments);
+	    _get(Object.getPrototypeOf(AriaManager.prototype), 'constructor', this).call(this, props);
 
-	    this.state = {
-	      isOpen: false
-	    };
-	    this._focusGroup = (0, _focusGroup2['default'])(this.props);
-	    this._toggle = null;
-	    this._menu = null;
-	    this._items = [];
-
-	    this._setToggle = function (node) {
+	    this._setToggleNode = function (node) {
 	      _this._toggle = node;
 	    };
 
-	    this._setMenu = function (node) {
-	      _this._menu = node;
+	    this._setPopoverNode = function (node) {
+	      _this._popover = node;
 	    };
@@ -193,4 +246,4 @@
 
-	    this._openMenu = function () {
-	      var focusMenu = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
+	    this._openPopover = function () {
+	      var focusPopover = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
 
@@ -201,10 +254,15 @@ if (_this.state.isOpen) return;
 
+	      _this.props.onPopoverOpen();
+
 	      _this._focusGroup.activate();
 
-	      if (focusMenu) {
-	        _this._focusItem(0);
+	      if (focusPopover) {
+	        // setTimeout allows animated popovers to still focus
+	        setTimeout(function () {
+	          _this._focusItem(0);
+	        }, 60);
 	      }
 	    };
 
-	    this._closeMenu = function () {
+	    this._closePopover = function () {
 	      var focusToggle = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
@@ -216,2 +274,4 @@
 
+	      _this.props.onPopoverClose();
+
 	      _this._focusGroup.deactivate();
@@ -224,9 +284,17 @@
 
-	    this._toggleMenu = function () {
+	    this._togglePopover = function (focus) {
 	      if (!_this.state.isOpen) {
-	        _this._openMenu();
+	        _this._openPopover(focus);
 	      } else {
-	        _this._closeMenu();
+	        _this._closePopover(focus);
 	      }
 	    };
+
+	    this.state = {
+	      isOpen: false
+	    };
+	    this._focusGroup = (0, _focusGroup2['default'])(props);
+	    this._toggle = null;
+	    this._popover = null;
+	    this._items = [];
 	  }
@@ -239,6 +307,8 @@
 	        ariaManager: {
+	          trapFocus: this.props.trapFocus,
+	          initialFocus: this.props.initialFocus,
 	          isOpen: this.state.isOpen,
-	          onSelection: this._onSelection,
-	          setToggle: this._setToggle,
-	          setMenu: this._setMenu,
+	          onItemSelection: this._onItemSelection,
+	          setToggleNode: this._setToggleNode,
+	          setPopoverNode: this._setPopoverNode,
 	          addItem: this._addItem,
@@ -248,5 +318,5 @@ removeItem: this._removeItem,
 	          focusItem: this._focusItem,
-	          openMenu: this._openMenu,
-	          closeMenu: this._closeMenu,
-	          toggleMenu: this._toggleMenu
+	          openPopover: this._openPopover,
+	          closePopover: this._closePopover,
+	          togglePopover: this._togglePopover
 	        }
@@ -258,3 +328,3 @@ };
 	    value: function componentWillMount() {
-	      _eventsHandler2['default'].add(this);
+	      _eventsHandler2['default'].add(this, this.props.openPopoverOn);
 	    }
@@ -266,3 +336,3 @@ }, {
 	      this._toggle = null;
-	      this._menu = null;
+	      this._popover = null;
 	      this._items = [];
@@ -275,2 +345,19 @@
 	    value: function _onTap(e) {
+	      if (this.props.openPopoverOn === 'tap') {
+	        this._handleTapOrHover(e);
+	      }
+	    }
+	  }, {
+	    key: '_onHover',
+	    value: function _onHover(e) {
+	      if (this.props.openPopoverOn === 'hover') {
+	        this._handleTapOrHover(e);
+	      }
+	    }
+	  }, {
+	    key: '_handleTapOrHover',
+	    value: function _handleTapOrHover(e) {
+	      var _props = this.props;
+	      var openPopoverOn = _props.openPopoverOn;
+	      var closeOnOutsideClick = _props.closeOnOutsideClick;
 	      var target = e.target;
@@ -281,5 +368,9 @@
 	      if (isTarget(this._toggle, target) && toggleDisabled === null) {
-	        this._toggleMenu();
-	      } else if (this._menu && !isTarget(this._menu, target)) {
-	        this._closeMenu(false);
+	        if (openPopoverOn === 'tap') {
+	          this._togglePopover(false);
+	        } else {
+	          this._openPopover(false);
+	        }
+	      } else if (closeOnOutsideClick && this._popover && !isTarget(this._popover, target)) {
+	        this._closePopover(false);
 	      } else {
@@ -289,3 +380,3 @@ for (var i = this._items.length; i--;) {
 	          if (item.node === target) {
-	            this._onSelection(item, e);
+	            this._onItemSelection(item, e);
 	          }
@@ -298,12 +389,12 @@ }
 	    value: function _onKeyDown(e) {
-	      var key = e.key;
+	      var keyCode = e.keyCode;
 	      var target = e.target;
 
 	      if (this.state.isOpen) {
-	        if (key === 'Tab') {
-	          this._closeMenu(false);
-	        } else if (key === 'Escape') {
+	        if (!this.props.trapFocus && keyCode === KEYS.tab) {
+	          this._closePopover(false);
+	        } else if (keyCode === KEYS.escape) {
 	          e.preventDefault();
-	          this._closeMenu();
-	        } else if (['Enter', ' '].indexOf(key) > -1) {
+	          this._closePopover();
+	        } else if ([KEYS.enter, KEYS.space].indexOf(keyCode) > -1) {
 	          for (var i = this._items.length; i--;) {
@@ -313,10 +404,10 @@ var item = this._items[i];
 	              e.preventDefault();
-	              this._onSelection(item, e);
+	              this._onItemSelection(item, e);
 	            }
 	          }
 	        }
-	      } else if (['ArrowUp', 'ArrowDown', 'Enter', ' '].indexOf(key) > -1) {
+	      } else if ([KEYS.arrowUp, KEYS.arrowDown, KEYS.enter, KEYS.space].indexOf(keyCode) > -1) {
 	        if (isTarget(this._toggle, target)) {
 	          e.preventDefault();
-	          this._openMenu();
+	          this._openPopover();
 	        }
@@ -326,11 +417,11 @@ }
 	  }, {
-	    key: '_onSelection',
-	    value: function _onSelection(item, e) {
+	    key: '_onItemSelection',
+	    value: function _onItemSelection(item, e) {
 	      var value = item.value || item.node.innerHTML;
 
-	      if (this.props.closeOnSelection) {
-	        this._closeMenu();
+	      if (this.props.closeOnItemSelection) {
+	        this._closePopover();
 	      }
 
-	      this.props.onSelection(value, e);
+	      this.props.onItemSelection(value, e);
 	    }
@@ -340,38 +431,14 @@ }, {
 	    value: function render() {
-	      var _props = this.props;
-	      var tag = _props.tag;
-	      var children = _props.children;
+	      var _props2 = this.props;
+	      var tag = _props2.tag;
+	      var children = _props2.children;
 
 	      var props = (0, _specialAssign2['default'])({}, this.props, checkedProps);
+
 	      if (typeof children === 'function') {
 	        return children(this.state.isOpen);
 	      }
+
 	      return (0, _react.createElement)(tag, props, children);
 	    }
-	  }], [{
-	    key: 'childContextTypes',
-	    value: {
-	      ariaManager: _react.PropTypes.object.isRequired
-	    },
-	    enumerable: true
-	  }, {
-	    key: 'propTypes',
-	    value: checkedProps,
-	    enumerable: true
-	  }, {
-	    key: 'defaultProps',
-	    value: {
-	      tag: 'div',
-	      stringSearch: true,
-	      forwardArrows: ['right', 'down'],
-	      backArrows: ['left', 'up'],
-	      wrap: true,
-	      stringSearch: true,
-	      stringSearchDelay: 600,
-	      onSelection: function onSelection() {
-	        return null;
-	      },
-	      closeOnSelection: true
-	    },
-	    enumerable: true
 	  }]);
@@ -395,238 +462,4 @@
 
-	'use strict';
+	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
 
-	function FocusGroup(options) {
-	  options = options || {};
-	  this._settings = {
-	    forwardArrows: options.forwardArrows || ['down'],
-	    backArrows: options.backArrows || ['up'],
-	    wrap: options.wrap,
-	    stringSearch: options.stringSearch,
-	    stringSearchDelay: 800
-	  };
-	  this._searchString = '';
-	  this._members = [];
-	  if (options.members) this.setMembers(options.members);
-	  this._boundHandleKeydownEvent = this._handleKeydownEvent.bind(this);
-	}
-
-	FocusGroup.prototype.activate = function () {
-	  // Use capture in case other libraries might grab it first -- i.e. React
-	  document.addEventListener('keydown', this._boundHandleKeydownEvent, true);
-	  return this;
-	};
-
-	FocusGroup.prototype.deactivate = function () {
-	  document.removeEventListener('keydown', this._boundHandleKeydownEvent, true);
-	  this._clearSearchStringRefreshTimer();
-	  return this;
-	};
-
-	FocusGroup.prototype._handleKeydownEvent = function (event) {
-	  // Only respond to keyboard events when
-	  // focus is already within the focus-group
-	  var activeElementIndex = this._getActiveElementIndex();
-	  if (activeElementIndex === -1) return;
-
-	  var arrow = getEventArrowKey(event);
-
-	  if (!arrow) {
-	    this._handleNonArrowKey(event);
-	    return;
-	  }
-
-	  if (this._settings.forwardArrows.indexOf(arrow) !== -1) {
-	    event.preventDefault();
-	    this.moveFocusForward();
-	    return;
-	  }
-
-	  if (this._settings.backArrows.indexOf(arrow) !== -1) {
-	    event.preventDefault();
-	    this.moveFocusBack();
-	    return;
-	  }
-	};
-
-	FocusGroup.prototype.moveFocusForward = function () {
-	  var activeElementIndex = this._getActiveElementIndex();
-	  var targetIndex;
-	  if (activeElementIndex < this._members.length - 1) {
-	    targetIndex = activeElementIndex + 1;
-	  } else if (this._settings.wrap) {
-	    targetIndex = 0;
-	  } else {
-	    targetIndex = activeElementIndex;
-	  }
-	  this.focusNodeAtIndex(targetIndex);
-	  return targetIndex;
-	};
-
-	FocusGroup.prototype.moveFocusBack = function () {
-	  var activeElementIndex = this._getActiveElementIndex();
-	  var targetIndex;
-	  if (activeElementIndex > 0) {
-	    targetIndex = activeElementIndex - 1;
-	  } else if (this._settings.wrap) {
-	    targetIndex = this._members.length - 1;
-	  } else {
-	    targetIndex = activeElementIndex;
-	  }
-	  this.focusNodeAtIndex(targetIndex);
-	  return targetIndex;
-	};
-
-	FocusGroup.prototype._handleNonArrowKey = function (event) {
-	  if (!this._settings.stringSearch) return;
-
-	  // While a string search is underway, ignore spaces
-	  // and prevent the default space-key behavior
-	  if (this._searchString !== '' && (event.key === ' ' || event.keyCode === 32)) {
-	    event.preventDefault();
-	    return -1;
-	  }
-
-	  // Only respond to letter keys
-	  if (!isLetterKeyCode(event.keyCode)) return -1;
-
-	  // If the letter key is part of a key combo,
-	  // let it do whatever it was going to do
-	  if (event.ctrlKey || event.metaKey || event.altKey) return -1;
-
-	  event.preventDefault();
-
-	  this._addToSearchString(String.fromCharCode(event.keyCode));
-	  this._runStringSearch();
-	};
-
-	FocusGroup.prototype._clearSearchString = function () {
-	  this._searchString = '';
-	};
-
-	FocusGroup.prototype._addToSearchString = function (letter) {
-	  // Always store the lowercase version of the letter
-	  this._searchString += letter.toLowerCase();
-	};
-
-	FocusGroup.prototype._startSearchStringRefreshTimer = function () {
-	  var self = this;
-	  this._clearSearchStringRefreshTimer();
-	  this._stringSearchTimer = setTimeout(function () {
-	    self._clearSearchString();
-	  }, this._settings.stringSearchDelay);
-	};
-
-	FocusGroup.prototype._clearSearchStringRefreshTimer = function () {
-	  clearTimeout(this._stringSearchTimer);
-	};
-
-	FocusGroup.prototype._runStringSearch = function () {
-	  this._startSearchStringRefreshTimer();
-	  this.moveFocusByString(this._searchString);
-	};
-
-	FocusGroup.prototype.moveFocusByString = function (str) {
-	  var member;
-	  for (var i = 0, l = this._members.length; i < l; i++) {
-	    member = this._members[i];
-	    if (!member.text) continue;
-
-	    if (member.text.indexOf(str) === 0) {
-	      return focusNode(member.node);
-	    }
-	  }
-	};
-
-	FocusGroup.prototype._findIndexOfNode = function (searchNode) {
-	  for (var i = 0, l = this._members.length; i < l; i++) {
-	    if (this._members[i].node === searchNode) {
-	      return i;
-	    }
-	  }
-	  return -1;
-	};
-
-	FocusGroup.prototype._getActiveElementIndex = function () {
-	  return this._findIndexOfNode(document.activeElement);
-	};
-
-	FocusGroup.prototype.focusNodeAtIndex = function (index) {
-	  var member = this._members[index];
-	  if (member) focusNode(member.node);
-	  return this;
-	};
-
-	FocusGroup.prototype.addMember = function (member, index) {
-	  var node = member.node || member;
-	  var nodeText = member.text || node.getAttribute('data-focus-group-text') || node.textContent || '';
-
-	  this._checkNode(node);
-
-	  var cleanedNodeText = nodeText.replace(/[\W_]/g, '').toLowerCase();
-	  var member = {
-	    node: node,
-	    text: cleanedNodeText
-	  };
-
-	  if (index !== null && index !== undefined) {
-	    this._members.splice(index, 0, member);
-	  } else {
-	    this._members.push(member);
-	  }
-	  return this;
-	};
-
-	FocusGroup.prototype.removeMember = function (member) {
-	  var removalIndex = typeof member === 'number' ? member : this._findIndexOfNode(member);
-	  if (removalIndex === -1) return;
-	  this._members.splice(removalIndex, 1);
-	  return this;
-	};
-
-	FocusGroup.prototype.clearMembers = function () {
-	  this._members = [];
-	  return this;
-	};
-
-	FocusGroup.prototype.setMembers = function (nextMembers) {
-	  this.clearMembers();
-	  for (var i = 0, l = nextMembers.length; i < l; i++) {
-	    this.addMember(nextMembers[i]);
-	  }
-	  return this;
-	};
-
-	FocusGroup.prototype.getMembers = function () {
-	  return this._members;
-	};
-
-	FocusGroup.prototype._checkNode = function (node) {
-	  if (!node.nodeType || node.nodeType !== window.Node.ELEMENT_NODE) {
-	    throw new Error('focus-group: only DOM nodes allowed');
-	  }
-	  return node;
-	};
-
-	function getEventArrowKey(event) {
-	  if (event.key === 'ArrowUp' || event.keyCode === 38) return 'up';
-	  if (event.key === 'ArrowDown' || event.keyCode === 40) return 'down';
-	  if (event.key === 'ArrowLeft' || event.keyCode === 37) return 'left';
-	  if (event.key === 'ArrowRight' || event.keyCode === 39) return 'right';
-	  return null;
-	}
-
-	function isLetterKeyCode(keyCode) {
-	  return keyCode >= 65 && keyCode <= 90;
-	}
-
-	function focusNode(node) {
-	  if (!node || !node.focus) return;
-	  node.focus();
-	  if (node.tagName.toLowerCase() === 'input') node.select();
-	}
-
-	module.exports = function createFocusGroup(options) {
-	  return new FocusGroup(options);
-	};
-
 /***/ },
@@ -675,2 +508,3 @@ /* 4 */
 	    this._tapListener = (0, _teenyTap2['default'])(document.documentElement, this._documentEvent.bind(this, '_onTap'));
+	    document.addEventListener('mouseover', this._documentEvent.bind(this, '_onHover'));
 	    document.addEventListener('keydown', this._documentEvent.bind(this, '_onKeyDown'));
@@ -681,2 +515,3 @@ },
 	    this._tapListener.remove();
+	    document.removeEventListener('mouseover', this._documentEvent);
 	    document.removeEventListener('keydown', this._documentEvent);
@@ -697,78 +532,4 @@ },
 
-	'use strict';
+	module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
 
-	module.exports = function createTapListener(el, callback, useCapture) {
-	  var startX = 0;
-	  var startY = 0;
-	  var touchStarted = false;
-	  var touchMoved = false;
-	  // Assume that if a touchstart event initiates, the user is
-	  // using touch and click events should be ignored.
-	  // If this isn't done, touch-clicks will fire the callback
-	  // twice: once on touchend, once on the subsequent "click".
-	  var usingTouch = false;
-
-	  el.addEventListener('click', handleClick, useCapture);
-	  el.addEventListener('touchstart', handleTouchstart, useCapture);
-
-	  function handleClick(e) {
-	    if (usingTouch) return;
-	    callback(e);
-	  }
-
-	  function handleTouchstart(e) {
-	    usingTouch = true;
-
-	    if (touchStarted) return;
-	    touchStarted = true;
-
-	    el.addEventListener('touchmove', handleTouchmove, useCapture);
-	    el.addEventListener('touchend', handleTouchend, useCapture);
-	    el.addEventListener('touchcancel', handleTouchcancel, useCapture);
-
-	    touchMoved = false;
-	    startX = e.touches[0].clientX;
-	    startY = e.touches[0].clientY;
-	  }
-
-	  function handleTouchmove(e) {
-	    if (touchMoved) return;
-
-	    if (Math.abs(e.touches[0].clientX - startX) <= 10 && Math.abs(e.touches[0].clientY - startY) <= 10) return;
-
-	    touchMoved = true;
-	  }
-
-	  function handleTouchend(e) {
-	    touchStarted = false;
-	    removeSecondaryTouchListeners();
-	    if (!touchMoved) {
-	      callback(e);
-	    }
-	  }
-
-	  function handleTouchcancel() {
-	    touchStarted = false;
-	    touchMoved = false;
-	    startX = 0;
-	    startY = 0;
-	  }
-
-	  function removeSecondaryTouchListeners() {
-	    el.removeEventListener('touchmove', handleTouchmove, useCapture);
-	    el.removeEventListener('touchend', handleTouchend, useCapture);
-	    el.removeEventListener('touchcancel', handleTouchcancel, useCapture);
-	  }
-
-	  function removeTapListener() {
-	    el.removeEventListener('click', handleClick, useCapture);
-	    el.removeEventListener('touchstart', handleTouchstart, useCapture);
-	    removeSecondaryTouchListeners();
-	  }
-
-	  return {
-	    remove: removeTapListener
-	  };
-	};
-
 /***/ },
@@ -829,18 +590,18 @@ /* 6 */
 	  tag: _react.PropTypes.string,
-	  children: _react.PropTypes.node.isRequired
+	  children: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.node]).isRequired
 	};
 
-	var Toggle = (function (_Component) {
-	  _inherits(Toggle, _Component);
+	var AriaToggle = (function (_Component) {
+	  _inherits(AriaToggle, _Component);
 
-	  function Toggle() {
-	    _classCallCheck(this, Toggle);
+	  function AriaToggle() {
+	    _classCallCheck(this, AriaToggle);
 
-	    _get(Object.getPrototypeOf(Toggle.prototype), 'constructor', this).apply(this, arguments);
+	    _get(Object.getPrototypeOf(AriaToggle.prototype), 'constructor', this).apply(this, arguments);
 	  }
 
-	  _createClass(Toggle, [{
+	  _createClass(AriaToggle, [{
 	    key: 'componentDidMount',
 	    value: function componentDidMount() {
-	      this.context.ariaManager.setToggle((0, _reactDom.findDOMNode)(this));
+	      this.context.ariaManager.setToggleNode((0, _reactDom.findDOMNode)(this));
 	    }
@@ -863,2 +624,6 @@ }, {
 
+	      if (typeof children === 'function') {
+	        return children(props);
+	      }
+
 	      return (0, _react.createElement)(tag, props, children);
@@ -873,2 +638,6 @@ }
 	  }, {
+	    key: 'propTypes',
+	    value: checkedProps,
+	    enumerable: true
+	  }, {
 	    key: 'defaultProps',
@@ -881,6 +650,6 @@ value: {
 
-	  return Toggle;
+	  return AriaToggle;
 	})(_react.Component);
 
-	exports['default'] = Toggle;
+	exports['default'] = AriaToggle;
 	module.exports = exports['default'];
@@ -922,2 +691,6 @@
 
+	var _focusTrap = __webpack_require__(10);
+
+	var _focusTrap2 = _interopRequireDefault(_focusTrap);
+
 	var _specialAssign = __webpack_require__(6);
@@ -929,30 +702,50 @@
 	  tag: _react.PropTypes.string,
-	  children: _react.PropTypes.node.isRequired
+	  children: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.node]).isRequired
 	};
 
-	var Menu = (function (_Component) {
-	  _inherits(Menu, _Component);
+	var AriaPopover = (function (_Component) {
+	  _inherits(AriaPopover, _Component);
 
-	  function Menu() {
-	    _classCallCheck(this, Menu);
+	  function AriaPopover() {
+	    _classCallCheck(this, AriaPopover);
 
-	    _get(Object.getPrototypeOf(Menu.prototype), 'constructor', this).apply(this, arguments);
+	    _get(Object.getPrototypeOf(AriaPopover.prototype), 'constructor', this).apply(this, arguments);
 	  }
 
-	  _createClass(Menu, [{
+	  _createClass(AriaPopover, [{
 	    key: 'componentDidMount',
 	    value: function componentDidMount() {
-	      this._setMenuNode();
+	      var _context$ariaManager = this.context.ariaManager;
+	      var trapFocus = _context$ariaManager.trapFocus;
+	      var initialFocus = _context$ariaManager.initialFocus;
+	      var onClickOutside = _context$ariaManager.onClickOutside;
+
+	      this._setPopoverNode();
+
+	      if (trapFocus) {
+	        this._focusTrap = (0, _focusTrap2['default'])((0, _reactDom.findDOMNode)(this), {
+	          initialFocus: initialFocus,
+	          escapeDeactivates: false,
+	          clickOutsideDeactivates: true
+	        }).activate();
+	      }
 	    }
 	  }, {
+	    key: 'componentWillUnmount',
+	    value: function componentWillUnmount() {
+	      if (this.context.ariaManager.trapFocus) {
+	        this._focusTrap.deactivate();
+	      }
+	    }
+	  }, {
 	    key: 'componentDidUpdate',
 	    value: function componentDidUpdate(lastProps, lastState, lastContext) {
 	      if (this.context.ariaManager.isOpen !== lastContext.ariaManager.isOpen) {
-	        this._setMenuNode();
+	        this._setPopoverNode();
 	      }
 	    }
 	  }, {
-	    key: '_setMenuNode',
-	    value: function _setMenuNode() {
-	      this.context.ariaManager.setMenu((0, _reactDom.findDOMNode)(this));
+	    key: '_setPopoverNode',
+	    value: function _setPopoverNode() {
+	      this.context.ariaManager.setPopoverNode((0, _reactDom.findDOMNode)(this));
 	    }
@@ -966,6 +759,8 @@ }, {
 
-	      var props = (0, _specialAssign2['default'])({
-	        role: 'menu'
-	      }, this.props, checkedProps);
+	      var props = (0, _specialAssign2['default'])({}, this.props, checkedProps);
 
+	      if (typeof children === 'function') {
+	        return children(props);
+	      }
+
 	      return (0, _react.createElement)(tag, props, children);
@@ -980,2 +775,6 @@ }
 	  }, {
+	    key: 'propTypes',
+	    value: checkedProps,
+	    enumerable: true
+	  }, {
 	    key: 'defaultProps',
@@ -988,6 +787,6 @@ value: {
 
-	  return Menu;
+	  return AriaPopover;
 	})(_react.Component);
 
-	exports['default'] = Menu;
+	exports['default'] = AriaPopover;
 	module.exports = exports['default'];
@@ -997,2 +796,8 @@
 /* 10 */
+/***/ function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+
+/***/ },
+/* 11 */
 /***/ function(module, exports, __webpack_require__) {
@@ -1030,15 +835,15 @@
 	  tag: _react.PropTypes.string,
-	  children: _react.PropTypes.node.isRequired
+	  children: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.node]).isRequired
 	};
 
-	var MenuItem = (function (_Component) {
-	  _inherits(MenuItem, _Component);
+	var AriaItem = (function (_Component) {
+	  _inherits(AriaItem, _Component);
 
-	  function MenuItem() {
-	    _classCallCheck(this, MenuItem);
+	  function AriaItem() {
+	    _classCallCheck(this, AriaItem);
 
-	    _get(Object.getPrototypeOf(MenuItem.prototype), 'constructor', this).apply(this, arguments);
+	    _get(Object.getPrototypeOf(AriaItem.prototype), 'constructor', this).apply(this, arguments);
 	  }
 
-	  _createClass(MenuItem, [{
+	  _createClass(AriaItem, [{
 	    key: 'componentDidMount',
@@ -1070,2 +875,6 @@ value: function componentDidMount() {
 
+	      if (typeof children === 'function') {
+	        return children(props);
+	      }
+
 	      return (0, _react.createElement)(tag, props, children);
@@ -1080,2 +889,6 @@ }
 	  }, {
+	    key: 'propTypes',
+	    value: checkedProps,
+	    enumerable: true
+	  }, {
 	    key: 'defaultProps',
@@ -1088,6 +901,6 @@ value: {
 
-	  return MenuItem;
+	  return AriaItem;
 	})(_react.Component);
 
-	exports['default'] = MenuItem;
+	exports['default'] = AriaItem;
 	module.exports = exports['default'];
@@ -1094,0 +907,0 @@

dist/react-aria.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactARIA=t(require("React"),require("ReactDOM")):e.ReactARIA=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),i=r(o);t.AriaManager=i["default"];var u=n(7),s=r(u);t.Toggle=s["default"];var a=n(9),c=r(a);t.Menu=c["default"];var l=n(10),f=r(l);t.MenuItem=f["default"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,i=t,u=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,i);if(void 0!==s){if("value"in s)return s.value;var a=s.get;if(void 0===a)return;return a.call(u)}var c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=i,n=u,r=!0,s=c=void 0}},a=n(2),c=(r(a),n(3)),l=r(c),f=n(4),p=r(f),d=n(6),h=r(d),v=function(e,t){return e===t||e.contains(t)},y={tag:a.PropTypes.string,children:a.PropTypes.oneOfType([a.PropTypes.func,a.PropTypes.node]).isRequired,stringSearch:a.PropTypes.bool,forwardArrows:a.PropTypes.arrayOf(a.PropTypes.string),backArrows:a.PropTypes.arrayOf(a.PropTypes.string),wrap:a.PropTypes.bool,stringSearch:a.PropTypes.bool,stringSearchDelay:a.PropTypes.number,onSelection:a.PropTypes.func.isRequired,closeOnSelection:a.PropTypes.bool},_=function(e){function t(){var e=this;o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state={isOpen:!1},this._focusGroup=(0,l["default"])(this.props),this._toggle=null,this._menu=null,this._items=[],this._setToggle=function(t){e._toggle=t},this._setMenu=function(t){e._menu=t},this._addItem=function(t){e._items.push(t),e._focusGroup.addMember(t)},this._removeItem=function(t){var n=e._items.indexOf(t);n>-1&&e._items.splice(n,1),e._focusGroup.removeMember(t)},this._clearItems=function(){e._focusGroup.clearMembers()},this._focusItem=function(t){e._focusGroup.focusNodeAtIndex(t)},this._openMenu=function(){var t=arguments.length<=0||void 0===arguments[0]||arguments[0];e.state.isOpen||(e.setState({isOpen:!0}),e._focusGroup.activate(),t&&e._focusItem(0))},this._closeMenu=function(){var t=arguments.length<=0||void 0===arguments[0]||arguments[0];e.state.isOpen&&(e.setState({isOpen:!1}),e._focusGroup.deactivate(),t&&e._toggle.focus())},this._toggleMenu=function(){e.state.isOpen?e._closeMenu():e._openMenu()}}return i(t,e),u(t,[{key:"getChildContext",value:function(){return{ariaManager:{isOpen:this.state.isOpen,onSelection:this._onSelection,setToggle:this._setToggle,setMenu:this._setMenu,addItem:this._addItem,removeItem:this._removeItem,clearItems:this._clearItems,focusItem:this._focusItem,openMenu:this._openMenu,closeMenu:this._closeMenu,toggleMenu:this._toggleMenu}}}},{key:"componentWillMount",value:function(){p["default"].add(this)}},{key:"componentWillUnmount",value:function(){this._focusGroup.deactivate(),this._toggle=null,this._menu=null,this._items=[],p["default"].remove(this)}},{key:"_onTap",value:function(e){var t=e.target,n=this._toggle.getAttribute("disabled");if(v(this._toggle,t)&&null===n)this._toggleMenu();else if(this._menu&&!v(this._menu,t))this._closeMenu(!1);else for(var r=this._items.length;r--;){var o=this._items[r];o.node===t&&this._onSelection(o,e)}}},{key:"_onKeyDown",value:function(e){var t=e.key,n=e.target;if(this.state.isOpen){if("Tab"===t)this._closeMenu(!1);else if("Escape"===t)e.preventDefault(),this._closeMenu();else if(["Enter"," "].indexOf(t)>-1)for(var r=this._items.length;r--;){var o=this._items[r];o.node===n&&(e.preventDefault(),this._onSelection(o,e))}}else["ArrowUp","ArrowDown","Enter"," "].indexOf(t)>-1&&v(this._toggle,n)&&(e.preventDefault(),this._openMenu())}},{key:"_onSelection",value:function(e,t){var n=e.value||e.node.innerHTML;this.props.closeOnSelection&&this._closeMenu(),this.props.onSelection(n,t)}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.children,r=(0,h["default"])({},this.props,y);return"function"==typeof n?n(this.state.isOpen):(0,a.createElement)(t,r,n)}}],[{key:"childContextTypes",value:{ariaManager:a.PropTypes.object.isRequired},enumerable:!0},{key:"propTypes",value:y,enumerable:!0},{key:"defaultProps",value:{tag:"div",stringSearch:!0,forwardArrows:["right","down"],backArrows:["left","up"],wrap:!0,stringSearch:!0,stringSearchDelay:600,onSelection:function(){return null},closeOnSelection:!0},enumerable:!0}]),t}(a.Component);t["default"]=_,e.exports=t["default"]},function(t,n){t.exports=e},function(e,t){"use strict";function n(e){e=e||{},this._settings={forwardArrows:e.forwardArrows||["down"],backArrows:e.backArrows||["up"],wrap:e.wrap,stringSearch:e.stringSearch,stringSearchDelay:800},this._searchString="",this._members=[],e.members&&this.setMembers(e.members),this._boundHandleKeydownEvent=this._handleKeydownEvent.bind(this)}function r(e){return"ArrowUp"===e.key||38===e.keyCode?"up":"ArrowDown"===e.key||40===e.keyCode?"down":"ArrowLeft"===e.key||37===e.keyCode?"left":"ArrowRight"===e.key||39===e.keyCode?"right":null}function o(e){return e>=65&&e<=90}function i(e){e&&e.focus&&(e.focus(),"input"===e.tagName.toLowerCase()&&e.select())}n.prototype.activate=function(){return document.addEventListener("keydown",this._boundHandleKeydownEvent,!0),this},n.prototype.deactivate=function(){return document.removeEventListener("keydown",this._boundHandleKeydownEvent,!0),this._clearSearchStringRefreshTimer(),this},n.prototype._handleKeydownEvent=function(e){var t=this._getActiveElementIndex();if(t!==-1){var n=r(e);return n?this._settings.forwardArrows.indexOf(n)!==-1?(e.preventDefault(),void this.moveFocusForward()):this._settings.backArrows.indexOf(n)!==-1?(e.preventDefault(),void this.moveFocusBack()):void 0:void this._handleNonArrowKey(e)}},n.prototype.moveFocusForward=function(){var e,t=this._getActiveElementIndex();return e=t<this._members.length-1?t+1:this._settings.wrap?0:t,this.focusNodeAtIndex(e),e},n.prototype.moveFocusBack=function(){var e,t=this._getActiveElementIndex();return e=t>0?t-1:this._settings.wrap?this._members.length-1:t,this.focusNodeAtIndex(e),e},n.prototype._handleNonArrowKey=function(e){if(this._settings.stringSearch){if(""!==this._searchString&&(" "===e.key||32===e.keyCode))return e.preventDefault(),-1;if(!o(e.keyCode))return-1;if(e.ctrlKey||e.metaKey||e.altKey)return-1;e.preventDefault(),this._addToSearchString(String.fromCharCode(e.keyCode)),this._runStringSearch()}},n.prototype._clearSearchString=function(){this._searchString=""},n.prototype._addToSearchString=function(e){this._searchString+=e.toLowerCase()},n.prototype._startSearchStringRefreshTimer=function(){var e=this;this._clearSearchStringRefreshTimer(),this._stringSearchTimer=setTimeout(function(){e._clearSearchString()},this._settings.stringSearchDelay)},n.prototype._clearSearchStringRefreshTimer=function(){clearTimeout(this._stringSearchTimer)},n.prototype._runStringSearch=function(){this._startSearchStringRefreshTimer(),this.moveFocusByString(this._searchString)},n.prototype.moveFocusByString=function(e){for(var t,n=0,r=this._members.length;n<r;n++)if(t=this._members[n],t.text&&0===t.text.indexOf(e))return i(t.node)},n.prototype._findIndexOfNode=function(e){for(var t=0,n=this._members.length;t<n;t++)if(this._members[t].node===e)return t;return-1},n.prototype._getActiveElementIndex=function(){return this._findIndexOfNode(document.activeElement)},n.prototype.focusNodeAtIndex=function(e){var t=this._members[e];return t&&i(t.node),this},n.prototype.addMember=function(e,t){var n=e.node||e,r=e.text||n.getAttribute("data-focus-group-text")||n.textContent||"";this._checkNode(n);var o=r.replace(/[\W_]/g,"").toLowerCase(),e={node:n,text:o};return null!==t&&void 0!==t?this._members.splice(t,0,e):this._members.push(e),this},n.prototype.removeMember=function(e){var t="number"==typeof e?e:this._findIndexOfNode(e);if(t!==-1)return this._members.splice(t,1),this},n.prototype.clearMembers=function(){return this._members=[],this},n.prototype.setMembers=function(e){this.clearMembers();for(var t=0,n=e.length;t<n;t++)this.addMember(e[t]);return this},n.prototype.getMembers=function(){return this._members},n.prototype._checkNode=function(e){if(!e.nodeType||e.nodeType!==window.Node.ELEMENT_NODE)throw new Error("focus-group: only DOM nodes allowed");return e},e.exports=function(e){return new n(e)}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),i=r(o);t["default"]={_queue:[],add:function(e){this._queue.push(e),1===this._queue.length&&this._attachListeners()},remove:function(e){var t=this._queue.indexOf(e);t>-1&&this._queue.splice(t,1),this._queue.length<=0&&this._detachListeners()},_attachListeners:function(){this._tapListener=(0,i["default"])(document.documentElement,this._documentEvent.bind(this,"_onTap")),document.addEventListener("keydown",this._documentEvent.bind(this,"_onKeyDown"))},_detachListeners:function(){this._tapListener.remove(),document.removeEventListener("keydown",this._documentEvent)},_documentEvent:function(e,t){for(var n=this._queue.length;n--;)this._queue[n][e](t)}},e.exports=t["default"]},function(e,t){"use strict";e.exports=function(e,t,n){function r(e){h||t(e)}function o(t){h=!0,p||(p=!0,e.addEventListener("touchmove",i,n),e.addEventListener("touchend",u,n),e.addEventListener("touchcancel",s,n),d=!1,l=t.touches[0].clientX,f=t.touches[0].clientY)}function i(e){d||Math.abs(e.touches[0].clientX-l)<=10&&Math.abs(e.touches[0].clientY-f)<=10||(d=!0)}function u(e){p=!1,a(),d||t(e)}function s(){p=!1,d=!1,l=0,f=0}function a(){e.removeEventListener("touchmove",i,n),e.removeEventListener("touchend",u,n),e.removeEventListener("touchcancel",s,n)}function c(){e.removeEventListener("click",r,n),e.removeEventListener("touchstart",o,n),a()}var l=0,f=0,p=!1,d=!1,h=!1;return e.addEventListener("click",r,n),e.addEventListener("touchstart",o,n),{remove:c}}},function(e,t){"use strict";function n(e,t,n){for(var r in t)t.hasOwnProperty(r)&&!n[r]&&(e[r]=t[r]);return e}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n,e.exports=t["default"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,i=t,u=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,i);if(void 0!==s){if("value"in s)return s.value;var a=s.get;if(void 0===a)return;return a.call(u)}var c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=i,n=u,r=!0,s=c=void 0}},a=n(2),c=(r(a),n(8)),l=(r(c),n(6)),f=r(l),p={tag:a.PropTypes.string,children:a.PropTypes.node.isRequired},d=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){this.context.ariaManager.setToggle((0,c.findDOMNode)(this))}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.disabled,r=e.children,o=(0,f["default"])({role:"button",tabIndex:n?"":"0","aria-haspopup":!0,"aria-expanded":this.context.ariaManager.isOpen,"aria-disabled":n},this.props,p);return(0,a.createElement)(t,o,r)}}],[{key:"contextTypes",value:{ariaManager:a.PropTypes.object.isRequired},enumerable:!0},{key:"defaultProps",value:{tag:"button"},enumerable:!0}]),t}(a.Component);t["default"]=d,e.exports=t["default"]},function(e,n){e.exports=t},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,i=t,u=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,i);if(void 0!==s){if("value"in s)return s.value;var a=s.get;if(void 0===a)return;return a.call(u)}var c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=i,n=u,r=!0,s=c=void 0}},a=n(2),c=(r(a),n(8)),l=(r(c),n(6)),f=r(l),p={tag:a.PropTypes.string,children:a.PropTypes.node.isRequired},d=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){this._setMenuNode()}},{key:"componentDidUpdate",value:function(e,t,n){this.context.ariaManager.isOpen!==n.ariaManager.isOpen&&this._setMenuNode()}},{key:"_setMenuNode",value:function(){this.context.ariaManager.setMenu((0,c.findDOMNode)(this))}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.children,r=(0,f["default"])({role:"menu"},this.props,p);return(0,a.createElement)(t,r,n)}}],[{key:"contextTypes",value:{ariaManager:a.PropTypes.object.isRequired},enumerable:!0},{key:"defaultProps",value:{tag:"div"},enumerable:!0}]),t}(a.Component);t["default"]=d,e.exports=t["default"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,i=t,u=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,i);if(void 0!==s){if("value"in s)return s.value;var a=s.get;if(void 0===a)return;return a.call(u)}var c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=i,n=u,r=!0,s=c=void 0}},a=n(2),c=(r(a),n(8)),l=(r(c),n(6)),f=r(l),p={tag:a.PropTypes.string,children:a.PropTypes.node.isRequired},d=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){this._node=(0,c.findDOMNode)(this),this.context.ariaManager.addItem({node:this._node,text:this.props.text})}},{key:"componentWillUnmount",value:function(){this.context.ariaManager.removeItem(this._node)}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.children,r=(0,f["default"])({role:"menuitem",tabIndex:-1},this.props,p);return(0,a.createElement)(t,r,n)}}],[{key:"contextTypes",value:{ariaManager:a.PropTypes.object.isRequired},enumerable:!0},{key:"defaultProps",value:{tag:"div"},enumerable:!0}]),t}(a.Component);t["default"]=d,e.exports=t["default"]}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("createFocusGroup"),require("createTapListener"),require("ReactDOM"),require("focusTrap")):"function"==typeof define&&define.amd?define(["React","createFocusGroup","createTapListener","ReactDOM","focusTrap"],t):"object"==typeof exports?exports.ReactARIA=t(require("React"),require("createFocusGroup"),require("createTapListener"),require("ReactDOM"),require("focusTrap")):e.ReactARIA=t(e.React,e.createFocusGroup,e.createTapListener,e.ReactDOM,e.focusTrap)}(this,function(e,t,o,r,n){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=o(1),i=r(n);t.AriaManager=i["default"];var u=o(7),a=r(u);t.AriaToggle=a["default"];var s=o(9),p=r(s);t.AriaPopover=p["default"];var c=o(11),l=r(c);t.AriaItem=l["default"]},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=function(e,t,o){for(var r=!0;r;){var n=e,i=t,u=o;r=!1,null===n&&(n=Function.prototype);var a=Object.getOwnPropertyDescriptor(n,i);if(void 0!==a){if("value"in a)return a.value;var s=a.get;if(void 0===s)return;return s.call(u)}var p=Object.getPrototypeOf(n);if(null===p)return;e=p,t=i,o=u,r=!0,a=p=void 0}},s=o(2),p=(r(s),o(3)),c=r(p),l=o(4),f=r(l),d=o(6),v=r(d),y=function(e,t){return e===t||e.contains(t)},h={tab:9,escape:27,enter:13,space:32,end:35,home:36,arrowLeft:37,arrowUp:38,arrowRight:39,arrowDown:40},_={tag:s.PropTypes.string,trapFocus:s.PropTypes.bool,children:s.PropTypes.oneOfType([s.PropTypes.func,s.PropTypes.node]).isRequired,keybindings:s.PropTypes.shape({next:s.PropTypes.oneOfType([s.PropTypes.object,s.PropTypes.array]),prev:s.PropTypes.oneOfType([s.PropTypes.object,s.PropTypes.array]),first:s.PropTypes.oneOfType([s.PropTypes.object,s.PropTypes.array]),last:s.PropTypes.oneOfType([s.PropTypes.object,s.PropTypes.array])}),wrap:s.PropTypes.bool,stringSearch:s.PropTypes.bool,stringSearchDelay:s.PropTypes.number,openPopoverOn:s.PropTypes.oneOf(["tap","hover"]),closeOnOutsideClick:s.PropTypes.bool,closeOnItemSelection:s.PropTypes.bool,onPopoverOpen:s.PropTypes.func,onPopoverClose:s.PropTypes.func,onItemSelection:s.PropTypes.func},m=function(e){function t(e){var o=this;n(this,t),a(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this._setToggleNode=function(e){o._toggle=e},this._setPopoverNode=function(e){o._popover=e},this._addItem=function(e){o._items.push(e),o._focusGroup.addMember(e)},this._removeItem=function(e){var t=o._items.indexOf(e);t>-1&&o._items.splice(t,1),o._focusGroup.removeMember(e)},this._clearItems=function(){o._focusGroup.clearMembers()},this._focusItem=function(e){o._focusGroup.focusNodeAtIndex(e)},this._openPopover=function(){var e=arguments.length<=0||void 0===arguments[0]||arguments[0];o.state.isOpen||(o.setState({isOpen:!0}),o.props.onPopoverOpen(),o._focusGroup.activate(),e&&setTimeout(function(){o._focusItem(0)},60))},this._closePopover=function(){var e=arguments.length<=0||void 0===arguments[0]||arguments[0];o.state.isOpen&&(o.setState({isOpen:!1}),o.props.onPopoverClose(),o._focusGroup.deactivate(),e&&o._toggle.focus())},this._togglePopover=function(e){o.state.isOpen?o._closePopover(e):o._openPopover(e)},this.state={isOpen:!1},this._focusGroup=(0,c["default"])(e),this._toggle=null,this._popover=null,this._items=[]}return i(t,e),u(t,null,[{key:"childContextTypes",value:{ariaManager:s.PropTypes.object.isRequired},enumerable:!0},{key:"propTypes",value:_,enumerable:!0},{key:"defaultProps",value:{tag:"div",trapFocus:!1,keybindings:{next:[{keyCode:h.arrowDown},{keyCode:h.arrowRight}],prev:[{keyCode:h.arrowUp},{keyCode:h.arrowLeft}],first:{keyCode:h.home},last:{keyCode:h.end}},wrap:!0,stringSearch:!0,stringSearchDelay:600,openPopoverOn:"tap",closeOnOutsideClick:!0,closeOnItemSelection:!0,onPopoverOpen:function(){return null},onPopoverClose:function(){return null},onItemSelection:function(){return null}},enumerable:!0}]),u(t,[{key:"getChildContext",value:function(){return{ariaManager:{trapFocus:this.props.trapFocus,initialFocus:this.props.initialFocus,isOpen:this.state.isOpen,onItemSelection:this._onItemSelection,setToggleNode:this._setToggleNode,setPopoverNode:this._setPopoverNode,addItem:this._addItem,removeItem:this._removeItem,clearItems:this._clearItems,focusItem:this._focusItem,openPopover:this._openPopover,closePopover:this._closePopover,togglePopover:this._togglePopover}}}},{key:"componentWillMount",value:function(){f["default"].add(this,this.props.openPopoverOn)}},{key:"componentWillUnmount",value:function(){this._focusGroup.deactivate(),this._toggle=null,this._popover=null,this._items=[],f["default"].remove(this)}},{key:"_onTap",value:function(e){"tap"===this.props.openPopoverOn&&this._handleTapOrHover(e)}},{key:"_onHover",value:function(e){"hover"===this.props.openPopoverOn&&this._handleTapOrHover(e)}},{key:"_handleTapOrHover",value:function(e){var t=this.props,o=t.openPopoverOn,r=t.closeOnOutsideClick,n=e.target,i=this._toggle.getAttribute("disabled");if(y(this._toggle,n)&&null===i)"tap"===o?this._togglePopover(!1):this._openPopover(!1);else if(r&&this._popover&&!y(this._popover,n))this._closePopover(!1);else for(var u=this._items.length;u--;){var a=this._items[u];a.node===n&&this._onItemSelection(a,e)}}},{key:"_onKeyDown",value:function(e){var t=e.keyCode,o=e.target;if(this.state.isOpen)if(this.props.trapFocus||t!==h.tab){if(t===h.escape)e.preventDefault(),this._closePopover();else if([h.enter,h.space].indexOf(t)>-1)for(var r=this._items.length;r--;){var n=this._items[r];n.node===o&&(e.preventDefault(),this._onItemSelection(n,e))}}else this._closePopover(!1);else[h.arrowUp,h.arrowDown,h.enter,h.space].indexOf(t)>-1&&y(this._toggle,o)&&(e.preventDefault(),this._openPopover())}},{key:"_onItemSelection",value:function(e,t){var o=e.value||e.node.innerHTML;this.props.closeOnItemSelection&&this._closePopover(),this.props.onItemSelection(o,t)}},{key:"render",value:function(){var e=this.props,t=e.tag,o=e.children,r=(0,v["default"])({},this.props,_);return"function"==typeof o?o(this.state.isOpen):(0,s.createElement)(t,r,o)}}]),t}(s.Component);t["default"]=m,e.exports=t["default"]},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=o(5),i=r(n);t["default"]={_queue:[],add:function(e){this._queue.push(e),1===this._queue.length&&this._attachListeners()},remove:function(e){var t=this._queue.indexOf(e);t>-1&&this._queue.splice(t,1),this._queue.length<=0&&this._detachListeners()},_attachListeners:function(){this._tapListener=(0,i["default"])(document.documentElement,this._documentEvent.bind(this,"_onTap")),document.addEventListener("mouseover",this._documentEvent.bind(this,"_onHover")),document.addEventListener("keydown",this._documentEvent.bind(this,"_onKeyDown"))},_detachListeners:function(){this._tapListener.remove(),document.removeEventListener("mouseover",this._documentEvent),document.removeEventListener("keydown",this._documentEvent)},_documentEvent:function(e,t){for(var o=this._queue.length;o--;)this._queue[o][e](t)}},e.exports=t["default"]},function(e,t){e.exports=o},function(e,t){"use strict";function o(e,t,o){for(var r in t)t.hasOwnProperty(r)&&!o[r]&&(e[r]=t[r]);return e}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=function(e,t,o){for(var r=!0;r;){var n=e,i=t,u=o;r=!1,null===n&&(n=Function.prototype);var a=Object.getOwnPropertyDescriptor(n,i);if(void 0!==a){if("value"in a)return a.value;var s=a.get;if(void 0===s)return;return s.call(u)}var p=Object.getPrototypeOf(n);if(null===p)return;e=p,t=i,o=u,r=!0,a=p=void 0}},s=o(2),p=(r(s),o(8)),c=(r(p),o(6)),l=r(c),f={tag:s.PropTypes.string,children:s.PropTypes.oneOfType([s.PropTypes.func,s.PropTypes.node]).isRequired},d=function(e){function t(){n(this,t),a(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){this.context.ariaManager.setToggleNode((0,p.findDOMNode)(this))}},{key:"render",value:function(){var e=this.props,t=e.tag,o=e.disabled,r=e.children,n=(0,l["default"])({role:"button",tabIndex:o?"":"0","aria-haspopup":!0,"aria-expanded":this.context.ariaManager.isOpen,"aria-disabled":o},this.props,f);return"function"==typeof r?r(n):(0,s.createElement)(t,n,r)}}],[{key:"contextTypes",value:{ariaManager:s.PropTypes.object.isRequired},enumerable:!0},{key:"propTypes",value:f,enumerable:!0},{key:"defaultProps",value:{tag:"button"},enumerable:!0}]),t}(s.Component);t["default"]=d,e.exports=t["default"]},function(e,t){e.exports=r},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=function(e,t,o){for(var r=!0;r;){var n=e,i=t,u=o;r=!1,null===n&&(n=Function.prototype);var a=Object.getOwnPropertyDescriptor(n,i);if(void 0!==a){if("value"in a)return a.value;var s=a.get;if(void 0===s)return;return s.call(u)}var p=Object.getPrototypeOf(n);if(null===p)return;e=p,t=i,o=u,r=!0,a=p=void 0}},s=o(2),p=(r(s),o(8)),c=(r(p),o(10)),l=r(c),f=o(6),d=r(f),v={tag:s.PropTypes.string,children:s.PropTypes.oneOfType([s.PropTypes.func,s.PropTypes.node]).isRequired},y=function(e){function t(){n(this,t),a(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){var e=this.context.ariaManager,t=e.trapFocus,o=e.initialFocus;e.onClickOutside;this._setPopoverNode(),t&&(this._focusTrap=(0,l["default"])((0,p.findDOMNode)(this),{initialFocus:o,escapeDeactivates:!1,clickOutsideDeactivates:!0}).activate())}},{key:"componentWillUnmount",value:function(){this.context.ariaManager.trapFocus&&this._focusTrap.deactivate()}},{key:"componentDidUpdate",value:function(e,t,o){this.context.ariaManager.isOpen!==o.ariaManager.isOpen&&this._setPopoverNode()}},{key:"_setPopoverNode",value:function(){this.context.ariaManager.setPopoverNode((0,p.findDOMNode)(this))}},{key:"render",value:function(){var e=this.props,t=e.tag,o=e.children,r=(0,d["default"])({},this.props,v);return"function"==typeof o?o(r):(0,s.createElement)(t,r,o)}}],[{key:"contextTypes",value:{ariaManager:s.PropTypes.object.isRequired},enumerable:!0},{key:"propTypes",value:v,enumerable:!0},{key:"defaultProps",value:{tag:"div"},enumerable:!0}]),t}(s.Component);t["default"]=y,e.exports=t["default"]},function(e,t){e.exports=n},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=function(e,t,o){for(var r=!0;r;){var n=e,i=t,u=o;r=!1,null===n&&(n=Function.prototype);var a=Object.getOwnPropertyDescriptor(n,i);if(void 0!==a){if("value"in a)return a.value;var s=a.get;if(void 0===s)return;return s.call(u)}var p=Object.getPrototypeOf(n);if(null===p)return;e=p,t=i,o=u,r=!0,a=p=void 0}},s=o(2),p=(r(s),o(8)),c=(r(p),o(6)),l=r(c),f={tag:s.PropTypes.string,children:s.PropTypes.oneOfType([s.PropTypes.func,s.PropTypes.node]).isRequired},d=function(e){function t(){n(this,t),a(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){this._node=(0,p.findDOMNode)(this),this.context.ariaManager.addItem({node:this._node,text:this.props.text})}},{key:"componentWillUnmount",value:function(){this.context.ariaManager.removeItem(this._node)}},{key:"render",value:function(){var e=this.props,t=e.tag,o=e.children,r=(0,l["default"])({role:"menuitem",tabIndex:-1},this.props,f);return"function"==typeof o?o(r):(0,s.createElement)(t,r,o)}}],[{key:"contextTypes",value:{ariaManager:s.PropTypes.object.isRequired},enumerable:!0},{key:"propTypes",value:f,enumerable:!0},{key:"defaultProps",value:{tag:"div"},enumerable:!0}]),t}(s.Component);t["default"]=d,e.exports=t["default"]}])});

example/index.jsx

 import React, { Component, PropTypes, Children, createElement } from 'react'
 import ReactDOM, { findDOMNode } from 'react-dom'
-import { AriaManager, Toggle, Menu, MenuItem } from '../src/react-aria'
+import a11y from 'react-a11y'
 import Transition from 'react-motion-ui-pack'
+import { AriaManager, AriaToggle, AriaPopover, AriaItem } from '../src/react-aria'
 
-// API
-// applyAriaComponent(Component, 'Modal')
+// a11y(React)
 
-// Focus Trap
+// Components
 // - Modal
-
-// Focus Group
 // - Dropdown https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus#Success_Criteria_2.1.1_Keyboard
@@ -31,16 +29,17 @@ // - Select
     return (
-      <AriaManager
-        onSelection={this._handleSelection}
-      >
+      <AriaManager onItemSelection={this._handleSelection}>
         { isOpen =>
           <div>
-            <Toggle>
-              {this.state.selection || 'Toggle'}
-            </Toggle>
+            <AriaToggle id="dropdown">
+              {this.state.selection || 'Select A Menu Item'}
+            </AriaToggle>
             { isOpen &&
-              <Menu key="menu">
-                <MenuItem>Apples</MenuItem>
-                <MenuItem>Pears</MenuItem>
-                <MenuItem>Oranges</MenuItem>
-              </Menu>
+              <AriaPopover
+                role="menu"
+                aria-labelledby="dropdown"
+              >
+                <AriaItem>Apples</AriaItem>
+                <AriaItem>Pears</AriaItem>
+                <AriaItem>Oranges</AriaItem>
+              </AriaPopover>
             }
@@ -54,2 +53,61 @@ </div>
 
+class Modal extends Component {
+  render() {
+    return (
+      <AriaManager trapFocus>
+        { isOpen =>
+          <div>
+            <AriaToggle>
+              Toggle Modal
+            </AriaToggle>
+            <Transition>
+              { isOpen &&
+                <div key="popover">
+                  Clicking here will close since it's outside
+                  <AriaPopover>
+                    <a href="#">One</a>
+                    <a href="#">Two</a>
+                    <a href="#">Three</a>
+                  </AriaPopover>
+                </div>
+              }
+            </Transition>
+          </div>
+        }
+      </AriaManager>
+    )
+  }
+}
+
+class Popover extends Component {
+  state = {
+    isOpen: false
+  }
+
+  render() {
+    const { isOpen } = this.state
+    return (
+      <AriaManager
+        onPopoverOpen={() => this.setState({ isOpen: true })}
+        onPopoverClose={() => this.setState({ isOpen: false })}
+        openPopoverOn="hover"
+      >
+        <div>
+          <AriaToggle>
+            Toggle Popover <span>👻</span>
+          </AriaToggle>
+          { isOpen &&
+            <AriaPopover>
+              Some cool popover content.
+            </AriaPopover>
+          }
+          <div>
+            Popover is {isOpen ? 'Open' : 'Closed'}
+          </div>
+        </div>
+      </AriaManager>
+    )
+  }
+}
+
 class App extends Component {
@@ -60,4 +118,4 @@ render() {
         <Dropdown/>
-        <Dropdown/>
-        <Dropdown/>
+        <Modal/>
+        <Popover/>
       </div>
@@ -68,2 +126,2 @@ )
 
-ReactDOM.render(<App />, document.getElementById('app'))
+ReactDOM.render(<App/>, document.getElementById('app'))

lib/events-handler.js

@@ -40,2 +40,3 @@ 'use strict';
     this._tapListener = (0, _teenyTap2['default'])(document.documentElement, this._documentEvent.bind(this, '_onTap'));
+    document.addEventListener('mouseover', this._documentEvent.bind(this, '_onHover'));
     document.addEventListener('keydown', this._documentEvent.bind(this, '_onKeyDown'));
@@ -46,2 +47,3 @@ },
     this._tapListener.remove();
+    document.removeEventListener('mouseover', this._documentEvent);
     document.removeEventListener('keydown', this._documentEvent);
@@ -48,0 +50,0 @@ },

lib/react-aria.js

@@ -9,24 +9,24 @@ 'use strict';
 
-var _ariaManager = require('./aria-manager');
+var _AriaManager2 = require('./AriaManager');
 
-var _ariaManager2 = _interopRequireDefault(_ariaManager);
+var _AriaManager3 = _interopRequireDefault(_AriaManager2);
 
-exports.AriaManager = _ariaManager2['default'];
+exports.AriaManager = _AriaManager3['default'];
 
-var _toggle = require('./toggle');
+var _AriaToggle2 = require('./AriaToggle');
 
-var _toggle2 = _interopRequireDefault(_toggle);
+var _AriaToggle3 = _interopRequireDefault(_AriaToggle2);
 
-exports.Toggle = _toggle2['default'];
+exports.AriaToggle = _AriaToggle3['default'];
 
-var _menu = require('./menu');
+var _AriaPopover2 = require('./AriaPopover');
 
-var _menu2 = _interopRequireDefault(_menu);
+var _AriaPopover3 = _interopRequireDefault(_AriaPopover2);
 
-exports.Menu = _menu2['default'];
+exports.AriaPopover = _AriaPopover3['default'];
 
-var _menuItem = require('./menu-item');
+var _AriaItem2 = require('./AriaItem');
 
-var _menuItem2 = _interopRequireDefault(_menuItem);
+var _AriaItem3 = _interopRequireDefault(_AriaItem2);
 
-exports.MenuItem = _menuItem2['default'];
+exports.AriaItem = _AriaItem3['default'];

package.json

 {
   "name": "react-aria",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Utilities to help create React ARIA components.",
@@ -21,8 +21,13 @@ "main": "lib/react-aria.js",
     "react",
-    "component",
+    "reactjs",
     "react-component",
-    "ui",
-    "motion",
-    "transition",
-    "animation"
+    "aria",
+    "accessibility",
+    "accessible",
+    "dialog",
+    "dropdown",
+    "modal",
+    "menu",
+    "popover",
+    "widget"
   ],
@@ -40,3 +45,3 @@ "author": "Travis Arnold <[e-mail]> (http://souporserious.com)",
   "dependencies": {
-    "focus-group": "^0.2.3",
+    "focus-group": "^0.3.0",
     "focus-trap": "^2.0.1",
@@ -55,4 +60,5 @@ "teeny-tap": "^0.2.0"
     "node-sass": "^3.2.0",
-    "react": "15.0.1",
-    "react-dom": "15.0.1",
+    "react": "15.2.1",
+    "react-a11y": "^0.3.3",
+    "react-dom": "15.2.1",
     "react-motion": "^0.4.4",
@@ -59,0 +65,0 @@ "react-motion-ui-pack": "^0.8.0",

README.md

@@ -17,3 +17,3 @@ ## React ARIA
 ```js
-import { AriaManager, Toggle, Menu, MenuItem } from 'react-aria'
+import { AriaManager, AriaToggle, AriaPopover, AriaItem } from 'react-aria'
 
@@ -31,16 +31,14 @@ class Dropdown extends Component {
     return (
-      <AriaManager
-        onSelection={this._handleSelection}
-      >
+      <AriaManager onItemSelection={this._handleSelection}>
         { isOpen =>
           <div>
-            <Toggle>
-              {this.state.selection || 'Toggle'}
-            </Toggle>
+            <AriaToggle>
+              {this.state.selection || 'Select A Dropdown Item'}
+            </AriaToggle>
             { isOpen &&
-              <Menu key="menu">
-                <MenuItem>Apples</MenuItem>
-                <MenuItem>Pears</MenuItem>
-                <MenuItem>Oranges</MenuItem>
-              </Menu>
+              <AriaPopover role="menu">
+                <AriaItem>Apples</AriaItem>
+                <AriaItem>Pears</AriaItem>
+                <AriaItem>Oranges</AriaItem>
+              </AriaPopover>
             }
@@ -74,1 +72,5 @@ </div>
 open your browser and visit: `http://localhost:8080/`
+
+## Thank You
+
+Huge thank you to [David Clark](https://github.com/davidtheclark) and all of his ARIA work. Most of the code in here is heavily inspired by what he has done.

src/events-handler.js

@@ -34,2 +34,6 @@ import createTapListener from 'teeny-tap'
     document.addEventListener(
+      'mouseover',
+      this._documentEvent.bind(this, '_onHover')
+    )
+    document.addEventListener(
       'keydown',
@@ -42,2 +46,3 @@ this._documentEvent.bind(this, '_onKeyDown')
     this._tapListener.remove()
+    document.removeEventListener('mouseover', this._documentEvent)
     document.removeEventListener('keydown', this._documentEvent)
@@ -44,0 +49,0 @@ },

src/react-aria.js

@@ -1,4 +0,4 @@
-export AriaManager from './aria-manager'
-export Toggle from './toggle'
-export Menu from './menu'
-export MenuItem from './menu-item'
+export AriaManager from './AriaManager'
+export AriaToggle from './AriaToggle'
+export AriaPopover from './AriaPopover'
+export AriaItem from './AriaItem'

webpack.prod.config.js

@@ -28,3 +28,6 @@ var path = require('path');
     'react': 'React',
-    'react-dom': 'ReactDOM'
+    'react-dom': 'ReactDOM',
+    'teeny-tap': 'createTapListener',
+    'focus-trap': 'focusTrap',
+    'focus-group': 'createFocusGroup'
   },
@@ -31,0 +34,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

117549

increased by27.71%

Number of package files

34

increased by21.43%

Lines of code

2411

increased by31.03%

Number of lines in readme file

74

increased by2.78%

Worsened metrics

Dev dependency count

18

increased by5.88%

Dependency changes

• + Addedfocus-group@0.3.1(transitive)

• - Removedfocus-group@0.2.3(transitive)

• Updatedfocus-group@^0.3.0