@cloudflare/component-tooltip 4.6.0 → 4.7.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 4.7.1
+
+### Patch Changes
+
+- 25bc2ee144: add aria-describedby to read tooltip content on screen readers
+
+## 4.7.0
+
+### Minor Changes
+
+- a715507f6a: Revert tooltip changes
+
 ## 4.6.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 { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import uniqueId from 'lodash.uniqueid';
 
 var getBackgroundColor = (theme, type) => {
@@ -114,32 +114,24 @@ class Tooltip extends React.PureComponent {
       display,
       ariaLabel,
       Component = Button,
-      componentRef,
-      clickable,
-      noArrow,
-      border,
-      style
+      componentRef
     } = 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,
-      variant: type,
-      float: !anchored,
+      type: type,
+      effect: anchored ? 'solid' : 'float',
       className: className,
-      border: border,
-      style: style,
       isCapture: isCapture,
       delayHide: delayHide ? delayHide : null,
       afterShow: afterShow,
       afterHide: afterHide,
-      content: message || getContent(),
+      getContent: [() => message || getContent()],
       onClick: this.props.onClick,
       event: "click",
-      role: "status",
-      clickable: clickable,
-      noArrow: noArrow
+      role: "status"
     }), /*#__PURE__*/React.createElement(Component, _extends({
       innerRef: ref => {
         this.tooltipElement = ref;
@@ -158,7 +150,6 @@ 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),
@@ -169,7 +160,8 @@ class Tooltip extends React.PureComponent {
       onMouseOver: () => ReactTooltip.show(this.tooltipElement),
       onMouseOut: () => ReactTooltip.hide(this.tooltipElement),
       "aria-controls": id,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      "aria-describedby": id
     }, buttonProps), children));
   }
 
@@ -197,11 +189,7 @@ 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]),
-  clickable: PropTypes.bool,
-  noArrow: PropTypes.bool,
-  border: PropTypes.string,
-  style: PropTypes.any
+  componentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -209,9 +197,7 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false,
-  clickable: true,
-  noArrow: false
+  forceRebuild: false
 };
 Tooltip.displayName = 'Tooltip';
 export default createComponent(tooltipStyles, Tooltip);

package/index.d.ts

@@ -20,10 +20,6 @@ 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 = require("react-tooltip");
+var _reactTooltip = _interopRequireDefault(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.Tooltip.hide(this.tooltipElement);
+        _reactTooltip.default.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.Tooltip.hide(this.tooltipElement);
+        _reactTooltip.default.hide(this.tooltipElement);
 
         setTimeout(function () {
-          return _reactTooltip.Tooltip.show(_this2.tooltipElement);
+          return _reactTooltip.default.show(_this2.tooltipElement);
         }, 0);
       }
     }
@@ -173,31 +173,25 @@ 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,
-          clickable = _this$props.clickable,
-          noArrow = _this$props.noArrow,
-          border = _this$props.border,
-          style = _this$props.style;
+          componentRef = _this$props.componentRef;
       var id = this.props.id ? this.props.id : this.id;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
         id: id,
         disable: disable,
         place: place,
-        variant: type,
-        float: !anchored,
+        type: type,
+        effect: anchored ? 'solid' : 'float',
         className: className,
-        border: border,
-        style: style,
         isCapture: isCapture,
         delayHide: delayHide ? delayHide : null,
         afterShow: afterShow,
         afterHide: afterHide,
-        content: message || getContent(),
+        getContent: [function () {
+          return message || getContent();
+        }],
         onClick: this.props.onClick,
         event: "click",
-        role: "status",
-        clickable: clickable,
-        noArrow: noArrow
+        role: "status"
       }), /*#__PURE__*/_react.default.createElement(Component, _extends({
         innerRef: function innerRef(ref) {
           _this3.tooltipElement = ref;
@@ -216,26 +210,26 @@ 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.Tooltip.show(_this3.tooltipElement);
+          return _reactTooltip.default.show(_this3.tooltipElement);
         },
         onBlur: function onBlur() {
-          return _reactTooltip.Tooltip.hide(_this3.tooltipElement);
+          return _reactTooltip.default.hide(_this3.tooltipElement);
         },
         color: "gray.1",
         onClick: function onClick(e) {
           e.stopPropagation();
         },
         onMouseOver: function onMouseOver() {
-          return _reactTooltip.Tooltip.show(_this3.tooltipElement);
+          return _reactTooltip.default.show(_this3.tooltipElement);
         },
         onMouseOut: function onMouseOut() {
-          return _reactTooltip.Tooltip.hide(_this3.tooltipElement);
+          return _reactTooltip.default.hide(_this3.tooltipElement);
         },
         "aria-controls": id,
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        "aria-describedby": id
       }, buttonProps), children));
     }
   }]);
@@ -265,11 +259,7 @@ 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]),
-  clickable: _propTypes.default.bool,
-  noArrow: _propTypes.default.bool,
-  border: _propTypes.default.string,
-  style: _propTypes.default.any
+  componentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -277,9 +267,7 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false,
-  clickable: true,
-  noArrow: false
+  forceRebuild: false
 };
 Tooltip.displayName = 'Tooltip';
 

package/package.json

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