@cloudflare/component-tooltip 5.1.1 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.1.2
+
+### Patch Changes
+
+- 028f888926: Updated Tooltip to support portaling to fix stacking context bug
+
 ## 5.1.1
 
 ### Patch Changes

package/es/Tooltip.js

@@ -1,6 +1,7 @@
 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';
 import { Button } from '@cloudflare/elements';
 import { createComponent } from '@cloudflare/style-container';
@@ -118,10 +119,26 @@ class Tooltip extends React.PureComponent {
       display,
       ariaLabel,
       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,
+      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"
+    }), document.body) : /*#__PURE__*/React.createElement(ReactTooltip, {
       id: id,
       disable: disable,
       place: place,
@@ -205,7 +222,8 @@ 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]),
+  portal: PropTypes.bool
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -214,7 +232,8 @@ Tooltip.defaultProps = {
   anchored: true,
   isCapture: true,
   forceRebuild: false,
-  delayShow: true
+  delayShow: true,
+  portal: false
 };
 Tooltip.displayName = 'Tooltip';
 export default createComponent(tooltipStyles, Tooltip);

package/index.d.ts

@@ -21,6 +21,7 @@ interface TooltipProps extends React.CSSProperties, TfelaMProps {
   buttonProps?: React.ComponentProps<typeof Button>;
   Component?: React.ComponentType<any>;
   componentRef?: React.Ref<HTMLElement>;
+  portal?: boolean;
 }
 
 export const Tooltip: React.FC<TooltipProps>;

package/lib/Tooltip.js

@@ -9,6 +9,8 @@ exports.tooltipStyles = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactDom = require("react-dom");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _elements = require("@cloudflare/elements");
@@ -178,9 +180,28 @@ 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,
+          _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,
+        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"
+      }), document.body) : /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
         id: id,
         disable: disable,
         place: place,
@@ -273,7 +294,8 @@ 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]),
+  portal: _propTypes.default.bool
 };
 Tooltip.defaultProps = {
   disable: false,
@@ -282,7 +304,8 @@ Tooltip.defaultProps = {
   anchored: true,
   isCapture: true,
   forceRebuild: false,
-  delayShow: true
+  delayShow: true,
+  portal: false
 };
 Tooltip.displayName = 'Tooltip';
 

package/package.json

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