wip

package.json

@@ -134,15 +134,15 @@
     "query-string": "^6.1.0",
     "raw-loader": "^0.5.1",
     "react": "^16.4.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "6.0.0-next.3e165448",
     "react-dom": "^16.4.0",
     "react-final-form": "^3.6.4",
+    "react-popper": "^1.0.0-beta.6",
     "react-relay": "github:coralproject/patched#react-relay",
     "react-responsive": "^4.1.0",
     "react-test-renderer": "^16.4.1",
     "react-timeago": "^4.1.9",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-popper": "^1.0.0-beta.6",
     "recompose": "^0.27.1",
     "relay-compiler": "github:coralproject/patched#relay-compiler",
     "relay-compiler-language-typescript": "github:coralproject/patched#relay-compiler-language-typescript",

src/core/client/stream/components/Comment/Comment.tsx

@@ -26,9 +26,14 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <Popover body={<PermalinkPopover commentId={props.id} />}>
-          {({ toggleShow, ref }) => (
-            <Button onClick={toggleShow} innerRef={ref} primary>
+        <Popover
+          // tslint:disable-next-line:jsx-no-lambda
+          body={({ forwardRef }) => (
+            <PermalinkPopover commentId={props.id} forwardRef={forwardRef} />
+          )}
+        >
+          {({ toggleVisibility, forwardRef }) => (
+            <Button onClick={toggleVisibility} forwardRef={forwardRef}>
               <Localized id="comments-permalink-share">
                 <span>Share</span>
               </Localized>

src/core/client/ui/components/Popover/Popover.tsx

@@ -1,40 +1,84 @@
-import React from "react";
-import { RefHandler } from "react-popper";
-import Attachment from "../Attachment";
+import cn from "classnames";
+import React, { CSSProperties } from "react";
+import { Manager, Popper, Reference, RefHandler } from "react-popper";
+import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
 interface RenderProps {
-  toggleShow?: () => void;
-  ref?: RefHandler;
+  toggleVisibility?: () => void;
+  forwardRef?: RefHandler;
 }
 
 interface InnerProps {
-  body: React.ReactElement<any> | null;
+  body: (props: RenderProps) => any;
+  // body: React.ReactElement<any> | null;
   children: (props: RenderProps) => any;
+  description: string;
+  id?: string;
+  onClose?: () => void;
+  className?: string;
 }
 
 interface State {
-  show: false;
+  visible: false;
+}
+
+interface Props {
+  ref: any;
+  style: CSSProperties;
 }
 
 class Popover extends React.Component<InnerProps> {
   public state: State = {
-    show: false,
+    visible: false,
   };
 
-  public toggleShow = () => {
+  public toggleVisibility = () => {
     this.setState((state: State) => ({
-      show: !state.show,
+      visible: !state.visible,
     }));
   };
 
   public render() {
-    const { body, children } = this.props;
-    const { show } = this.state;
+    const { id, body, children, description, className } = this.props;
+
+    const { visible } = this.state;
+
     return (
-      <Attachment body={show ? body : null} className={styles.root}>
-        {({ ref }) => children({ toggleShow: this.toggleShow, ref })}
-      </Attachment>
+      <Manager>
+        <Reference>
+          {(props: Props) => children({ forwardRef: props.ref })}
+        </Reference>
+        <Popper
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {(props: Props) => (
+            <div
+              id={id}
+              aria-role="popup"
+              aria-labelledby={`${id}-ariainfo`}
+              aria-hidden={!visible}
+            >
+              <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+
+              {/* <ClickOutside onClickOutside={onClose}> */}
+              <div
+                style={props.style}
+                className={cn(styles.root, className)}
+                ref={props.ref}
+              >
+                {body({
+                  toggleVisibility: this.toggleVisibility,
+                  forwardRef: props.ref,
+                })}
+              </div>
+              {/* </ClickOutside> */}
+            </div>
+          )}
+        </Popper>
+      </Manager>
     );
   }
 }