@rescui/tooltip 0.8.14 → 0.9.1

package/lib/index.css

@@ -1,10 +1,10 @@
-._tooltip_1fo5jum_5{
+._tooltip_1xld3y1_5{
   position:relative;
 }
-._closing_1fo5jum_9{
+._closing_1xld3y1_9{
   pointer-events:none;
 }
-._content_1fo5jum_13{
+._content_1xld3y1_13{
   --rs-theme-dark:1;
   --_rs-tooltip-border-width:1px;
 
@@ -75,33 +75,33 @@
   transition:opacity 300ms, transform 300ms;
   transform:translate(0, 0);
 }
-[data-real-placement='top-end'] ._content_1fo5jum_13,
-  [data-real-placement='bottom-end'] ._content_1fo5jum_13{
+[data-real-placement='top-end'] ._content_1xld3y1_13,
+  [data-real-placement='bottom-end'] ._content_1xld3y1_13{
     margin-right:0;
   }
-[data-real-placement='top-start'] ._content_1fo5jum_13,
-  [data-real-placement='bottom-start'] ._content_1fo5jum_13{
+[data-real-placement='top-start'] ._content_1xld3y1_13,
+  [data-real-placement='bottom-start'] ._content_1xld3y1_13{
     margin-left:0;
   }
-[data-real-placement='left-end'] ._content_1fo5jum_13,
-  [data-real-placement='right-end'] ._content_1fo5jum_13{
+[data-real-placement='left-end'] ._content_1xld3y1_13,
+  [data-real-placement='right-end'] ._content_1xld3y1_13{
     margin-bottom:0;
   }
-[data-real-placement='left-start'] ._content_1fo5jum_13,
-  [data-real-placement='right-start'] ._content_1fo5jum_13{
+[data-real-placement='left-start'] ._content_1xld3y1_13,
+  [data-real-placement='right-start'] ._content_1xld3y1_13{
     margin-top:0;
   }
-._initial_1fo5jum_54 ._content_1fo5jum_13{
+._initial_1xld3y1_54 ._content_1xld3y1_13{
     transition:none;
   }
-._closing_1fo5jum_9 ._content_1fo5jum_13{
+._closing_1xld3y1_9 ._content_1xld3y1_13{
     transition-duration:200ms, 200ms;
   }
-._initial_1fo5jum_54 ._content_1fo5jum_13,
-  ._closing_1fo5jum_9 ._content_1fo5jum_13{
+._initial_1xld3y1_54 ._content_1xld3y1_13,
+  ._closing_1xld3y1_9 ._content_1xld3y1_13{
     opacity:0;
   }
-._outerThemeLight_1fo5jum_68 ._content_1fo5jum_13{
+._outerThemeLight_1xld3y1_68 ._content_1xld3y1_13{
     --rs-color-primary-dark-theme:var(--rs-color-primary-light-theme);
     --rs-color-primary-dim-dark-theme:var(--rs-color-primary-dim-light-theme);
     --rs-color-primary-fog-dark-theme:var(--rs-color-primary-fog-light-theme);
@@ -112,7 +112,7 @@
       --rs-color-primary-t-fog-light-theme
     );
   }
-._outerThemeDark_1fo5jum_81 ._content_1fo5jum_13{
+._outerThemeDark_1xld3y1_81 ._content_1xld3y1_13{
     --rs-color-primary-light-theme:var(--rs-color-primary-dark-theme);
     --rs-color-primary-dim-light-theme:var(--rs-color-primary-dim-dark-theme);
     --rs-color-primary-fog-light-theme:var(--rs-color-primary-fog-dark-theme);
@@ -123,20 +123,20 @@
       --rs-color-primary-t-fog-dark-theme
     );
   }
-._initial_1fo5jum_54[data-real-placement^='top'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='top'] ._content_1fo5jum_13{
+._initial_1xld3y1_54[data-real-placement^='top'] ._content_1xld3y1_13, ._closing_1xld3y1_9[data-real-placement^='top'] ._content_1xld3y1_13{
     transform:translate(0, 10px);
   }
-._initial_1fo5jum_54[data-real-placement^='right'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='right'] ._content_1fo5jum_13{
+._initial_1xld3y1_54[data-real-placement^='right'] ._content_1xld3y1_13, ._closing_1xld3y1_9[data-real-placement^='right'] ._content_1xld3y1_13{
     transform:translate(-10px, 0);
   }
-._initial_1fo5jum_54[data-real-placement^='bottom'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='bottom'] ._content_1fo5jum_13{
+._initial_1xld3y1_54[data-real-placement^='bottom'] ._content_1xld3y1_13, ._closing_1xld3y1_9[data-real-placement^='bottom'] ._content_1xld3y1_13{
     transform:translate(0, -10px);
   }
-._initial_1fo5jum_54[data-real-placement^='left'] ._content_1fo5jum_13, ._closing_1fo5jum_9[data-real-placement^='left'] ._content_1fo5jum_13{
+._initial_1xld3y1_54[data-real-placement^='left'] ._content_1xld3y1_13, ._closing_1xld3y1_9[data-real-placement^='left'] ._content_1xld3y1_13{
     transform:translate(10px, 0);
   }
-._trigger_1fo5jum_113:focus-visible,
-._trigger_1fo5jum_113:focus[data-focus-method='key']{
+._trigger_1xld3y1_113:focus-visible,
+._trigger_1xld3y1_113:focus[data-focus-method='key']{
   outline:none;
 
   box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;

package/lib/index.p.module.css.js

@@ -1,10 +1,10 @@
 var styles = {
-  "tooltip": "_tooltip_1fo5jum_5",
-  "closing": "_closing_1fo5jum_9",
-  "content": "_content_1fo5jum_13",
-  "initial": "_initial_1fo5jum_54",
-  "outerThemeLight": "_outerThemeLight_1fo5jum_68",
-  "outerThemeDark": "_outerThemeDark_1fo5jum_81",
-  "trigger": "_trigger_1fo5jum_113"
+  "tooltip": "_tooltip_1xld3y1_5",
+  "closing": "_closing_1xld3y1_9",
+  "content": "_content_1xld3y1_13",
+  "initial": "_initial_1xld3y1_54",
+  "outerThemeLight": "_outerThemeLight_1xld3y1_68",
+  "outerThemeDark": "_outerThemeDark_1xld3y1_81",
+  "trigger": "_trigger_1xld3y1_113"
 };
 export { styles as default };

package/lib/tooltip.d.ts

@@ -57,6 +57,12 @@ export interface TooltipProps {
     disableHideDelay?: boolean;
     /** increase offset from the target */
     sparse?: boolean;
+    /**
+     * If set to true, the tooltip will be rendered adjacent to its triggering element.
+     * If false or undefined, the tooltip will render at the end of the `document.body` element.
+     * Should be used when the tooltip content contains interactive elements (e.g. links).
+     */
+    renderBesideTrigger?: boolean;
 }
 export declare const Tooltip: React.FC<TooltipProps>;
 export default Tooltip;

package/lib/tooltip.js

@@ -105,7 +105,7 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...tooltipTargetProps
   }, children);
 });
-TriggerRenderer.displayName = 'TriggerRenderer';
+TriggerRenderer.displayName = 'TriggerRenderer'; // eslint-disable-next-line complexity
 
 const Tooltip = _ref3 => {
   let {
@@ -118,16 +118,19 @@ const Tooltip = _ref3 => {
     placement = 'auto',
     sparse = true,
     fallbackPlacements = ['top', 'bottom'],
-    disableHideDelay
+    disableHideDelay,
+    renderBesideTrigger = false
   } = _ref3;
   const [triggerRef, setTriggerRef] = useState(null);
   const isControlled = typeof isVisibleFromProps !== 'undefined';
   const [isVisibleState, setIsVisibleState] = useState(false);
   const [isTooltipHovered, setIsTooltipHovered] = useState(false);
   const schedulePopperUpdateRef = useRef(null);
+  const contentRef = useRef(null);
   const hideTimeoutRef = useRef(null);
   const isVisible = isControlled ? isVisibleFromProps : isVisibleState;
   const isOpen = isVisible || isTooltipHovered;
+  const PortalResolved = renderBesideTrigger ? React.Fragment : Portal;
   useEffect(() => {
     if (schedulePopperUpdateRef.current) {
       schedulePopperUpdateRef.current();
@@ -210,7 +213,7 @@ const Tooltip = _ref3 => {
         handleMouseEnterTarget: handleMouseEnterTarget,
         handleMouseLeaveTarget: handleMouseLeaveTarget
       }, children);
-    }), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
+    }), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(PortalResolved, null, /*#__PURE__*/React.createElement(Popper, {
       placement: placement,
       modifiers: [// the modifier to trigger starting animation
       {
@@ -267,7 +270,10 @@ const Tooltip = _ref3 => {
         theme: "dark",
         ignoreThemeValueForCSSApi: noProvider
       }, /*#__PURE__*/React.createElement("div", {
-        className: cn(styles.content)
+        className: cn(styles.content),
+        onBlur: handleMouseLeaveTarget,
+        onFocus: handleMouseEnterTarget,
+        ref: contentRef
       }, content)));
     })));
   });
@@ -283,6 +289,7 @@ Tooltip.propTypes = {
   placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
   fallbackPlacements: PropTypes.arrayOf(PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'])),
   sparse: PropTypes.bool,
-  disableHideDelay: PropTypes.bool
+  disableHideDelay: PropTypes.bool,
+  renderBesideTrigger: PropTypes.bool
 };
 export { Tooltip, Tooltip as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tooltip",
-  "version": "0.8.14",
+  "version": "0.9.1",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -28,14 +28,14 @@
   },
   "devDependencies": {
     "@rescui/colors": "^0.2.6",
-    "@rescui/icons": "^0.16.12",
+    "@rescui/icons": "^0.16.13",
     "@rescui/scripts": "^0.3.5",
-    "@rescui/typography": "^0.19.1",
+    "@rescui/typography": "^0.20.0",
     "@types/react-is": "^17.0.3"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
+  "gitHead": "5531e3d285d6e38bf5536ff0690a252f1308c49b"
 }