feat(Ref): implement innerRef on all components

src/addons/Radio/Radio.js

@@ -12,7 +12,6 @@ import Checkbox from '../../modules/Checkbox'
 function Radio(props) {
   const { slider, toggle, type } = props
   const rest = getUnhandledProps(Radio, props)
-  // const ElementType = getElementType(Radio, props)
   // radio, slider, toggle are exclusive
   // use an undefined radio if slider or toggle are present
   const radio = !(slider || toggle) || undefined

src/addons/Responsive/Responsive.js

@@ -4,8 +4,8 @@ import React, { Component } from 'react'
 
 import {
   customPropTypes,
+  ElementType,
   eventStack,
-  getElementType,
   getUnhandledProps,
   isBrowser,
   META,
@@ -119,8 +119,6 @@ export default class Responsive extends Component {
 
   render() {
     const { children } = this.props
-
-    const ElementType = getElementType(Responsive, this.props)
     const rest = getUnhandledProps(Responsive, this.props)
 
     if (this.isVisible()) return <ElementType {...rest}>{children}</ElementType>

src/addons/TextArea/TextArea.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -123,16 +123,14 @@ class TextArea extends Component {
   render() {
     const { autoHeight, rows, style, value } = this.props
     const rest = getUnhandledProps(TextArea, this.props)
-    const ElementType = getElementType(TextArea, this.props)
-
     const resize = autoHeight ? 'none' : ''
 
     return (
       <ElementType
         {...rest}
+        innerRef={this.handleRef}
         onChange={this.handleChange}
         onInput={this.handleInput}
-        ref={this.handleRef}
         rows={rows}
         style={{ resize, ...style }}
         value={value}

src/behaviors/Visibility/Visibility.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react'
 import {
   eventStack,
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   normalizeOffset,
@@ -371,9 +371,8 @@ export default class Visibility extends Component {
 
   render() {
     const { children } = this.props
-    const ElementType = getElementType(Visibility, this.props)
     const rest = getUnhandledProps(Visibility, this.props)
 
-    return <ElementType {...rest} ref={this.handleRef}>{children}</ElementType>
+    return <ElementType {...rest} innerRef={this.handleRef}>{children}</ElementType>
   }
 }

src/collections/Breadcrumb/Breadcrumb.js

@@ -6,8 +6,8 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
+  ElementType,
   getUnhandledProps,
-  getElementType,
   META,
   SUI,
 } from '../../lib'
@@ -34,7 +34,6 @@ function Breadcrumb(props) {
     className,
   )
   const rest = getUnhandledProps(Breadcrumb, props)
-  const ElementType = getElementType(Breadcrumb, props)
 
   if (!childrenUtils.isNil(children)) return <ElementType {...rest} className={classes}>{children}</ElementType>
 

src/collections/Breadcrumb/BreadcrumbDivider.js

@@ -7,8 +7,8 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
+  ElementType,
   getUnhandledProps,
-  getElementType,
   META,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -26,7 +26,6 @@ function BreadcrumbDivider(props) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(BreadcrumbDivider, props)
-  const ElementType = getElementType(BreadcrumbDivider, props)
 
   if (!_.isNil(icon)) return Icon.create(icon, { defaultProps: { ...rest, className: classes } })
   if (!_.isNil(content)) return <ElementType {...rest} className={classes}>{content}</ElementType>

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -7,8 +7,8 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
+  ElementType,
   getUnhandledProps,
-  getElementType,
   META,
   useKeyOnly,
 } from '../../lib'
@@ -61,7 +61,7 @@ export default class BreadcrumbSection extends Component {
     parent: 'Breadcrumb',
   }
 
-  computeElementType = () => {
+  computeType = () => {
     const { link, onClick } = this.props
 
     if (link || onClick) return 'a'
@@ -84,10 +84,9 @@ export default class BreadcrumbSection extends Component {
       className,
     )
     const rest = getUnhandledProps(BreadcrumbSection, this.props)
-    const ElementType = getElementType(BreadcrumbSection, this.props, this.computeElementType)
 
     return (
-      <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>
+      <ElementType {...rest} className={classes} computeType={this.computeType} href={href} onClick={this.handleClick}>
         {childrenUtils.isNil(children) ? content : children}
       </ElementType>
     )

src/collections/Form/Form.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   SUI,
@@ -137,7 +137,6 @@ class Form extends Component {
       className,
     )
     const rest = getUnhandledProps(Form, this.props)
-    const ElementType = getElementType(Form, this.props)
 
     return (
       <ElementType

src/collections/Form/FormButton.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ import FormField from './FormField'
 function FormButton(props) {
   const { control } = props
   const rest = getUnhandledProps(FormButton, props)
-  const ElementType = getElementType(FormButton, props)
 
   return <ElementType {...rest} control={control} />
 }

src/collections/Form/FormCheckbox.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ import FormField from './FormField'
 function FormCheckbox(props) {
   const { control } = props
   const rest = getUnhandledProps(FormCheckbox, props)
-  const ElementType = getElementType(FormCheckbox, props)
 
   return <ElementType {...rest} control={control} />
 }

src/collections/Form/FormDropdown.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ import FormField from './FormField'
 function FormDropdown(props) {
   const { control } = props
   const rest = getUnhandledProps(FormDropdown, props)
-  const ElementType = getElementType(FormDropdown, props)
 
   return <ElementType {...rest} control={control} />
 }

src/collections/Form/FormField.js

@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLLabel,
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   SUI,
@@ -53,7 +53,6 @@ function FormField(props) {
     className,
   )
   const rest = getUnhandledProps(FormField, props)
-  const ElementType = getElementType(FormField, props)
 
   // ----------------------------------------
   // No Control

src/collections/Form/FormGroup.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   SUI,
@@ -35,7 +35,6 @@ function FormGroup(props) {
     className,
   )
   const rest = getUnhandledProps(FormGroup, props)
-  const ElementType = getElementType(FormGroup, props)
 
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }

src/collections/Form/FormInput.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ import FormField from './FormField'
 function FormInput(props) {
   const { control } = props
   const rest = getUnhandledProps(FormInput, props)
-  const ElementType = getElementType(FormInput, props)
 
   return <ElementType {...rest} control={control} />
 }

src/collections/Form/FormRadio.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ import FormField from './FormField'
 function FormRadio(props) {
   const { control } = props
   const rest = getUnhandledProps(FormRadio, props)
-  const ElementType = getElementType(FormRadio, props)
 
   return <ElementType {...rest} control={control} />
 }

src/collections/Form/FormSelect.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ import FormField from './FormField'
 function FormSelect(props) {
   const { control } = props
   const rest = getUnhandledProps(FormSelect, props)
-  const ElementType = getElementType(FormSelect, props)
 
   return <ElementType {...rest} control={control} />
 }

src/collections/Form/FormTextArea.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ import FormField from './FormField'
 function FormTextArea(props) {
   const { control } = props
   const rest = getUnhandledProps(FormTextArea, props)
-  const ElementType = getElementType(FormTextArea, props)
 
   return <ElementType {...rest} control={control} />
 }

src/collections/Grid/Grid.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   SUI,
@@ -61,7 +61,6 @@ function Grid(props) {
     className,
   )
   const rest = getUnhandledProps(Grid, props)
-  const ElementType = getElementType(Grid, props)
 
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }

src/collections/Grid/GridColumn.js

@@ -5,7 +5,7 @@ import React from 'react'
 import {
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   SUI,
@@ -55,7 +55,6 @@ function GridColumn(props) {
     className,
   )
   const rest = getUnhandledProps(GridColumn, props)
-  const ElementType = getElementType(GridColumn, props)
 
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }

src/collections/Grid/GridRow.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   SUI,
@@ -47,7 +47,6 @@ function GridRow(props) {
     className,
   )
   const rest = getUnhandledProps(GridRow, props)
-  const ElementType = getElementType(GridRow, props)
 
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }

src/collections/Menu/Menu.js

@@ -8,7 +8,7 @@ import {
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
   SUI,
@@ -213,7 +213,6 @@ class Menu extends Component {
       'menu',
     )
     const rest = getUnhandledProps(Menu, this.props)
-    const ElementType = getElementType(Menu, this.props)
 
     return (
       <ElementType {...rest} className={classes}>

src/collections/Menu/MenuHeader.js

@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  ElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -17,7 +17,6 @@ function MenuHeader(props) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(MenuHeader, props)
-  const ElementType = getElementType(MenuHeader, props)
 
   return (
     <ElementType {...rest} className={classes}>