From a031dffd2a93c0ce0fbd94a78825a6bce01b8334 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Sat, 23 Feb 2019 11:25:11 +0200
Subject: [PATCH] feat(Popup): support an object from `createRef()` as context
 value (#3459)

---
 .../Popup/Usage/PopupExampleContext.js        | 18 +++++++++---------
 .../Usage/PopupExampleContextControlled.js    | 19 +++++++++++--------
 src/modules/Popup/Popup.d.ts                  |  2 +-
 src/modules/Popup/Popup.js                    | 10 ++++++++--
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
index 1aba53511a..d721b141a7 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
+++ b/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>
     )
   }
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
index 7ee1320bfd..38432de0cd 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
+++ b/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>
     )
   }
 }
diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
index 2bf23b1cc5..5649e67a10 100644
--- a/src/modules/Popup/Popup.d.ts
+++ b/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
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 4f5084454b..cb8c49def8 100644
--- a/src/modules/Popup/Popup.js
+++ b/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 {