Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev

* 'dev' of github.com:soyjavi/react-toolbox:
  Make Tooltip use currentTarget instead of target when calculating the position
  Allow Tooltip factory to use string native components
  Make chips avatar detection work when decorated

components/chip/Chip.js

@@ -8,7 +8,8 @@ const factory = (Avatar) => {
   const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
     let hasAvatar = false;
     if (React.Children.count(children)) {
-      const firstChild = children[0];
+      const flatChildren = React.Children.toArray(children);
+      const firstChild = flatChildren[0];
       hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
     }
 

components/chip/__test__/index.spec.js

@@ -0,0 +1,53 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-addons-test-utils';
+import { themr } from 'react-css-themr';
+import { CHIP } from '../../identifiers.js';
+import { chipFactory } from '../Chip';
+import { tooltipFactory } from '../../tooltip';
+
+const Avatar = ({title}) => <span>{title}</span>; // eslint-disable-line react/prop-types
+const Chip = themr(CHIP)(chipFactory(Avatar));
+
+describe('Chip', function () {
+  describe('with avatar', function () {
+    it('adds the avatar class to the element', function () {
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Chip theme={{avatar: 'avatar-class'}}>
+          <Avatar title='Test'/>
+          <span>Test</span>
+        </Chip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toMatch(/\bavatar-class\b/);
+    });
+
+    it('works with non-flat children', function () {
+      const TooltippedChip = tooltipFactory()(Chip);
+      const tree = ReactTestUtils.renderIntoDocument(
+        <TooltippedChip theme={{avatar: 'avatar-class'}} tooltip='Test tooltip'>
+          <Avatar title='Test'/>
+          <span>Test</span>
+        </TooltippedChip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toMatch(/\bavatar-class\b/);
+    });
+  });
+
+  describe('without avatar', function () {
+    it('does not add avatar class to the element', function () {
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Chip theme={{avatar: 'avatar-class'}}>
+          <span>Test</span>
+        </Chip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toNotMatch(/\bavatar-class\b/);
+    });
+  });
+});

components/tooltip/Tooltip.js

@@ -152,7 +152,7 @@ const tooltipFactory = (options = {}) => {
       };
 
       handleMouseEnter = (event) => {
-        this.activate(this.calculatePosition(event.target));
+        this.activate(this.calculatePosition(event.currentTarget));
         if (this.props.onMouseEnter) this.props.onMouseEnter(event);
       };
 
@@ -167,7 +167,7 @@ const tooltipFactory = (options = {}) => {
         }
 
         if (this.props.tooltipShowOnClick && !this.state.active) {
-          this.activate(this.calculatePosition(event.target));
+          this.activate(this.calculatePosition(event.currentTarget));
         }
 
         if (this.props.onClick) this.props.onClick(event);
@@ -193,6 +193,8 @@ const tooltipFactory = (options = {}) => {
           [theme[positionClass]]: theme[positionClass]
         });
 
+        const isNative = typeof ComposedComponent === 'string';
+
         return (
           <ComposedComponent
             {...other}
@@ -200,7 +202,7 @@ const tooltipFactory = (options = {}) => {
             onClick={this.handleClick}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
-            theme={theme}
+            {...isNative ? {} : {theme}}
           >
             {children ? children : null}
             {visible && (

spec/components/tooltip.js

@@ -2,6 +2,8 @@ import React from 'react';
 import Button from '../../components/button';
 import Input from '../../components/input';
 import Tooltip from '../../components/tooltip';
+import Chip from '../../components/chip';
+import Avatar from '../../components/avatar';
 
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
@@ -9,6 +11,8 @@ const TooltipStrong = Tooltip(({children, ...other}) => {
   delete other.theme;
   return <strong {...other}>{children}</strong>;
 });
+const TooltipStrongDirect = Tooltip('strong');
+const ChipTooltip = Tooltip(Chip);
 
 const TooltipTest = () => (
   <section>
@@ -22,14 +26,18 @@ const TooltipTest = () => (
       floating
       tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
     />
+    <ChipTooltip tooltip='Dolor sit amet' tooltipPosition='top'>
+      <Avatar icon='home'/>
+      <span>Tooltip in a chip</span>
+    </ChipTooltip>
     <TooltipInput tooltip='lorem ipsum...' />
     <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
     <p>
       Click this next word to show and hide on click:
       {' '}
-      <TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
+      <TooltipStrongDirect tooltip='This is a auto show tooltip' tooltipShowOnClick>
         oh hai
-      </TooltipStrong>
+      </TooltipStrongDirect>
       {' '}. This is useful for mobile!
     </p>
   </section>