@cloudflare/component-tooltip 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 4.6.0
+
+### Minor Changes
+
+- 7823cdd34e: Update react-tooltip version and allow more customization
+
+## 4.5.1
+
+### Patch Changes
+
+- @cloudflare/elements@3.0.5
+
 ## 4.5.0
 
 ### Minor Changes

package/es/Tooltip.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@cloudflare/elements';
 import { createComponent } from '@cloudflare/style-container';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import uniqueId from 'lodash.uniqueid';
 
 var getBackgroundColor = (theme, type) => {
@@ -114,24 +114,32 @@ class Tooltip extends React.PureComponent {
       display,
       ariaLabel,
       Component = Button,
-      componentRef
+      componentRef,
+      clickable,
+      noArrow,
+      border,
+      style
     } = this.props;
     var id = this.props.id ? this.props.id : this.id;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactTooltip, {
       id: id,
       disable: disable,
       place: place,
-      type: type,
-      effect: anchored ? 'solid' : 'float',
+      variant: type,
+      float: !anchored,
       className: className,
+      border: border,
+      style: style,
       isCapture: isCapture,
       delayHide: delayHide ? delayHide : null,
       afterShow: afterShow,
       afterHide: afterHide,
-      getContent: [() => message || getContent()],
+      content: message || getContent(),
       onClick: this.props.onClick,
       event: "click",
-      role: "status"
+      role: "status",
+      clickable: clickable,
+      noArrow: noArrow
     }), /*#__PURE__*/React.createElement(Component, _extends({
       innerRef: ref => {
         this.tooltipElement = ref;
@@ -150,6 +158,7 @@ class Tooltip extends React.PureComponent {
       borderWidth: 0,
       "data-tip": true,
       "data-for": id,
+      "data-tooltip-id": id,
       type: "button",
       onFocus: () => ReactTooltip.show(this.tooltipElement),
       onBlur: () => ReactTooltip.hide(this.tooltipElement),
@@ -188,7 +197,11 @@ Tooltip.propTypes = {
   Component: PropTypes.func,
   // Allow the Component element to be referenced from a parent. innerRef
   // is swallowed by createComponent.
-  componentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  componentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  clickable: PropTypes.bool,
+  noArrow: PropTypes.bool,
+  border: PropTypes.string,
+  style: PropTypes.any
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -196,7 +209,9 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false
+  forceRebuild: false,
+  clickable: true,
+  noArrow: false
 };
 Tooltip.displayName = 'Tooltip';
 export default createComponent(tooltipStyles, Tooltip);

package/index.d.ts

@@ -20,6 +20,10 @@ interface TooltipProps extends React.CSSProperties, TfelaMProps {
   buttonProps?: React.ComponentProps<typeof Button>;
   Component?: React.ComponentType<any>;
   componentRef?: React.Ref<HTMLElement>;
+  clickable?: boolean;
+  noArrow?: boolean;
+  border?: string;
+  style?: any;
 }
 
 export const Tooltip: React.FC<TooltipProps>;

package/lib/Tooltip.js

@@ -15,7 +15,7 @@ var _elements = require("@cloudflare/elements");
 
 var _styleContainer = require("@cloudflare/style-container");
 
-var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
+var _reactTooltip = require("react-tooltip");
 
 var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
 
@@ -118,7 +118,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
     key: "escFunction",
     value: function escFunction(event) {
       if (event.key === 'Escape') {
-        _reactTooltip.default.hide(this.tooltipElement);
+        _reactTooltip.Tooltip.hide(this.tooltipElement);
       }
     }
   }, {
@@ -129,10 +129,10 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
       // full rebuild is required when tooltip is already displayed
       // but we changed type of position of the tooltip
       if (this.props.forceRebuild) {
-        _reactTooltip.default.hide(this.tooltipElement);
+        _reactTooltip.Tooltip.hide(this.tooltipElement);
 
         setTimeout(function () {
-          return _reactTooltip.default.show(_this2.tooltipElement);
+          return _reactTooltip.Tooltip.show(_this2.tooltipElement);
         }, 0);
       }
     }
@@ -173,25 +173,31 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           ariaLabel = _this$props.ariaLabel,
           _this$props$Component = _this$props.Component,
           Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component,
-          componentRef = _this$props.componentRef;
+          componentRef = _this$props.componentRef,
+          clickable = _this$props.clickable,
+          noArrow = _this$props.noArrow,
+          border = _this$props.border,
+          style = _this$props.style;
       var id = this.props.id ? this.props.id : this.id;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
         id: id,
         disable: disable,
         place: place,
-        type: type,
-        effect: anchored ? 'solid' : 'float',
+        variant: type,
+        float: !anchored,
         className: className,
+        border: border,
+        style: style,
         isCapture: isCapture,
         delayHide: delayHide ? delayHide : null,
         afterShow: afterShow,
         afterHide: afterHide,
-        getContent: [function () {
-          return message || getContent();
-        }],
+        content: message || getContent(),
         onClick: this.props.onClick,
         event: "click",
-        role: "status"
+        role: "status",
+        clickable: clickable,
+        noArrow: noArrow
       }), /*#__PURE__*/_react.default.createElement(Component, _extends({
         innerRef: function innerRef(ref) {
           _this3.tooltipElement = ref;
@@ -210,22 +216,23 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         borderWidth: 0,
         "data-tip": true,
         "data-for": id,
+        "data-tooltip-id": id,
         type: "button",
         onFocus: function onFocus() {
-          return _reactTooltip.default.show(_this3.tooltipElement);
+          return _reactTooltip.Tooltip.show(_this3.tooltipElement);
         },
         onBlur: function onBlur() {
-          return _reactTooltip.default.hide(_this3.tooltipElement);
+          return _reactTooltip.Tooltip.hide(_this3.tooltipElement);
         },
         color: "gray.1",
         onClick: function onClick(e) {
           e.stopPropagation();
         },
         onMouseOver: function onMouseOver() {
-          return _reactTooltip.default.show(_this3.tooltipElement);
+          return _reactTooltip.Tooltip.show(_this3.tooltipElement);
         },
         onMouseOut: function onMouseOut() {
-          return _reactTooltip.default.hide(_this3.tooltipElement);
+          return _reactTooltip.Tooltip.hide(_this3.tooltipElement);
         },
         "aria-controls": id,
         "aria-label": ariaLabel
@@ -258,7 +265,11 @@ Tooltip.propTypes = {
   Component: _propTypes.default.func,
   // Allow the Component element to be referenced from a parent. innerRef
   // is swallowed by createComponent.
-  componentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  componentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  clickable: _propTypes.default.bool,
+  noArrow: _propTypes.default.bool,
+  border: _propTypes.default.string,
+  style: _propTypes.default.any
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -266,7 +277,9 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false
+  forceRebuild: false,
+  clickable: true,
+  noArrow: false
 };
 Tooltip.displayName = 'Tooltip';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-tooltip",
   "description": "Cloudflare Tooltip Component",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -12,10 +12,10 @@
     "module": "es/index.js"
   },
   "dependencies": {
-    "@cloudflare/elements": "^3.0.4",
+    "@cloudflare/elements": "^3.0.5",
     "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.6.0",
-    "react-tooltip": "^3.11.6"
+    "react-tooltip": "^5.26.3"
   },
   "peerDependencies": {
     "@cloudflare/style-const": "^5.7.2",