chore(Sidebar|Visibility): use createRef() API internally

docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js

@@ -1,16 +1,19 @@
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import { Button, Grid } from 'semantic-ui-react'
 
 export default class ButtonExampleFocus extends Component {
-  handleClick = () => this.ref.focus()
-
-  handleRef = c => (this.ref = c)
+  buttonRef = createRef()
+  handleClick = () => this.buttonRef.current.focus()
 
   render() {
     return (
       <Grid>
         <Grid.Column width={8}>
-          <Button content='A button that can be focused' primary ref={this.handleRef} />
+          <Button
+            content='A button that can be focused'
+            primary
+            ref={this.buttonRef}
+          />
         </Grid.Column>
         <Grid.Column width={8}>
           <Button content='Set focused' onClick={this.handleClick} />

docs/src/examples/elements/Input/Usage/InputExampleRefFocus.js

@@ -1,20 +1,15 @@
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import { Input, Button } from 'semantic-ui-react'
 
 class InputExampleRefFocus extends Component {
-  handleRef = (c) => {
-    this.inputRef = c
-  }
-
-  focus = () => {
-    this.inputRef.focus()
-  }
+  inputRef = createRef()
+  handleClick = () => this.inputRef.current.focus()
 
   render() {
     return (
       <div>
-        <Button content='focus' onClick={this.focus} />
-        <Input ref={this.handleRef} placeholder='Search...' />
+        <Button content='focus' onClick={this.handleClick} />
+        <Input ref={this.inputRef} placeholder='Search...' />
       </div>
     )
   }

src/behaviors/Visibility/Visibility.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 
 import {
   eventStack,
@@ -180,8 +180,8 @@ export default class Visibility extends Component {
     topPassed: false,
     topVisible: false,
   }
-
   firedCallbacks = []
+  ref = createRef()
 
   // ----------------------------------------
   // Lifecycle
@@ -360,7 +360,7 @@ export default class Visibility extends Component {
 
   computeCalculations() {
     const { offset } = this.props
-    const { bottom, height, top, width } = this.ref.getBoundingClientRect()
+    const { bottom, height, top, width } = this.ref.current.getBoundingClientRect()
     const [topOffset, bottomOffset] = normalizeOffset(offset)
 
     const direction = window.pageYOffset > this.pageYOffset ? 'down' : 'up'
@@ -396,12 +396,6 @@ export default class Visibility extends Component {
     }
   }
 
-  // ----------------------------------------
-  // Refs
-  // ----------------------------------------
-
-  handleRef = c => (this.ref = c)
-
   // ----------------------------------------
   // Render
   // ----------------------------------------
@@ -412,7 +406,7 @@ export default class Visibility extends Component {
     const rest = getUnhandledProps(Visibility, this.props)
 
     return (
-      <ElementType {...rest} ref={this.handleRef}>
+      <ElementType {...rest} ref={this.ref}>
         {children}
       </ElementType>
     )

src/modules/Sidebar/Sidebar.js

@@ -2,7 +2,7 @@ import EventStack from '@semantic-ui-react/event-stack'
 import cx from 'classnames'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 
 import Ref from '../../addons/Ref'
 import {
@@ -99,6 +99,7 @@ class Sidebar extends Component {
   static Pusher = SidebarPusher
 
   state = {}
+  ref = createRef()
 
   componentDidUpdate(prevProps) {
     const { visible: prevVisible } = prevProps
@@ -137,14 +138,12 @@ class Sidebar extends Component {
   }
 
   handleDocumentClick = (e) => {
-    if (!doesNodeContainClick(this.ref, e)) {
+    if (!doesNodeContainClick(this.ref.current, e)) {
       this.skipNextCallback = true
       _.invoke(this.props, 'onHide', e, { ...this.props, visible: false })
     }
   }
 
-  handleRef = c => (this.ref = c)
-
   render() {
     const {
       animation,
@@ -172,7 +171,7 @@ class Sidebar extends Component {
     const ElementType = getElementType(Sidebar, this.props)
 
     return (
-      <Ref innerRef={this.handleRef}>
+      <Ref innerRef={this.ref}>
         <ElementType {...rest} className={classes}>
           {childrenUtils.isNil(children) ? content : children}
           {visible && <EventStack name='click' on={this.handleDocumentClick} target={target} />}

test/specs/behaviors/Visibility/Visibility-test.js

@@ -14,7 +14,7 @@ const wrapperMount = (node, opts) => {
 
 const mockScroll = (top, bottom) => {
   if (wrapper) {
-    wrapper.instance().ref = {
+    wrapper.instance().ref.current = {
       getBoundingClientRect: () => ({
         bottom,
         top,