@cloudflare/component-tooltip 4.7.4 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.0.0
+
+### Major Changes
+
+- ecfb4b3712: Delays tooltip by default, adds option to show immediately
+
 ## 4.7.4
 
 ### Patch Changes

package/es/Tooltip.js

@@ -6,6 +6,7 @@ import { Button } from '@cloudflare/elements';
 import { createComponent } from '@cloudflare/style-container';
 import ReactTooltip from 'react-tooltip';
 import uniqueId from 'lodash.uniqueid';
+var DELAY_SHOW_MILLIS = 400;
 
 var getBackgroundColor = (theme, type) => {
   if (type === 'dark') {
@@ -104,6 +105,7 @@ class Tooltip extends React.PureComponent {
       children,
       className,
       delayHide,
+      delayShow,
       afterHide,
       afterShow,
       getContent,
@@ -126,6 +128,7 @@ class Tooltip extends React.PureComponent {
       className: className,
       isCapture: isCapture,
       delayHide: delayHide ? delayHide : null,
+      delayShow: delayShow ? DELAY_SHOW_MILLIS : null,
       afterShow: afterShow,
       afterHide: afterHide,
       getContent: [() => message || getContent()],
@@ -178,6 +181,7 @@ Tooltip.propTypes = {
   children: PropTypes.node,
   disable: PropTypes.bool,
   delayHide: PropTypes.number,
+  delayShow: PropTypes.bool,
   afterHide: PropTypes.func,
   afterShow: PropTypes.func,
   buttonProps: PropTypes.object,
@@ -197,7 +201,8 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false
+  forceRebuild: false,
+  delayShow: true
 };
 Tooltip.displayName = 'Tooltip';
 export default createComponent(tooltipStyles, Tooltip);

package/index.d.ts

@@ -11,6 +11,7 @@ interface TooltipProps extends React.CSSProperties, TfelaMProps {
   className?: string;
   disable?: boolean;
   delayHide?: number;
+  delayShow?: boolean;
   afterHide?: (...args: any[]) => void;
   afterShow?: (...args: any[]) => void;
   getContent?: (...args: any[]) => void;

package/lib/Tooltip.js

@@ -43,6 +43,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+var DELAY_SHOW_MILLIS = 400;
+
 var getBackgroundColor = function getBackgroundColor(theme, type) {
   if (type === 'dark') {
     return "".concat(theme.colors.gray[2], " !important");
@@ -162,6 +164,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           children = _this$props.children,
           className = _this$props.className,
           delayHide = _this$props.delayHide,
+          delayShow = _this$props.delayShow,
           afterHide = _this$props.afterHide,
           afterShow = _this$props.afterShow,
           getContent = _this$props.getContent,
@@ -184,6 +187,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         className: className,
         isCapture: isCapture,
         delayHide: delayHide ? delayHide : null,
+        delayShow: delayShow ? DELAY_SHOW_MILLIS : null,
         afterShow: afterShow,
         afterHide: afterHide,
         getContent: [function () {
@@ -248,6 +252,7 @@ Tooltip.propTypes = {
   children: _propTypes.default.node,
   disable: _propTypes.default.bool,
   delayHide: _propTypes.default.number,
+  delayShow: _propTypes.default.bool,
   afterHide: _propTypes.default.func,
   afterShow: _propTypes.default.func,
   buttonProps: _propTypes.default.object,
@@ -267,7 +272,8 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false
+  forceRebuild: false,
+  delayShow: true
 };
 Tooltip.displayName = 'Tooltip';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-tooltip",
   "description": "Cloudflare Tooltip Component",
-  "version": "4.7.4",
+  "version": "5.0.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",