feat(Popup): support an object from createRef() as context value

docs/src/examples/modules/Popup/Usage/PopupExampleContext.js

@@ -1,20 +1,20 @@
-import React from 'react'
+import React, { createRef } from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 class PopupExampleContextControlled extends React.Component {
-  state = {}
-
-  handleRef = node => this.setState({ node })
+  contextRef = createRef()
 
   render() {
-    const { node } = this.state
-    const trigger = <Button content='Trigger Popup' />
-
     return (
       <div>
-        <Popup trigger={trigger} context={node} content='Hello' position='top center' />
+        <Popup
+          trigger={<Button content='Trigger Popup' />}
+          context={this.contextRef}
+          content='Hello'
+          position='top center'
+        />
         ---------->
-        <strong ref={this.handleRef}>here</strong>
+        <strong ref={this.contextRef}>here</strong>
       </div>
     )
   }

docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js

@@ -1,22 +1,25 @@
-import React from 'react'
+import React, { createRef, Fragment } from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 class PopupExampleContextControlled extends React.Component {
   state = {}
+  contextRef = createRef()
 
   toggle = () => this.setState({ open: !this.state.open })
 
-  handleRef = node => this.setState({ node })
-
   render() {
-    const { node, open } = this.state
     return (
-      <div>
+      <Fragment>
         <Button content='Open controlled Popup' onClick={this.toggle} />
-        <Popup context={node} content='Hello' position='top center' open={open} />
+        <Popup
+          context={this.contextRef}
+          content='Hello'
+          position='top center'
+          open={this.state.open}
+        />
         ---------->
-        <strong ref={this.handleRef}>here</strong>
-      </div>
+        <strong ref={this.contextRef}>here</strong>
+      </Fragment>
     )
   }
 }

src/modules/Popup/Popup.d.ts

@@ -26,7 +26,7 @@ export interface StrictPopupProps extends StrictPortalProps {
   content?: SemanticShorthandItem<PopupContentProps>
 
   /** Existing element the pop-up should be bound to. */
-  context?: object
+  context?: object | React.RefObject<HTMLElement>
 
   /** A disabled popup only renders its trigger. */
   disabled?: boolean

src/modules/Popup/Popup.js

@@ -14,6 +14,7 @@ import {
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
+  isRefObject,
 } from '../../lib'
 import Portal from '../../addons/Portal'
 import PopupContent from './PopupContent'
@@ -53,7 +54,7 @@ export default class Popup extends Component {
     content: customPropTypes.itemShorthand,
 
     /** Existing element the pop-up should be bound to. */
-    context: PropTypes.object,
+    context: PropTypes.oneOfType([PropTypes.object, customPropTypes.refObject]),
 
     /** A disabled popup only renders its trigger. */
     disabled: PropTypes.bool,
@@ -372,7 +373,12 @@ export default class Popup extends Component {
     this.setPopupStyle()
   }
 
-  getContext = () => this.props.context || this.triggerRef
+  getContext = () => {
+    const { context } = this.props
+    const contextFromProp = isRefObject(context) ? context.current : context
+
+    return contextFromProp || this.triggerRef
+  }
 
   render() {
     const {