Link class reference types exported in same package to their declaration

8 files changed, 68 insertions, 16 deletions

diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index f4f1d2aa9..82e444018 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -30,8 +30,8 @@ import {
 import { Badge } from './badge';
 import { Comment } from './comment';
 import { EventDefinition } from './event_definition';
-import { SignatureBlock } from './signature_block';
 import { PropertyBlock } from './property_block';
+import { SignatureBlock } from './signature_block';
 import { TypeDefinition } from './type_definition';
 
 const networkNameToColor: { [network: string]: string } = {
@@ -225,6 +225,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                     customType={customType}
                     docsInfo={this.props.docsInfo}
                     typeDefinitionByName={typeDefinitionByName}
+                    isInPopover={false}
                 />
             );
         });
diff --git a/packages/react-docs/src/components/event_definition.tsx b/packages/react-docs/src/components/event_definition.tsx
index b4dc729a9..6cb80c6b0 100644
--- a/packages/react-docs/src/components/event_definition.tsx
+++ b/packages/react-docs/src/components/event_definition.tsx
@@ -53,7 +53,12 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
         const indexed = <span style={{ color: colors.green }}> indexed</span>;
         const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
             const type = (
-                <Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
+                <Type
+                    type={eventArg.type}
+                    sectionName={this.props.sectionName}
+                    docsInfo={this.props.docsInfo}
+                    isInPopover={false}
+                />
             );
             return (
                 <span key={`eventArg-${eventArg.name}`}>
diff --git a/packages/react-docs/src/components/interface.tsx b/packages/react-docs/src/components/interface.tsx
index eaf57ce93..93b10e96d 100644
--- a/packages/react-docs/src/components/interface.tsx
+++ b/packages/react-docs/src/components/interface.tsx
@@ -7,14 +7,17 @@ import { CustomType, TypeDefinitionByName } from '../types';
 import { Signature } from './signature';
 import { Type } from './type';
 
+const defaultProps = {};
+
 export interface InterfaceProps {
     type: CustomType;
     sectionName: string;
     docsInfo: DocsInfo;
     typeDefinitionByName: TypeDefinitionByName;
+    isInPopover: boolean;
 }
 
-export const Interface = (props: InterfaceProps) => {
+export const Interface: React.SFC<InterfaceProps> = (props: InterfaceProps): any => {
     const type = props.type;
     const properties = _.map(type.children, property => {
         return (
@@ -31,6 +34,7 @@ export const Interface = (props: InterfaceProps) => {
                         shouldUseArrowSyntax={true}
                         docsInfo={props.docsInfo}
                         typeDefinitionByName={props.typeDefinitionByName}
+                        isInPopover={props.isInPopover}
                     />
                 ) : (
                     <Type
@@ -38,6 +42,7 @@ export const Interface = (props: InterfaceProps) => {
                         sectionName={props.sectionName}
                         docsInfo={props.docsInfo}
                         typeDefinitionByName={props.typeDefinitionByName}
+                        isInPopover={props.isInPopover}
                     />
                 )},
             </span>
@@ -54,6 +59,7 @@ export const Interface = (props: InterfaceProps) => {
                     sectionName={props.sectionName}
                     docsInfo={props.docsInfo}
                     typeDefinitionByName={props.typeDefinitionByName}
+                    isInPopover={props.isInPopover}
                 />
             </span>
         );
@@ -77,3 +83,5 @@ export const Interface = (props: InterfaceProps) => {
         </span>
     );
 };
+
+Interface.defaultProps = defaultProps;
diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx
index 6e5c451be..f181e21d2 100644
--- a/packages/react-docs/src/components/property_block.tsx
+++ b/packages/react-docs/src/components/property_block.tsx
@@ -6,8 +6,8 @@ import { Property, TypeDefinitionByName } from '../types';
 import { constants } from '../utils/constants';
 
 import { Comment } from './comment';
-import { Type } from './type';
 import { SourceLink } from './source_link';
+import { Type } from './type';
 
 export interface PropertyBlockProps {
     property: Property;
@@ -56,6 +56,7 @@ export class PropertyBlock extends React.Component<PropertyBlockProps, PropertyB
                         sectionName={sectionName}
                         docsInfo={this.props.docsInfo}
                         typeDefinitionByName={this.props.typeDefinitionByName}
+                        isInPopover={false}
                     />
                 </code>
                 {property.source && (
diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx
index d9567c9f6..bf9c8be24 100644
--- a/packages/react-docs/src/components/signature.tsx
+++ b/packages/react-docs/src/components/signature.tsx
@@ -17,6 +17,7 @@ export interface SignatureProps {
     typeParameter?: TypeParameter;
     callPath?: string;
     docsInfo: DocsInfo;
+    isInPopover: boolean;
 }
 
 const defaultProps = {
@@ -27,7 +28,13 @@ const defaultProps = {
 
 export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => {
     const sectionName = props.sectionName;
-    const parameters = renderParameters(props.parameters, props.docsInfo, sectionName, props.typeDefinitionByName);
+    const parameters = renderParameters(
+        props.parameters,
+        props.docsInfo,
+        sectionName,
+        props.isInPopover,
+        props.typeDefinitionByName,
+    );
     const paramStringArray: any[] = [];
     // HACK: For now we don't put params on newlines if there are less then 2 of them.
     // Ideally we would check the character length of the resulting method signature and
@@ -57,7 +64,13 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => {
     const methodName = props.shouldHideMethodName ? '' : props.name;
     const typeParameterIfExists = _.isUndefined(props.typeParameter)
         ? undefined
-        : renderTypeParameter(props.typeParameter, props.docsInfo, sectionName, props.typeDefinitionByName);
+        : renderTypeParameter(
+              props.typeParameter,
+              props.docsInfo,
+              sectionName,
+              props.isInPopover,
+              props.typeDefinitionByName,
+          );
     return (
         <span style={{ fontSize: 15 }}>
             {props.callPath}
@@ -72,6 +85,7 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => {
                         sectionName={sectionName}
                         typeDefinitionByName={props.typeDefinitionByName}
                         docsInfo={props.docsInfo}
+                        isInPopover={props.isInPopover}
                     />
                 </span>
             )}
@@ -85,6 +99,7 @@ function renderParameters(
     parameters: Parameter[],
     docsInfo: DocsInfo,
     sectionName: string,
+    isInPopover: boolean,
     typeDefinitionByName?: TypeDefinitionByName,
 ): React.ReactNode[] {
     const params = _.map(parameters, (p: Parameter) => {
@@ -96,6 +111,7 @@ function renderParameters(
                 sectionName={sectionName}
                 typeDefinitionByName={typeDefinitionByName}
                 docsInfo={docsInfo}
+                isInPopover={isInPopover}
             />
         );
         return (
@@ -113,6 +129,7 @@ function renderTypeParameter(
     typeParameter: TypeParameter,
     docsInfo: DocsInfo,
     sectionName: string,
+    isInPopover: boolean,
     typeDefinitionByName?: TypeDefinitionByName,
 ): React.ReactNode {
     const typeParam = (
@@ -123,6 +140,7 @@ function renderTypeParameter(
                 sectionName={sectionName}
                 typeDefinitionByName={typeDefinitionByName}
                 docsInfo={docsInfo}
+                isInPopover={isInPopover}
             />
             {`>`}
         </span>
diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx
index 9e5198e16..934232efe 100644
--- a/packages/react-docs/src/components/signature_block.tsx
+++ b/packages/react-docs/src/components/signature_block.tsx
@@ -81,6 +81,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
                         sectionName={this.props.sectionName}
                         typeDefinitionByName={this.props.typeDefinitionByName}
                         docsInfo={this.props.docsInfo}
+                        isInPopover={false}
                     />
                 </code>
                 {(method as TypescriptMethod).source && (
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx
index 1c580caab..eae52e950 100644
--- a/packages/react-docs/src/components/type.tsx
+++ b/packages/react-docs/src/components/type.tsx
@@ -7,23 +7,26 @@ import * as ReactTooltip from 'react-tooltip';
 
 import { DocsInfo } from '../docs_info';
 import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types';
+import { constants } from '../utils/constants';
 
 import { Signature } from './signature';
-import { constants } from '../utils/constants';
 import { TypeDefinition } from './type_definition';
 
 const basicJsTypes = ['string', 'number', 'undefined', 'null', 'boolean'];
 
+const defaultProps = {};
+
 export interface TypeProps {
     type: TypeDef;
     docsInfo: DocsInfo;
     sectionName: string;
     typeDefinitionByName?: TypeDefinitionByName;
+    isInPopover: boolean;
 }
 
 // The return type needs to be `any` here so that we can recursively define <Type /> components within
 // <Type /> components (e.g when rendering the union type).
-export function Type(props: TypeProps): any {
+export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
     const type = props.type;
     const isReference = type.typeDocType === TypeDocTypes.Reference;
     const isArray = type.typeDocType === TypeDocTypes.Array;
@@ -50,6 +53,7 @@ export function Type(props: TypeProps): any {
                                 sectionName={props.sectionName}
                                 typeDefinitionByName={props.typeDefinitionByName}
                                 docsInfo={props.docsInfo}
+                                isInPopover={props.isInPopover}
                             />[]
                         </span>
                     );
@@ -61,6 +65,7 @@ export function Type(props: TypeProps): any {
                             sectionName={props.sectionName}
                             typeDefinitionByName={props.typeDefinitionByName}
                             docsInfo={props.docsInfo}
+                            isInPopover={props.isInPopover}
                         />
                     );
                     return subType;
@@ -89,6 +94,7 @@ export function Type(props: TypeProps): any {
                         sectionName={props.sectionName}
                         typeDefinitionByName={props.typeDefinitionByName}
                         docsInfo={props.docsInfo}
+                        isInPopover={props.isInPopover}
                     />
                 );
             });
@@ -110,6 +116,7 @@ export function Type(props: TypeProps): any {
                         shouldUseArrowSyntax={true}
                         docsInfo={props.docsInfo}
                         typeDefinitionByName={props.typeDefinitionByName}
+                        isInPopover={props.isInPopover}
                     />
                 );
             } else if (!_.isUndefined(type.indexSignature)) {
@@ -122,6 +129,7 @@ export function Type(props: TypeProps): any {
                             sectionName={props.sectionName}
                             docsInfo={props.docsInfo}
                             typeDefinitionByName={props.typeDefinitionByName}
+                            isInPopover={props.isInPopover}
                         />
                     </span>
                 );
@@ -150,6 +158,7 @@ export function Type(props: TypeProps): any {
                         sectionName={props.sectionName}
                         typeDefinitionByName={props.typeDefinitionByName}
                         docsInfo={props.docsInfo}
+                        isInPopover={props.isInPopover}
                     />
                 );
             });
@@ -180,6 +189,7 @@ export function Type(props: TypeProps): any {
             ? props.docsInfo.typeConfigs.typeNameToPrefix[typeName as string]
             : undefined;
     }
+    const isExportedClassReference = !!props.type.isExportedClassReference;
     if (!_.isUndefined(typeNameUrlIfExists)) {
         typeName = (
             <a
@@ -194,12 +204,12 @@ export function Type(props: TypeProps): any {
         );
     } else if (
         (isReference || isArray) &&
-        props.typeDefinitionByName &&
-        props.typeDefinitionByName[typeName as string]
+        ((props.typeDefinitionByName && props.typeDefinitionByName[typeName as string]) || isExportedClassReference)
     ) {
         const id = Math.random().toString();
-        const typeDefinitionAnchorId = `${constants.TYPES_SECTION_NAME}-${typeName}`;
-        let typeDefinition = props.typeDefinitionByName[typeName as string];
+        const typeDefinitionAnchorId = isExportedClassReference
+            ? props.type.name
+            : `${constants.TYPES_SECTION_NAME}-${typeName}`;
         typeName = (
             <ScrollLink
                 to={typeDefinitionAnchorId}
@@ -208,7 +218,7 @@ export function Type(props: TypeProps): any {
                 duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
                 containerId={sharedConstants.DOCS_CONTAINER_ID}
             >
-                {sharedUtils.isUserOnMobile() ? (
+                {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
                     <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
                 ) : (
                     <span
@@ -224,10 +234,11 @@ export function Type(props: TypeProps): any {
                         <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
                             <TypeDefinition
                                 sectionName={props.sectionName}
-                                customType={typeDefinition}
+                                customType={props.typeDefinitionByName[typeName as string]}
                                 shouldAddId={false}
                                 docsInfo={props.docsInfo}
                                 typeDefinitionByName={props.typeDefinitionByName}
+                                isInPopover={true}
                             />
                         </ReactTooltip>
                     </span>
@@ -248,4 +259,6 @@ export function Type(props: TypeProps): any {
             )}
         </span>
     );
-}
+};
+
+Type.defaultProps = defaultProps;
diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
index 775d9890f..8d1f88490 100644
--- a/packages/react-docs/src/components/type_definition.tsx
+++ b/packages/react-docs/src/components/type_definition.tsx
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { DocsInfo } from '../docs_info';
-import { CustomType, CustomTypeChild, KindString, TypeDocTypes, TypeDefinitionByName } from '../types';
+import { CustomType, CustomTypeChild, KindString, TypeDefinitionByName, TypeDocTypes } from '../types';
 import { constants } from '../utils/constants';
 
 import { Comment } from './comment';
@@ -20,6 +20,7 @@ export interface TypeDefinitionProps {
     shouldAddId?: boolean;
     docsInfo: DocsInfo;
     typeDefinitionByName?: TypeDefinitionByName;
+    isInPopover?: boolean;
 }
 
 export interface TypeDefinitionState {
@@ -29,6 +30,7 @@ export interface TypeDefinitionState {
 export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDefinitionState> {
     public static defaultProps: Partial<TypeDefinitionProps> = {
         shouldAddId: true,
+        isInPopover: false,
     };
     constructor(props: TypeDefinitionProps) {
         super(props);
@@ -50,6 +52,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                         sectionName={this.props.sectionName}
                         docsInfo={this.props.docsInfo}
                         typeDefinitionByName={this.props.typeDefinitionByName}
+                        isInPopover={this.props.isInPopover}
                     />
                 );
                 break;
@@ -81,6 +84,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                                 sectionName={this.props.sectionName}
                                 docsInfo={this.props.docsInfo}
                                 typeDefinitionByName={this.props.typeDefinitionByName}
+                                isInPopover={this.props.isInPopover}
                             />
                         ) : (
                             <Signature
@@ -94,6 +98,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                                 shouldUseArrowSyntax={true}
                                 docsInfo={this.props.docsInfo}
                                 typeDefinitionByName={this.props.typeDefinitionByName}
+                                isInPopover={this.props.isInPopover}
                             />
                         )}
                     </span>