1 files changed, 20 insertions, 23 deletions
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 752c92e02..638b29f88 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,6 +1,6 @@
-import Popover from 'material-ui/Popover';
 import * as React from 'react';
-import { MaterialUIPosition } from 'ts/types';
+import { Placement } from 'react-popper';
+import { Popover } from 'ts/components/ui/popover';
 
 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
 const DEFAULT_STYLE = {
@@ -15,8 +15,7 @@ export enum DropdownMouseEvent {
 export interface DropDownProps {
     activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
-    anchorOrigin: MaterialUIPosition;
-    targetOrigin: MaterialUIPosition;
+    placement?: Placement;
     style?: React.CSSProperties;
     zDepth?: number;
     activateEvent?: DropdownMouseEvent;
@@ -33,8 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        activateEvent: DropdownMouseEvent.Hover,
-        closeEvent: DropdownMouseEvent.Hover,
+        activateEvent: DropdownMouseEvent.Click,
+        closeEvent: DropdownMouseEvent.Click,
     };
     private _popoverCloseCheckIntervalId: number;
     public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -70,24 +69,22 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                 onMouseLeave={this._onHoverOff.bind(this)}
             >
                 <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
-                <Popover
-                    open={this.state.isDropDownOpen}
-                    anchorEl={this.state.anchorEl}
-                    anchorOrigin={this.props.anchorOrigin}
-                    targetOrigin={this.props.targetOrigin}
-                    onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
-                    animated={false}
-                    zDepth={this.props.zDepth}
-                >
-                    <div
-                        onMouseEnter={this._onHover.bind(this)}
-                        onMouseLeave={this._onHoverOff.bind(this)}
-                        onClick={this._closePopover.bind(this)}
+                {this.state.isDropDownOpen &&
+                    <Popover
+                        anchorEl={this.state.anchorEl}
+                        placement={this.props.placement}
+                        onRequestClose={this._closePopover.bind(this)}
+                        zIndex={this.props.zDepth}
                     >
-                        {this.props.popoverContent}
-                    </div>
-                </Popover>
+                        <div
+                            onMouseEnter={this._onHover.bind(this)}
+                            onMouseLeave={this._onHoverOff.bind(this)}
+                            onClick={this._closePopover.bind(this)}
+                        >
+                            {this.props.popoverContent}
+                        </div>
+                    </Popover>
+                }
             </div>
         );
     }