@codacy/ui-components 0.66.23 → 0.66.24

package/lib/Tooltip/Tooltip.js

@@ -35,7 +35,8 @@ var Tooltip = exports.Tooltip = function Tooltip(_ref) {
     _ref$hoverAnimation = _ref.hoverAnimation,
     hoverAnimation = _ref$hoverAnimation === void 0 ? true : _ref$hoverAnimation,
     _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? '12rem' : _ref$maxWidth;
+    maxWidth = _ref$maxWidth === void 0 ? '12rem' : _ref$maxWidth,
+    clickableTooltip = _ref.clickableTooltip;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     visible = _useState2[0],
@@ -144,9 +145,9 @@ var Tooltip = exports.Tooltip = function Tooltip(_ref) {
   }, attributes.popper), {}, {
     textAlignment: textAlignment,
     "data-enter": visible || undefined,
-    onMouseEnter: handleEnter,
-    onMouseOver: handleOver,
-    onMouseLeave: handleLeave,
+    onMouseEnter: clickableTooltip ? undefined : handleEnter,
+    onMouseOver: clickableTooltip ? undefined : handleOver,
+    onMouseLeave: clickableTooltip ? undefined : handleLeave,
     backgroundColor: backgroundColor,
     maxWidth: maxWidth,
     children: [withArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipArrow, {
@@ -156,14 +157,16 @@ var Tooltip = exports.Tooltip = function Tooltip(_ref) {
     }), content]
   }));
   var containerElement = portal && document.querySelector('body');
+  var isVisible = clickableTooltip ? clickableTooltip.visible : visible;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipTrigger, {
       ref: setTriggerRef,
-      onMouseEnter: handleEnter,
-      onMouseOver: handleOver,
-      onMouseLeave: handleLeave,
+      onMouseEnter: clickableTooltip ? undefined : handleEnter,
+      onMouseOver: clickableTooltip ? undefined : handleOver,
+      onMouseLeave: clickableTooltip ? undefined : handleLeave,
       hoverAnimation: hoverAnimation,
+      onClick: clickableTooltip ? clickableTooltip.onClick : undefined,
       children: children
-    }), visible && (containerElement ? /*#__PURE__*/_reactDom["default"].createPortal(tooltipCard, containerElement) : tooltipCard)]
+    }), isVisible && (containerElement ? /*#__PURE__*/_reactDom["default"].createPortal(tooltipCard, containerElement) : tooltipCard)]
   });
 };

package/lib/Tooltip/types.d.ts

@@ -17,6 +17,13 @@ export declare type TooltipProps = TooltipContentProps & TooltipPositionProps &
     hoverAnimation?: boolean;
     /** Tooltip's max width ? */
     maxWidth?: string;
+    /** Fixed tooltip that will be shown regardless of the trigger's hover state. Useful for tooltips that should be shown on page load. */
+    clickableTooltip?: {
+        /** Whether the tooltip should be visible */
+        visible?: boolean;
+        /** Callback for when the tooltip trigger is clicked */
+        onClick?: () => void;
+    };
 };
 export interface TooltipContentProps {
     /** The element that triggers the tooltip */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.66.23",
+  "version": "0.66.24",
   "description": "",
   "license": "ISC",
   "author": "",