From 2427d05568675a506a0f61344d9f828b8fa47f12 Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Mon, 4 Mar 2019 21:11:41 +0300
Subject: [PATCH] Fix onHide in Menu, allow tooltips on focus

---
 components/menu/Menu.js       |  6 ++++++
 components/tooltip/Tooltip.js | 12 ++++++++++--
 components/tooltip/config.css |  8 ++++----
 components/tooltip/theme.css  |  2 +-
 package.json                  |  2 +-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 77333ac3..df6889f3 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -66,6 +66,12 @@ const factory = (MenuItem) => {
           : this.props.position;
         this.setState({ position, width, height });
       });
+      if (this.state.active) {
+        events.addEventsToDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick,
+        });
+      }
     }
 
     componentWillReceiveProps(nextProps) {
diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 171a27f9..7e8b205e 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -56,6 +56,7 @@ const tooltipFactory = (options = {}) => {
         ]),
         tooltipDelay: PropTypes.number,
         tooltipHideOnClick: PropTypes.bool,
+        tooltipOnFocus: PropTypes.bool,
         tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
         tooltipShowOnClick: PropTypes.bool,
       };
@@ -215,6 +216,7 @@ const tooltipFactory = (options = {}) => {
           onMouseEnter,       // eslint-disable-line no-unused-vars
           onMouseLeave,       // eslint-disable-line no-unused-vars
           tooltip,
+          tooltipOnFocus,     // eslint-disable-line no-unused-vars
           tooltipDelay,       // eslint-disable-line no-unused-vars
           tooltipHideOnClick, // eslint-disable-line no-unused-vars
           tooltipPosition,    // eslint-disable-line no-unused-vars
@@ -231,10 +233,16 @@ const tooltipFactory = (options = {}) => {
           ...other,
           className,
           onClick: this.handleClick,
-          onMouseEnter: this.handleMouseEnter,
-          onMouseLeave: this.handleMouseLeave,
         };
 
+        if (tooltipOnFocus) {
+          childProps.onFocus = this.handleMouseEnter;
+          childProps.onBlur = this.handleMouseLeave;
+        } else {
+          childProps.onMouseEnter = this.handleMouseEnter;
+          childProps.onMouseLeave = this.handleMouseLeave;
+        }
+
         const shouldPass = typeof ComposedComponent !== 'string' && defaultPassthrough;
         const finalProps = shouldPass ? { ...childProps, theme } : childProps;
 
diff --git a/components/tooltip/config.css b/components/tooltip/config.css
index 31acfbf6..584eab27 100644
--- a/components/tooltip/config.css
+++ b/components/tooltip/config.css
@@ -1,10 +1,10 @@
 :root {
   --tooltip-background: color(rgb(97, 97, 97) a(90%));
   --tooltip-margin: calc(0.5 * var(--unit));
-  --tooltip-border-radius: calc(0.2 * var(--unit));
+  --tooltip-border-radius: calc(0.5 * var(--unit));
   --tooltip-color: var(--color-white);
-  --tooltip-font-size: var(--unit);
-  --tooltip-max-width: calc(17 * var(--unit));
-  --tooltip-padding: calc(0.8 * var(--unit));
+  --tooltip-font-size: calc(1.5 * var(--unit));
+  --tooltip-max-width: calc(35 * var(--unit));
+  --tooltip-padding: calc(1.2 * var(--unit));
   --tooltip-animation-duration: 200ms;
 }
diff --git a/components/tooltip/theme.css b/components/tooltip/theme.css
index c3accfd2..f25ddc1c 100644
--- a/components/tooltip/theme.css
+++ b/components/tooltip/theme.css
@@ -7,7 +7,7 @@
   font-family: var(--preferred-font);
   font-size: var(--tooltip-font-size);
   font-weight: var(--font-weight-bold);
-  line-height: var(--font-size-small);
+  line-height: calc(1.1 * var(--tooltip-font-size));
   max-width: var(--tooltip-max-width);
   padding: var(--tooltip-margin);
   pointer-events: none;
diff --git a/package.json b/package.json
index 1f80e950..a8eac5bf 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.io",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "main": "./lib",
   "module": "./components",
   "author": {