@cloudflare/component-tooltip 2.7.94 → 2.7.98

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.98](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-tooltip@2.7.97...@cloudflare/component-tooltip@2.7.98) (2021-11-17)
+
+**Note:** Version bump only for package @cloudflare/component-tooltip
+
+
+
+
+
+## [2.7.97](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-tooltip@2.7.96...@cloudflare/component-tooltip@2.7.97) (2021-11-16)
+
+**Note:** Version bump only for package @cloudflare/component-tooltip
+
+
+
+
+
+## [2.7.96](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-tooltip@2.7.95...@cloudflare/component-tooltip@2.7.96) (2021-11-16)
+
+**Note:** Version bump only for package @cloudflare/component-tooltip
+
+
+
+
+
+## [2.7.95](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-tooltip@2.7.94...@cloudflare/component-tooltip@2.7.95) (2021-11-15)
+
+**Note:** Version bump only for package @cloudflare/component-tooltip
+
+
+
+
+
 ## [2.7.94](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-tooltip@2.7.93...@cloudflare/component-tooltip@2.7.94) (2021-11-05)
 
 **Note:** Version bump only for package @cloudflare/component-tooltip

package/es/Tooltip.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Div } from '@cloudflare/elements';
+import { Button } from '@cloudflare/elements';
 import { createComponent } from '@cloudflare/style-container';
 import ReactTooltip from 'react-tooltip';
 import uniqueId from 'lodash.uniqueid';
@@ -61,6 +61,13 @@ class Tooltip extends React.PureComponent {
   constructor(props) {
     super(props);
     this.id = uniqueId('cf_component_tooltip_');
+    this.escFunction = this.escFunction.bind(this);
+  }
+
+  escFunction(event) {
+    if (event.key === 'Escape') {
+      ReactTooltip.hide(this.tooltipElement);
+    }
   }
 
   componentDidUpdate() {
@@ -72,6 +79,14 @@ class Tooltip extends React.PureComponent {
     }
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.escFunction);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.escFunction, false);
+  }
+
   render() {
     const _this$props = this.props,
           disable = _this$props.disable,
@@ -92,7 +107,6 @@ class Tooltip extends React.PureComponent {
       disable: disable,
       place: place,
       type: type,
-      role: "tooltip",
       effect: anchored ? 'solid' : 'float',
       className: className,
       isCapture: isCapture,
@@ -100,15 +114,27 @@ class Tooltip extends React.PureComponent {
       afterShow: afterShow,
       afterHide: afterHide,
       getContent: [() => message || getContent()],
-      onClick: this.props.onClick
-    }), /*#__PURE__*/React.createElement(Div, {
-      ref: c => {
-        this.tooltipElement = c;
-      },
+      onClick: this.props.onClick,
+      event: "click",
+      role: "status"
+    }), /*#__PURE__*/React.createElement(Button, {
+      innerRef: ref => this.tooltipElement = ref,
       display: "flex",
       pointerEvents: "bounding-box",
       "data-tip": true,
-      "data-for": id
+      "data-for": id,
+      type: "button",
+      onBlur: () => ReactTooltip.hide(this.tooltipElement),
+      style: {
+        cursor: 'pointer',
+        backgroundColor: 'transparent',
+        padding: 0
+      },
+      onClick: e => {
+        e.stopPropagation();
+      },
+      "data-toggletip-content": message,
+      "aria-controls": id
     }, children));
   }
 

package/lib/Tooltip.js

@@ -29,14 +29,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 var getBackgroundColor = function getBackgroundColor(theme, type) {
   if (type === 'dark') {
     return "".concat(theme.colors.gray[2], " !important");
@@ -102,10 +102,18 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Tooltip).call(this, props));
     _this.id = (0, _lodash.default)('cf_component_tooltip_');
+    _this.escFunction = _this.escFunction.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     return _this;
   }
 
   _createClass(Tooltip, [{
+    key: "escFunction",
+    value: function escFunction(event) {
+      if (event.key === 'Escape') {
+        _reactTooltip.default.hide(this.tooltipElement);
+      }
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       var _this2 = this;
@@ -120,6 +128,16 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         }, 0);
       }
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('keydown', this.escFunction);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('keydown', this.escFunction, false);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -144,7 +162,6 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         disable: disable,
         place: place,
         type: type,
-        role: "tooltip",
         effect: anchored ? 'solid' : 'float',
         className: className,
         isCapture: isCapture,
@@ -154,15 +171,31 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         getContent: [function () {
           return message || getContent();
         }],
-        onClick: this.props.onClick
-      }), /*#__PURE__*/_react.default.createElement(_elements.Div, {
-        ref: function ref(c) {
-          _this3.tooltipElement = c;
+        onClick: this.props.onClick,
+        event: "click",
+        role: "status"
+      }), /*#__PURE__*/_react.default.createElement(_elements.Button, {
+        innerRef: function innerRef(ref) {
+          return _this3.tooltipElement = ref;
         },
         display: "flex",
         pointerEvents: "bounding-box",
         "data-tip": true,
-        "data-for": id
+        "data-for": id,
+        type: "button",
+        onBlur: function onBlur() {
+          return _reactTooltip.default.hide(_this3.tooltipElement);
+        },
+        style: {
+          cursor: 'pointer',
+          backgroundColor: 'transparent',
+          padding: 0
+        },
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        },
+        "data-toggletip-content": message,
+        "aria-controls": id
       }, children));
     }
   }]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-tooltip",
   "description": "Cloudflare Tooltip Component",
-  "version": "2.7.94",
+  "version": "2.7.98",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,8 +11,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/elements": "^1.11.25",
-    "@cloudflare/style-container": "^7.5.15",
+    "@cloudflare/elements": "^1.11.29",
+    "@cloudflare/style-container": "^7.5.18",
     "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.6.0",
     "react-tooltip": "^3.6.0"
@@ -31,5 +31,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "abca007122f523baa19aeeeac04d97bdded33584"
+  "gitHead": "bb34cec56437707d31526523737f182760b71482"
 }