Forward Ref Stub

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -33,6 +33,9 @@ exports[`loads more comments 1`] = `
           onBlur={[Function]}
           onFocus={[Function]}
           onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
         >
           Post
         </button>
@@ -169,6 +172,9 @@ exports[`renders comment stream 1`] = `
           onBlur={[Function]}
           onFocus={[Function]}
           onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
         >
           Post
         </button>
@@ -247,6 +253,9 @@ exports[`renders comment stream 1`] = `
         onClick={[Function]}
         onFocus={[Function]}
         onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
       >
         Load More
       </button>

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -33,6 +33,9 @@ exports[`renders comment stream 1`] = `
           onBlur={[Function]}
           onFocus={[Function]}
           onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
         >
           Post
         </button>

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -33,6 +33,9 @@ exports[`renders comment stream 1`] = `
           onBlur={[Function]}
           onFocus={[Function]}
           onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
         >
           Post
         </button>

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -33,6 +33,9 @@ exports[`renders comment stream 1`] = `
           onBlur={[Function]}
           onFocus={[Function]}
           onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
         >
           Post
         </button>
@@ -114,6 +117,9 @@ exports[`renders comment stream 1`] = `
               onClick={[Function]}
               onFocus={[Function]}
               onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
             >
               Show All Replies
             </button>
@@ -158,6 +164,9 @@ exports[`show all replies 1`] = `
           onBlur={[Function]}
           onFocus={[Function]}
           onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
         >
           Post
         </button>

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

@@ -1,8 +1,13 @@
 import cn from "classnames";
-import React from "react";
+import React, { Ref } from "react";
 import { ButtonHTMLAttributes, StatelessComponent } from "react";
 
-import { withKeyboardFocus, withMouseHover, withStyles } from "talk-ui/hocs";
+import {
+  withForwardRef,
+  withKeyboardFocus,
+  withMouseHover,
+  withStyles,
+} from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
 
 import * as styles from "./BaseButton.css";
@@ -10,7 +15,6 @@ import * as styles from "./BaseButton.css";
 interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** If set renders an anchor tag instead */
   anchor?: boolean;
-
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -22,6 +26,12 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** This is passed by the `withMouseHover` HOC */
   mouseHover?: boolean;
+
+  /** ref to the HTMLButtonElement */
+  ref?: Ref<HTMLButtonElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement>;
 }
 
 /**
@@ -34,6 +44,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   classes,
   keyboardFocus,
   mouseHover,
+  forwardRef,
   type: typeProp,
   ...rest
 }) => {
@@ -58,11 +69,11 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.mouseHover]: mouseHover,
   });
 
-  return <Element {...rest} className={rootClassName} />;
+  return <Element {...rest} className={rootClassName} ref={forwardRef} />;
 };
 
-const enhanced = withStyles(styles)(
-  withMouseHover(withKeyboardFocus(BaseButton))
+const enhanced = withForwardRef(
+  withStyles(styles)(withMouseHover(withKeyboardFocus(BaseButton)))
 );
 export type BaseButtonProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

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

@@ -1,8 +1,8 @@
 import cn from "classnames";
 import { pick } from "lodash";
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes, Ref } from "react";
 
-import { withStyles } from "talk-ui/hocs";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
 
 import BaseButton, { BaseButtonProps } from "../BaseButton";
@@ -28,6 +28,12 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** If set renders a button with secondary colors */
   secondary?: boolean;
+
+  /** ref to the HTMLButtonElement */
+  ref?: Ref<HTMLButtonElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement>;
 }
 
 class Button extends React.Component<InnerProps> {
@@ -40,6 +46,7 @@ class Button extends React.Component<InnerProps> {
       primary,
       secondary,
       disabled,
+      forwardRef,
       ...rest
     } = this.props;
 
@@ -57,12 +64,13 @@ class Button extends React.Component<InnerProps> {
         className={rootClassName}
         classes={pick(classes, "keyboardFocus", "mouseHover")}
         disabled={disabled}
+        ref={forwardRef}
         {...rest}
       />
     );
   }
 }
 
-const enhanced = withStyles(styles)(Button);
+const enhanced = withForwardRef(withStyles(styles)(Button));
 export type ButtonProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

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

@@ -1,8 +1,9 @@
 import cn from "classnames";
-import React from "react";
+import React, { Ref } from "react";
 import { StatelessComponent } from "react";
 
 import { pascalCase } from "talk-common/utils";
+import { withForwardRef } from "talk-ui/hocs";
 
 import * as styles from "./Flex.css";
 
@@ -21,6 +22,12 @@ interface InnerProps {
   itemGutter?: boolean | "half";
   className?: string;
   wrap?: boolean | "reverse";
+
+  /** Ref to the root element */
+  ref?: Ref<HTMLDivElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
 }
 
 const Flex: StatelessComponent<InnerProps> = props => {
@@ -31,6 +38,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
     direction,
     itemGutter,
     wrap,
+    forwardRef,
     ...rest
   } = props;
 
@@ -55,7 +63,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
 
   const classNames: string = cn(styles.root, className, classObject);
 
-  return <div className={classNames} {...rest} />;
+  return <div ref={forwardRef} className={classNames} {...rest} />;
 };
 
-export default Flex;
+export default withForwardRef(Flex);

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

@@ -1,9 +1,9 @@
 import cn from "classnames";
-import React from "react";
+import React, { Ref } from "react";
 import TimeAgo, { Formatter } from "react-timeago";
 
 import { UIContext } from "talk-ui/components";
-import { withStyles } from "talk-ui/hocs";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
 
 import * as styles from "./RelativeTime.css";
@@ -14,6 +14,12 @@ interface InnerProps {
   classes: typeof styles;
   className?: string;
   formatter?: Formatter;
+
+  /** Ref to the root element */
+  ref?: Ref<HTMLDivElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
 }
 
 const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
@@ -37,6 +43,6 @@ class RelativeTime extends React.Component<InnerProps> {
   }
 }
 
-const enhanced = withStyles(styles)(RelativeTime);
+const enhanced = withForwardRef(withStyles(styles)(RelativeTime));
 export type RelativeTimeProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

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

@@ -1,8 +1,8 @@
 import cn from "classnames";
-import React from "react";
+import React, { Ref } from "react";
 import { HTMLAttributes, ReactNode, StatelessComponent } from "react";
 
-import { withStyles } from "talk-ui/hocs";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
 
 import * as styles from "./Typography.css";
@@ -77,6 +77,12 @@ interface InnerProps extends HTMLAttributes<any> {
    * Applies the theme typography styles.
    */
   variant?: Variant;
+
+  /** Ref to the root element */
+  ref?: Ref<HTMLElement>;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLElement>;
 }
 
 const Typography: StatelessComponent<InnerProps> = props => {
@@ -91,6 +97,7 @@ const Typography: StatelessComponent<InnerProps> = props => {
     noWrap,
     paragraph,
     variant,
+    forwardRef,
     ...rest
   } = props;
 
@@ -116,7 +123,7 @@ const Typography: StatelessComponent<InnerProps> = props => {
   const Component =
     component || (paragraph ? "p" : headlineMapping![variant!]) || "span";
 
-  return <Component className={rootClassName} {...rest} />;
+  return <Component ref={forwardRef} className={rootClassName} {...rest} />;
 };
 
 Typography.defaultProps = {
@@ -139,6 +146,6 @@ Typography.defaultProps = {
   variant: "body1",
 };
 
-const enhanced = withStyles(styles)(Typography);
+const enhanced = withForwardRef(withStyles(styles)(Typography));
 export type CenterProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

src/core/client/ui/hocs/index.ts

@@ -1,3 +1,4 @@
 export { default as withStyles } from "./withStyles";
 export { default as withKeyboardFocus } from "./withKeyboardFocus";
 export { default as withMouseHover } from "./withMouseHover";
+export { default as withForwardRef } from "./withForwardRef";

src/core/client/ui/hocs/withForwardRef.tsx

@@ -0,0 +1,36 @@
+import React, { Ref } from "react";
+
+// TODO: ForwardRef API is not supported in enzymes shallow rendering
+// https://github.com/airbnb/enzyme/issues/1553
+// As for now we do props passing instead until full React16 support lands in
+// enzyme.
+
+/**
+ * withForwardRef provides a property called `forwardRef` using
+ * the `React.forwardRef` api.
+ */
+/*
+function withForwardRef<P extends { ref?: Ref<any>; forwardRef?: Ref<any> }>(
+  BaseComponent: React.ComponentType<P>
+): React.ComponentType<Omit<P, "forwardRef">> {
+  const forwardRef: RefForwardingComponent<any, P> = (props, ref) => (
+    <BaseComponent {...props} forwardRef={ref} />
+  );
+  return React.forwardRef<any, P>(forwardRef);
+}
+
+// TODO: workaround, add bug link.
+export default withForwardRef as <
+  P extends { ref?: Ref<any>; forwardRef?: Ref<any> }
+>(
+  BaseComponent: React.ComponentType<P>
+) => React.ComponentType<P>;
+
+*/
+
+// Stub, currently doesn't do anything except adding types.
+export default function withForwardRef<P extends { forwardRef?: Ref<any> }>(
+  BaseComponent: React.ComponentType<P>
+): React.ComponentType<P> {
+  return BaseComponent;
+}

src/core/client/ui/hocs/withKeyboardFocus.tsx

@@ -14,7 +14,7 @@ interface InjectedProps {
  * to indicate a focus on the element, that wasn't triggered by mouse
  * or touch.
  */
-export default hoistStatics<InjectedProps>(
+const withKeyboardFocus = hoistStatics<InjectedProps>(
   <T extends InjectedProps>(WrappedComponent: React.ComponentType<T>) => {
     class WithKeyboardFocus extends React.Component<any> {
       public state = {
@@ -61,5 +61,9 @@ export default hoistStatics<InjectedProps>(
 
     return WithKeyboardFocus as React.ComponentType<any>;
   }
-  // TODO: workaround, add bug link.
-) as <T>(WrappedComponent: T) => T;
+);
+
+// TODO: workaround, add bug link.
+export default withKeyboardFocus as <P extends Partial<InjectedProps>>(
+  WrappedComponent: React.ComponentType<P>
+) => React.ComponentType<P>;

src/core/client/ui/hocs/withMouseHover.tsx

@@ -14,7 +14,7 @@ interface InjectedProps {
  * to indicate a focus on the element, that wasn't triggered by mouse
  * or touch.
  */
-export default hoistStatics<InjectedProps>(
+const withMouseHover = hoistStatics<InjectedProps>(
   <T extends InjectedProps>(WrappedComponent: React.ComponentType<T>) => {
     class WithMouseHover extends React.Component<any> {
       public state = {
@@ -61,5 +61,9 @@ export default hoistStatics<InjectedProps>(
 
     return WithMouseHover as React.ComponentType<any>;
   }
-  // TODO: workaround, add bug link.
-) as <T>(WrappedComponent: T) => T;
+);
+
+// TODO: workaround, add bug link.
+export default withMouseHover as <P extends Partial<InjectedProps>>(
+  WrappedComponent: React.ComponentType<P>
+) => React.ComponentType<P>;