From 3031598843080ff4fabb7bfb0ba823be6d545285 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 30 Jun 2018 13:23:13 -0700
Subject: Implement icon button

---
 packages/website/ts/components/ui/text.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index c1cb2ade4..315f72854 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -3,7 +3,7 @@ import { darken } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4';
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
 
 export interface TextProps {
     className?: string;
@@ -17,6 +17,7 @@ export interface TextProps {
     fontWeight?: number | string;
     textDecorationLine?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    hoverColor?: string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -37,7 +38,7 @@ export const Text = styled(PlainText)`
     ${props => (props.onClick ? 'cursor: pointer' : '')};
     transition: color 0.5s ease;
     &:hover {
-        ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')};
+        ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
     }
 `;
 
-- 
cgit v1.2.3


From be64184cfa11dcabd543161b5d7a6726d4e7924d Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 30 Jun 2018 13:51:40 -0700
Subject: Clean up a bit of the provider display logic

---
 packages/website/ts/components/ui/drop_down.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 22cb942f8..7d900d685 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -66,7 +66,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
                     useLayerForClickAway={false}
-                    animation={PopoverAnimationVertical}
+                    animated={false}
                     zDepth={this.props.zDepth}
                 >
                     <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
-- 
cgit v1.2.3


From da8cf9981eda4a068c22d0107e07b704afda2584 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 30 Jun 2018 14:25:33 -0700
Subject: Implement simple menu

---
 packages/website/ts/components/ui/container.tsx   |  1 +
 packages/website/ts/components/ui/drop_down.tsx   |  2 +-
 packages/website/ts/components/ui/simple_menu.tsx | 34 +++++++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 packages/website/ts/components/ui/simple_menu.tsx

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index fb718d731..edbf8814b 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -17,6 +17,7 @@ export interface ContainerProps {
     maxHeight?: StringOrNum;
     width?: StringOrNum;
     height?: StringOrNum;
+    minWidth?: StringOrNum;
     minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 7d900d685..3738e50eb 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -49,7 +49,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         // call hoverOff whenever the dropdown receives updated props. This is a hack
         // because it will effectively close the dropdown on any prop update, barring
         // dropdowns from having dynamic content.
-        this._onHoverOff();
+        // this._onHoverOff();
     }
     public render(): React.ReactNode {
         return (
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
new file mode 100644
index 000000000..29445c965
--- /dev/null
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -0,0 +1,34 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+
+export interface SimpleMenuProps {}
+
+export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children }) => {
+    return (
+        <Container
+            marginLeft="16px"
+            marginRight="16px"
+            marginBottom="16px"
+            minWidth="220px"
+            className="flex flex-column"
+        >
+            {children}
+        </Container>
+    );
+};
+
+export interface SimpleMenuItemProps {
+    text: string;
+    onClick?: () => void;
+}
+export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ text, onClick }) => (
+    <Container marginTop="16px" minWidth="220px" className="flex flex-column">
+        <Text fontSize="14px" fontColor={colors.darkGrey} onClick={onClick} hoverColor={colors.mediumBlue}>
+            {text}
+        </Text>
+    </Container>
+);
-- 
cgit v1.2.3


From a6f40d418704a8dca8c787663f00b6bcbdf18ba4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 13:31:43 -0700
Subject: Implement correct behavior for menu in the wallet

---
 packages/website/ts/components/ui/drop_down.tsx   | 27 ++++++++++++++++++-----
 packages/website/ts/components/ui/simple_menu.tsx | 14 ++++++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 3738e50eb..3f1fec3f4 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -8,12 +8,13 @@ const DEFAULT_STYLE = {
 };
 
 interface DropDownProps {
-    hoverActiveNode: React.ReactNode;
+    activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
     anchorOrigin: MaterialUIPosition;
     targetOrigin: MaterialUIPosition;
     style?: React.CSSProperties;
     zDepth?: number;
+    shouldWaitForClickToActivate?: boolean;
 }
 
 interface DropDownState {
@@ -25,6 +26,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
+        shouldWaitForClickToActivate: false,
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -49,7 +51,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         // call hoverOff whenever the dropdown receives updated props. This is a hack
         // because it will effectively close the dropdown on any prop update, barring
         // dropdowns from having dynamic content.
-        // this._onHoverOff();
+        this._onHoverOff();
     }
     public render(): React.ReactNode {
         return (
@@ -58,7 +60,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                 onMouseEnter={this._onHover.bind(this)}
                 onMouseLeave={this._onHoverOff.bind(this)}
             >
-                {this.props.hoverActiveNode}
+                <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
                 <Popover
                     open={this.state.isDropDownOpen}
                     anchorEl={this.state.anchorEl}
@@ -69,16 +71,31 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     animated={false}
                     zDepth={this.props.zDepth}
                 >
-                    <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
+                    <div
+                        onMouseEnter={this._onHover.bind(this)}
+                        onMouseLeave={this._onHoverOff.bind(this)}
+                        onClick={this._closePopover.bind(this)}
+                    >
                         {this.props.popoverContent}
                     </div>
                 </Popover>
             </div>
         );
     }
+    private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
+        event.stopPropagation();
+        if (this.props.shouldWaitForClickToActivate) {
+            this.setState({
+                isDropDownOpen: true,
+                anchorEl: event.currentTarget,
+            });
+        }
+    }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
         this._isHovering = true;
-        this._checkIfShouldOpenPopover(event);
+        if (!this.props.shouldWaitForClickToActivate) {
+            this._checkIfShouldOpenPopover(event);
+        }
     }
     private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
         if (this.state.isDropDownOpen) {
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 29445c965..22414d101 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -5,15 +5,17 @@ import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 
-export interface SimpleMenuProps {}
+export interface SimpleMenuProps {
+    minWidth?: number | string;
+}
 
-export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children }) => {
+export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children, minWidth }) => {
     return (
         <Container
             marginLeft="16px"
             marginRight="16px"
             marginBottom="16px"
-            minWidth="220px"
+            minWidth={minWidth}
             className="flex flex-column"
         >
             {children}
@@ -26,9 +28,13 @@ export interface SimpleMenuItemProps {
     onClick?: () => void;
 }
 export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ text, onClick }) => (
-    <Container marginTop="16px" minWidth="220px" className="flex flex-column">
+    <Container marginTop="16px" className="flex flex-column">
         <Text fontSize="14px" fontColor={colors.darkGrey} onClick={onClick} hoverColor={colors.mediumBlue}>
             {text}
         </Text>
     </Container>
 );
+
+SimpleMenu.defaultProps = {
+    minWidth: '220px',
+};
-- 
cgit v1.2.3


From 5a7908984e118f2babf7c0680bf17afa148f5122 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 14:34:50 -0700
Subject: Consolidate logic for common menu items

---
 packages/website/ts/components/ui/simple_menu.tsx | 66 +++++++++++++++++++----
 1 file changed, 56 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 22414d101..52d97b1ea 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,9 +1,12 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import { Link } from 'react-router-dom';
 
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
 
 export interface SimpleMenuProps {
     minWidth?: number | string;
@@ -23,18 +26,61 @@ export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children
     );
 };
 
+SimpleMenu.defaultProps = {
+    minWidth: '220px',
+};
+
 export interface SimpleMenuItemProps {
-    text: string;
+    displayText: string;
     onClick?: () => void;
 }
-export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ text, onClick }) => (
-    <Container marginTop="16px" className="flex flex-column">
-        <Text fontSize="14px" fontColor={colors.darkGrey} onClick={onClick} hoverColor={colors.mediumBlue}>
-            {text}
-        </Text>
-    </Container>
-);
+export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ displayText, onClick }) => {
+    // Falling back to _.noop for onclick retains the hovering effect
+    return (
+        <Container marginTop="16px" className="flex flex-column">
+            <Text
+                fontSize="14px"
+                fontColor={colors.darkGrey}
+                onClick={onClick || _.noop}
+                hoverColor={colors.mediumBlue}
+            >
+                {displayText}
+            </Text>
+        </Container>
+    );
+};
 
-SimpleMenu.defaultProps = {
-    minWidth: '220px',
+export interface CopyAddressSimpleMenuItemProps {
+    userAddress: string;
+    onClick?: () => void;
+}
+export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimpleMenuItemProps> = ({
+    userAddress,
+    onClick,
+}) => {
+    return (
+        <CopyToClipboard text={userAddress}>
+            <SimpleMenuItem displayText="Copy Address to Clipboard" onClick={onClick} />
+        </CopyToClipboard>
+    );
+};
+
+export interface LinkSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<LinkSimpleMenuItemProps> = ({ onClick }) => {
+    return (
+        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+            <SimpleMenuItem displayText="Manage Account..." onClick={_.noop} />
+        </Link>
+    );
+};
+
+export interface DifferentWalletSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const DifferentWalletSimpleMenuItem: React.StatelessComponent<DifferentWalletSimpleMenuItemProps> = ({
+    onClick,
+}) => {
+    return <SimpleMenuItem displayText="Use a Different Wallet..." onClick={onClick} />;
 };
-- 
cgit v1.2.3


From 2dea179333dd14ad74aea65bb6558aac3bb716f4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 14:44:14 -0700
Subject: More cleanup

---
 packages/website/ts/components/ui/drop_down.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 3f1fec3f4..947e51be0 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -83,7 +83,6 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         );
     }
     private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
-        event.stopPropagation();
         if (this.props.shouldWaitForClickToActivate) {
             this.setState({
                 isDropDownOpen: true,
-- 
cgit v1.2.3


From 86d4ffe7e561ec72aa41300fd6c1e8f493ba0306 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 14:48:01 -0700
Subject: Lint fixes

---
 packages/website/ts/components/ui/drop_down.tsx   | 2 +-
 packages/website/ts/components/ui/simple_menu.tsx | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 947e51be0..c21c69993 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,4 +1,4 @@
-import Popover, { PopoverAnimationVertical } from 'material-ui/Popover';
+import Popover from 'material-ui/Popover';
 import * as React from 'react';
 import { MaterialUIPosition } from 'ts/types';
 
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 52d97b1ea..c1cab07bd 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -65,10 +65,7 @@ export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimp
     );
 };
 
-export interface LinkSimpleMenuItemProps {
-    onClick?: () => void;
-}
-export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<LinkSimpleMenuItemProps> = ({ onClick }) => {
+export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<{}> = () => {
     return (
         <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
             <SimpleMenuItem displayText="Manage Account..." onClick={_.noop} />
-- 
cgit v1.2.3


From f2af6e4b3ae71abdd068a88bd5d686970649fe8d Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 3 Jul 2018 01:51:59 -0700
Subject: Add optional onClick to Link simple menu item

---
 packages/website/ts/components/ui/simple_menu.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index c1cab07bd..74b8ef6ae 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -65,10 +65,15 @@ export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimp
     );
 };
 
-export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<{}> = () => {
+export interface GoToAccountManagementSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
+    GoToAccountManagementSimpleMenuItemProps
+> = ({ onClick }) => {
     return (
         <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
-            <SimpleMenuItem displayText="Manage Account..." onClick={_.noop} />
+            <SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
         </Link>
     );
 };
-- 
cgit v1.2.3


From afbfc8ba1c8d4bf812e3087db50c6a9dd786be79 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 3 Jul 2018 09:06:29 -0700
Subject: Implement clickaway for wallet menu on mobile

---
 packages/website/ts/components/ui/drop_down.tsx | 32 +++++++++++++++----------
 1 file changed, 20 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index c21c69993..4d5caef08 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -7,14 +7,20 @@ const DEFAULT_STYLE = {
     fontSize: 14,
 };
 
-interface DropDownProps {
+export enum DropdownMouseEvent {
+    Hover = 'hover',
+    Click = 'click',
+}
+
+export interface DropDownProps {
     activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
     anchorOrigin: MaterialUIPosition;
     targetOrigin: MaterialUIPosition;
     style?: React.CSSProperties;
     zDepth?: number;
-    shouldWaitForClickToActivate?: boolean;
+    activateEvent?: DropdownMouseEvent;
+    closeEvent?: DropdownMouseEvent;
 }
 
 interface DropDownState {
@@ -26,7 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        shouldWaitForClickToActivate: false,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -67,7 +74,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     anchorOrigin={this.props.anchorOrigin}
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={false}
+                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
                     animated={false}
                     zDepth={this.props.zDepth}
                 >
@@ -83,7 +90,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         );
     }
     private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
-        if (this.props.shouldWaitForClickToActivate) {
+        if (this.props.activateEvent === DropdownMouseEvent.Click) {
             this.setState({
                 isDropDownOpen: true,
                 anchorEl: event.currentTarget,
@@ -92,28 +99,29 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
         this._isHovering = true;
-        if (!this.props.shouldWaitForClickToActivate) {
+        if (this.props.activateEvent === DropdownMouseEvent.Hover) {
             this._checkIfShouldOpenPopover(event);
         }
     }
+    private _onHoverOff(): void {
+        this._isHovering = false;
+    }
     private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
         if (this.state.isDropDownOpen) {
             return; // noop
         }
-
         this.setState({
             isDropDownOpen: true,
             anchorEl: event.currentTarget,
         });
     }
-    private _onHoverOff(): void {
-        this._isHovering = false;
-    }
     private _checkIfShouldClosePopover(): void {
-        if (!this.state.isDropDownOpen || this._isHovering) {
+        if (!this.state.isDropDownOpen) {
             return; // noop
         }
-        this._closePopover();
+        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
+            this._closePopover();
+        }
     }
     private _closePopover(): void {
         this.setState({
-- 
cgit v1.2.3