@cloudflare/component-tooltip - npm Package Compare versions

Comparing version 5.1.1 to 5.1.2

es/Tooltip.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -121,6 +122,7 @@ import { Button } from '@cloudflare/elements';
       Component = Button,
-      componentRef
+      componentRef,
+      portal = false
     } = this.props;
     var id = this.props.id ? this.props.id : this.id;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactTooltip, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, portal ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(ReactTooltip, {
       id: id,
@@ -140,2 +142,17 @@ disable: disable,
       role: "status"
+    }), document.body) : /*#__PURE__*/React.createElement(ReactTooltip, {
+      id: id,
+      disable: disable,
+      place: place,
+      type: type,
+      effect: anchored ? 'solid' : 'float',
+      className: className,
+      isCapture: isCapture,
+      delayHide: delayHide ? delayHide : null,
+      afterShow: afterShow,
+      afterHide: afterHide,
+      getContent: [() => message || getContent()],
+      onClick: this.props.onClick,
+      event: "click",
+      role: "status"
     }), /*#__PURE__*/React.createElement(Component, _extends({
@@ -210,3 +227,4 @@ innerRef: ref => {
   // is swallowed by createComponent.
-  componentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  componentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  portal: PropTypes.bool
 };
@@ -220,5 +238,6 @@ Tooltip.defaultProps = {
   forceRebuild: false,
-  delayShow: true
+  delayShow: true,
+  portal: false
 };
 Tooltip.displayName = 'Tooltip';
 export default createComponent(tooltipStyles, Tooltip);

index.d.ts

@@ -24,4 +24,5 @@ import * as React from 'react';
   componentRef?: React.Ref<HTMLElement>;
+  portal?: boolean;
 }
 
 export const Tooltip: React.FC<TooltipProps>;

lib/Tooltip.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _reactDom = require("react-dom");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -182,5 +184,7 @@
           Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component,
-          componentRef = _this$props.componentRef;
+          componentRef = _this$props.componentRef,
+          _this$props$portal = _this$props.portal,
+          portal = _this$props$portal === void 0 ? false : _this$props$portal;
       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, portal ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
         id: id,
@@ -202,2 +206,19 @@ disable: disable,
         role: "status"
+      }), document.body) : /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
+        id: id,
+        disable: disable,
+        place: place,
+        type: type,
+        effect: anchored ? 'solid' : 'float',
+        className: className,
+        isCapture: isCapture,
+        delayHide: delayHide ? delayHide : null,
+        afterShow: afterShow,
+        afterHide: afterHide,
+        getContent: [function () {
+          return message || getContent();
+        }],
+        onClick: this.props.onClick,
+        event: "click",
+        role: "status"
       }), /*#__PURE__*/_react.default.createElement(Component, _extends({
@@ -279,3 +300,4 @@ innerRef: function innerRef(ref) {
   // is swallowed by createComponent.
-  componentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  componentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  portal: _propTypes.default.bool
 };
@@ -289,3 +311,4 @@ Tooltip.defaultProps = {
   forceRebuild: false,
-  delayShow: true
+  delayShow: true,
+  portal: false
 };
@@ -292,0 +315,0 @@ Tooltip.displayName = 'Tooltip';

package.json

 {
   "name": "@cloudflare/component-tooltip",
   "description": "Cloudflare Tooltip Component",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

No alert changes

Improved metrics

Total package byte prevSize

158323

increased by1.02%

Lines of code

550

increased by8.27%

No dependency changes