@cloudflare/component-tooltip 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 4.5.0
+
+### Minor Changes
+
+- 04083908a0: Add componentRef prop to allow a ref to the element from the parent
+
+## 4.4.1
+
+### Patch Changes
+
+- Updated dependencies [0d66b430a2]
+  - @cloudflare/elements@3.0.4
+
 ## 4.4.0
 
 ### Minor Changes

package/es/Tooltip.js

@@ -113,7 +113,8 @@ class Tooltip extends React.PureComponent {
       isCapture,
       display,
       ariaLabel,
-      Component = Button
+      Component = Button,
+      componentRef
     } = this.props;
     var id = this.props.id ? this.props.id : this.id;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactTooltip, {
@@ -132,7 +133,15 @@ class Tooltip extends React.PureComponent {
       event: "click",
       role: "status"
     }), /*#__PURE__*/React.createElement(Component, _extends({
-      innerRef: ref => this.tooltipElement = ref,
+      innerRef: ref => {
+        this.tooltipElement = ref;
+
+        if (componentRef !== null && componentRef !== void 0 && componentRef.hasOwnProperty('current')) {
+          componentRef.current = ref;
+        } else if (typeof componentRef === 'function') {
+          componentRef(ref);
+        }
+      },
       display: display ? display : 'flex',
       pointerEvents: "bounding-box",
       padding: 0,
@@ -176,7 +185,10 @@ Tooltip.propTypes = {
   onClick: PropTypes.func,
   display: PropTypes.string,
   ariaLabel: PropTypes.string,
-  Component: PropTypes.func
+  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])
 };
 Tooltip.defaultProps = {
   disable: false,

package/index.d.ts

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

package/lib/Tooltip.js

@@ -172,7 +172,8 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           display = _this$props.display,
           ariaLabel = _this$props.ariaLabel,
           _this$props$Component = _this$props.Component,
-          Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component;
+          Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component,
+          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.default, {
         id: id,
@@ -193,7 +194,13 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         role: "status"
       }), /*#__PURE__*/_react.default.createElement(Component, _extends({
         innerRef: function innerRef(ref) {
-          return _this3.tooltipElement = ref;
+          _this3.tooltipElement = ref;
+
+          if (componentRef !== null && componentRef !== void 0 && componentRef.hasOwnProperty('current')) {
+            componentRef.current = ref;
+          } else if (typeof componentRef === 'function') {
+            componentRef(ref);
+          }
         },
         display: display ? display : 'flex',
         pointerEvents: "bounding-box",
@@ -248,7 +255,10 @@ Tooltip.propTypes = {
   onClick: _propTypes.default.func,
   display: _propTypes.default.string,
   ariaLabel: _propTypes.default.string,
-  Component: _propTypes.default.func
+  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])
 };
 Tooltip.defaultProps = {
   disable: false,

package/package.json

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