@cloudflare/component-tooltip 4.3.2 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.4.0
+
+### Minor Changes
+
+- 0aee17e0c6: Add Component prop to enable elements to be used in place of a button, display tooltip on focus
+
 ## 4.3.2
 
 ### Patch Changes

package/es/Tooltip.js

@@ -112,7 +112,8 @@ class Tooltip extends React.PureComponent {
       buttonProps,
       isCapture,
       display,
-      ariaLabel
+      ariaLabel,
+      Component = Button
     } = this.props;
     var id = this.props.id ? this.props.id : this.id;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactTooltip, {
@@ -130,7 +131,7 @@ class Tooltip extends React.PureComponent {
       onClick: this.props.onClick,
       event: "click",
       role: "status"
-    }), /*#__PURE__*/React.createElement(Button, _extends({
+    }), /*#__PURE__*/React.createElement(Component, _extends({
       innerRef: ref => this.tooltipElement = ref,
       display: display ? display : 'flex',
       pointerEvents: "bounding-box",
@@ -141,6 +142,7 @@ class Tooltip extends React.PureComponent {
       "data-tip": true,
       "data-for": id,
       type: "button",
+      onFocus: () => ReactTooltip.show(this.tooltipElement),
       onBlur: () => ReactTooltip.hide(this.tooltipElement),
       color: "gray.1",
       onClick: e => {
@@ -173,7 +175,8 @@ Tooltip.propTypes = {
   forceRebuild: PropTypes.bool,
   onClick: PropTypes.func,
   display: PropTypes.string,
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  Component: PropTypes.func
 };
 Tooltip.defaultProps = {
   disable: false,

package/index.d.ts

@@ -18,6 +18,7 @@ interface TooltipProps extends React.CSSProperties, TfelaMProps {
   onClick?: (...args: any[]) => void;
   ariaLabel?: string;
   buttonProps?: React.ComponentProps<typeof Button>;
+  Component?: React.ComponentType<any>;
 }
 
 export const Tooltip: React.FC<TooltipProps>;

package/lib/Tooltip.js

@@ -170,7 +170,9 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           buttonProps = _this$props.buttonProps,
           isCapture = _this$props.isCapture,
           display = _this$props.display,
-          ariaLabel = _this$props.ariaLabel;
+          ariaLabel = _this$props.ariaLabel,
+          _this$props$Component = _this$props.Component,
+          Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component;
       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,
@@ -189,7 +191,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.props.onClick,
         event: "click",
         role: "status"
-      }), /*#__PURE__*/_react.default.createElement(_elements.Button, _extends({
+      }), /*#__PURE__*/_react.default.createElement(Component, _extends({
         innerRef: function innerRef(ref) {
           return _this3.tooltipElement = ref;
         },
@@ -202,6 +204,9 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         "data-tip": true,
         "data-for": id,
         type: "button",
+        onFocus: function onFocus() {
+          return _reactTooltip.default.show(_this3.tooltipElement);
+        },
         onBlur: function onBlur() {
           return _reactTooltip.default.hide(_this3.tooltipElement);
         },
@@ -242,7 +247,8 @@ Tooltip.propTypes = {
   forceRebuild: _propTypes.default.bool,
   onClick: _propTypes.default.func,
   display: _propTypes.default.string,
-  ariaLabel: _propTypes.default.string
+  ariaLabel: _propTypes.default.string,
+  Component: _propTypes.default.func
 };
 Tooltip.defaultProps = {
   disable: false,

package/package.json

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