Avoid wrapping children

This changes the API so that there must only be a single child
element under HotKeys.

No tabIndex manipulation unless used explicitly.

Deprecate the onFocus/onBlur event handlers in favor of using those
set in the child element:

  i.e. would change this:

    <HotKeys onBlur={hotKeyOnBlur}>
       <div onBlur={divOnBlur} />
    </HotKeys>

  essentially into:

    <HotKeys>
       <div onBlur={() => { divOnBlur(); hotKeyOnBlur() }}/>
    </HotKeys>

examples/master/index.js

@@ -51,7 +51,9 @@ const App = React.createClass({
           </ul>
         </div>
         <HotKeys handlers={handlers} className={'viewport ' + (this.state && this.state.konamiTime ? 'konamiTime' : '')}>
-          {Array.apply(null, new Array(10)).map((e, i) => <Node key={i} />)}
+          <div>
+            {Array.apply(null, new Array(10)).map((e, i) => <Node key={i} />)}
+          </div>
         </HotKeys>
       </div>
     );
@@ -111,7 +113,9 @@ const Node = React.createClass({
     //   or focused programattically
     return (
       <HotKeys tabIndex="0" handlers={handlers} className="node" style={style}>
-        Node
+        <div>
+          Node
+        </div>
       </HotKeys>
     );
   }

lib/HotKeys.js

@@ -30,8 +30,8 @@ const HotKeys = React.createClass({
 
   propTypes: {
     children: React.PropTypes.node,
-    onFocus: React.PropTypes.func,
-    onBlur: React.PropTypes.func,
+    onFocus: React.PropTypes.func, //.isDeprecated('in favor of children[0].props.onFocus')
+    onBlur: React.PropTypes.func, //.isDeprecated('in favor of children[0].props.onBlur')
     keyMap: React.PropTypes.object,
     handlers: React.PropTypes.object,
     focused: React.PropTypes.bool, // externally controlled focus
@@ -144,15 +144,23 @@ const HotKeys = React.createClass({
   onFocus() {
     this.__isFocused__ = true;
 
-    if (this.props.onFocus) {
+    const child = React.Children.only(this.props.children);
+    if (child.onFocus) {
+      child.onFocus(...arguments);
+    }
+    if (this.props.onFocus) { // isDeprecated
       this.props.onFocus(...arguments);
     }
   },
 
   onBlur() {
     this.__isFocused__ = false;
 
-    if (this.props.onBlur) {
+    const child = React.Children.only(this.props.children);
+    if (child.onBlur) {
+      child.onBlur(...arguments);
+    }
+    if (this.props.onBlur) { // isDeprecated
       this.props.onBlur(...arguments);
     }
     if (this.context.hotKeyParent) {
@@ -163,11 +171,11 @@ const HotKeys = React.createClass({
   render() {
     const {children, keyMap, handlers, focused, attach, ...props} = this.props;
 
-    return (
-      <FocusTrap {...props} onFocus={this.onFocus} onBlur={this.onBlur}>
-        {children}
-      </FocusTrap>
-    );
+    const child = React.Children.only(children);
+    const onFocus = this.onFocus;
+    const onBlur = this.onBlur;
+
+    return React.cloneElement(child, { ...props, onFocus, onBlur });
   }
 
 });