fix: Make sure the exported components have a name

Previously in react dev tools they showed up as "Unknown"

Author: Federico Zivolo

src/Popper.js

@@ -52,7 +52,7 @@ const initialStyle = {
 
 const initialArrowStyle = {};
 
-export class Popper extends Component<PopperProps, PopperState> {
+export class InnerPopper extends Component<PopperProps, PopperState> {
   static defaultProps = {
     placement: 'bottom',
     eventsEnabled: true,
@@ -187,10 +187,12 @@ export class Popper extends Component<PopperProps, PopperState> {
 const placements = PopperJS.placements;
 export { placements };
 
-export default (props: PopperProps) => (
-  <ManagerContext.Consumer>
-    {({ referenceNode }) => (
-      <Popper referenceElement={referenceNode} {...props} />
-    )}
-  </ManagerContext.Consumer>
-);
+export default function Popper(props: PopperProps) {
+  return (
+    <ManagerContext.Consumer>
+      {({ referenceNode }) => (
+        <InnerPopper referenceElement={referenceNode} {...props} />
+      )}
+    </ManagerContext.Consumer>
+  );
+}

src/Popper.test.js

@@ -3,7 +3,7 @@ import React from "react";
 import { mount } from "enzyme";
 
 // Private API
-import { Popper as InnerPopper } from "./Popper";
+import { InnerPopper } from "./Popper";
 
 const mountPopper = props =>
   mount(

src/Reference.js

@@ -1,20 +1,23 @@
 // @flow
-import React, { type Node } from "react";
-import warning from "warning";
-import { ManagerContext } from "./Manager";
-import { unwrapArray } from "./utils";
+import React, { type Node } from 'react';
+import warning from 'warning';
+import { ManagerContext } from './Manager';
+import { unwrapArray } from './utils';
 
 type ReferenceProps = {
   children: ({ ref: (?HTMLElement) => void }) => Node,
 };
-export default ({ children }: ReferenceProps) => (
-  <ManagerContext.Consumer>
-    {({ getReferenceRef }) => {
-      warning(
-        getReferenceRef,
-        "`Reference` should not be used outside of a `Manager` component."
-      );
-      return unwrapArray(children)({ ref: getReferenceRef });
-    }}
-  </ManagerContext.Consumer>
-);
+
+export default function Reference({ children }: ReferenceProps) {
+  return (
+    <ManagerContext.Consumer>
+      {({ getReferenceRef }) => {
+        warning(
+          getReferenceRef,
+          '`Reference` should not be used outside of a `Manager` component.'
+        );
+        return unwrapArray(children)({ ref: getReferenceRef });
+      }}
+    </ManagerContext.Consumer>
+  );
+}

src/__snapshots__/Popper.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Popper component renders the expected markup 1`] = `
-<Popper
+<InnerPopper
   eventsEnabled={true}
   placement="bottom"
   positionFixed={false}
@@ -22,5 +22,5 @@ exports[`Popper component renders the expected markup 1`] = `
       style={Object {}}
     />
   </div>
-</Popper>
+</InnerPopper>
 `;

src/__snapshots__/Reference.test.js.snap

@@ -15,10 +15,10 @@ exports[`Arrow component renders the expected markup 1`] = `
     }
   }
 >
-  <Component>
+  <Reference>
     <Consumer>
       <div />
     </Consumer>
-  </Component>
+  </Reference>
 </Provider>
 `;