@rescui/tooltip 0.8.13 → 0.9.0

package/lib/css-vars-utils.js

@@ -1,9 +1,8 @@
-import "core-js/modules/es.object.to-string.js";
-var PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
+const PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
 
-var extractPrimaryColors = function extractPrimaryColors(styles) {
-  var colors = {};
-  PRIMARY_COLORS.forEach(function (varName) {
+const extractPrimaryColors = styles => {
+  const colors = {};
+  PRIMARY_COLORS.forEach(varName => {
     colors[varName] = styles.getPropertyValue(varName) || 'initial';
   });
   return colors;
@@ -11,10 +10,10 @@ var extractPrimaryColors = function extractPrimaryColors(styles) {
 /** Check out `@rescui/colors/src/public-api.p.css` file */
 
 
-var extractThemeFromCss = function extractThemeFromCss(styles) {
-  var themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
-  var themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
-  var themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
+const extractThemeFromCss = styles => {
+  const themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
+  const themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
+  const themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
   return themeDarkCoefficient === 1 ? 'dark' : 'light';
 };
 

package/lib/index.css

@@ -1,10 +1,10 @@
-._tooltip_fjc7n1_5{
+._tooltip_vc9v3z_5{
   position:relative;
 }
-._closing_fjc7n1_9{
+._closing_vc9v3z_9{
   pointer-events:none;
 }
-._content_fjc7n1_13{
+._content_vc9v3z_13{
   --rs-theme-dark:1;
   --_rs-tooltip-border-width:1px;
 
@@ -28,7 +28,6 @@
   font-weight:var(--_rs-typography-font-weight);
   line-height:var(--_rs-typography-line-height);
   font-variant-numeric:var(--_rs-typography-font-variant-numeric);
-  -webkit-font-feature-settings:'kern', 'liga', 'calt';
   font-feature-settings:'kern', 'liga', 'calt';
   --_rs-typography-letter-spacing:0.0045em;
   --_rs-typography-text-transform:initial;
@@ -73,45 +72,36 @@
   color:#FFFFFF;
   background-color:#303033;
 
-  -webkit-transition:opacity 300ms, -webkit-transform 300ms;
-
-  transition:opacity 300ms, -webkit-transform 300ms;
-
   transition:opacity 300ms, transform 300ms;
-
-  transition:opacity 300ms, transform 300ms, -webkit-transform 300ms;
-  -webkit-transform:translate(0, 0);
-          transform:translate(0, 0);
+  transform:translate(0, 0);
 }
-[data-real-placement='top-end'] ._content_fjc7n1_13,
-  [data-real-placement='bottom-end'] ._content_fjc7n1_13{
+[data-real-placement='top-end'] ._content_vc9v3z_13,
+  [data-real-placement='bottom-end'] ._content_vc9v3z_13{
     margin-right:0;
   }
-[data-real-placement='top-start'] ._content_fjc7n1_13,
-  [data-real-placement='bottom-start'] ._content_fjc7n1_13{
+[data-real-placement='top-start'] ._content_vc9v3z_13,
+  [data-real-placement='bottom-start'] ._content_vc9v3z_13{
     margin-left:0;
   }
-[data-real-placement='left-end'] ._content_fjc7n1_13,
-  [data-real-placement='right-end'] ._content_fjc7n1_13{
+[data-real-placement='left-end'] ._content_vc9v3z_13,
+  [data-real-placement='right-end'] ._content_vc9v3z_13{
     margin-bottom:0;
   }
-[data-real-placement='left-start'] ._content_fjc7n1_13,
-  [data-real-placement='right-start'] ._content_fjc7n1_13{
+[data-real-placement='left-start'] ._content_vc9v3z_13,
+  [data-real-placement='right-start'] ._content_vc9v3z_13{
     margin-top:0;
   }
-._initial_fjc7n1_54 ._content_fjc7n1_13{
-    -webkit-transition:none;
+._initial_vc9v3z_54 ._content_vc9v3z_13{
     transition:none;
   }
-._closing_fjc7n1_9 ._content_fjc7n1_13{
-    -webkit-transition-duration:200ms, 200ms;
-            transition-duration:200ms, 200ms;
+._closing_vc9v3z_9 ._content_vc9v3z_13{
+    transition-duration:200ms, 200ms;
   }
-._initial_fjc7n1_54 ._content_fjc7n1_13,
-  ._closing_fjc7n1_9 ._content_fjc7n1_13{
+._initial_vc9v3z_54 ._content_vc9v3z_13,
+  ._closing_vc9v3z_9 ._content_vc9v3z_13{
     opacity:0;
   }
-._outerThemeLight_fjc7n1_68 ._content_fjc7n1_13{
+._outerThemeLight_vc9v3z_68 ._content_vc9v3z_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);
@@ -122,7 +112,7 @@
       --rs-color-primary-t-fog-light-theme
     );
   }
-._outerThemeDark_fjc7n1_81 ._content_fjc7n1_13{
+._outerThemeDark_vc9v3z_81 ._content_vc9v3z_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);
@@ -133,27 +123,21 @@
       --rs-color-primary-t-fog-dark-theme
     );
   }
-._initial_fjc7n1_54[data-real-placement^='top'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='top'] ._content_fjc7n1_13{
-    -webkit-transform:translate(0, 10px);
-            transform:translate(0, 10px);
+._initial_vc9v3z_54[data-real-placement^='top'] ._content_vc9v3z_13, ._closing_vc9v3z_9[data-real-placement^='top'] ._content_vc9v3z_13{
+    transform:translate(0, 10px);
   }
-._initial_fjc7n1_54[data-real-placement^='right'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='right'] ._content_fjc7n1_13{
-    -webkit-transform:translate(-10px, 0);
-            transform:translate(-10px, 0);
+._initial_vc9v3z_54[data-real-placement^='right'] ._content_vc9v3z_13, ._closing_vc9v3z_9[data-real-placement^='right'] ._content_vc9v3z_13{
+    transform:translate(-10px, 0);
   }
-._initial_fjc7n1_54[data-real-placement^='bottom'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='bottom'] ._content_fjc7n1_13{
-    -webkit-transform:translate(0, -10px);
-            transform:translate(0, -10px);
+._initial_vc9v3z_54[data-real-placement^='bottom'] ._content_vc9v3z_13, ._closing_vc9v3z_9[data-real-placement^='bottom'] ._content_vc9v3z_13{
+    transform:translate(0, -10px);
   }
-._initial_fjc7n1_54[data-real-placement^='left'] ._content_fjc7n1_13, ._closing_fjc7n1_9[data-real-placement^='left'] ._content_fjc7n1_13{
-    -webkit-transform:translate(10px, 0);
-            transform:translate(10px, 0);
+._initial_vc9v3z_54[data-real-placement^='left'] ._content_vc9v3z_13, ._closing_vc9v3z_9[data-real-placement^='left'] ._content_vc9v3z_13{
+    transform:translate(10px, 0);
   }
-._trigger_fjc7n1_113:focus-visible,
-._trigger_fjc7n1_113:focus[data-focus-method='key']{
+._trigger_vc9v3z_113:focus-visible,
+._trigger_vc9v3z_113:focus[data-focus-method='key']{
   outline:none;
 
-  -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
-
-          box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
+  box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;
 }

package/lib/index.js

@@ -5,5 +5,5 @@ export { Tooltip } from './tooltip.js';
  * @deprecated use named import instead
  */
 
-var DefaultTooltip = Tooltip;
+const DefaultTooltip = Tooltip;
 export { DefaultTooltip as default };

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

@@ -1,10 +1,10 @@
 var styles = {
-  "tooltip": "_tooltip_fjc7n1_5",
-  "closing": "_closing_fjc7n1_9",
-  "content": "_content_fjc7n1_13",
-  "initial": "_initial_fjc7n1_54",
-  "outerThemeLight": "_outerThemeLight_fjc7n1_68",
-  "outerThemeDark": "_outerThemeDark_fjc7n1_81",
-  "trigger": "_trigger_fjc7n1_113"
+  "tooltip": "_tooltip_vc9v3z_5",
+  "closing": "_closing_vc9v3z_9",
+  "content": "_content_vc9v3z_13",
+  "initial": "_initial_vc9v3z_54",
+  "outerThemeLight": "_outerThemeLight_vc9v3z_68",
+  "outerThemeDark": "_outerThemeDark_vc9v3z_81",
+  "trigger": "_trigger_vc9v3z_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

@@ -1,22 +1,4 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
 import React, { cloneElement, createElement, useState, useRef, useEffect, useCallback, useContext, isValidElement } from 'react';
 import { Element, ForwardRef, typeOf } from 'react-is';
 import cn from 'classnames';
@@ -27,19 +9,20 @@ import { ThemeContext, LayeringConsumer, ThemeProvider } from '@rescui/ui-contex
 import styles from './index.p.module.css.js';
 import { useTooltipState, TOOLTIP_STATES } from './use-tooltip-state.js';
 import { extractThemeFromCss, extractPrimaryColors } from './css-vars-utils.js';
-var HIDE_TIMEOUT = 500; // it should in sync with the transition-duration css-property
+const HIDE_TIMEOUT = 500; // it should in sync with the transition-duration css-property
 
-var CLOSING_TIMEOUT = 300;
+const CLOSING_TIMEOUT = 300;
 
-var Portal = function Portal(_ref) {
-  var children = _ref.children,
-      _ref$target = _ref.target,
-      target = _ref$target === void 0 ? document.body : _ref$target;
+const Portal = _ref => {
+  let {
+    children,
+    target = document.body
+  } = _ref;
   return /*#__PURE__*/ReactDOM.createPortal(children, target);
 };
 
-var isNode = function isNode(maybeNode) {
-  switch (_typeof(maybeNode)) {
+const isNode = maybeNode => {
+  switch (typeof maybeNode) {
     case 'string':
     case 'number':
       return true;
@@ -60,30 +43,31 @@ var isNode = function isNode(maybeNode) {
   }
 };
 
-var OUTER_THEME_STYLES = {
+const OUTER_THEME_STYLES = {
   light: styles.outerThemeLight,
   dark: styles.outerThemeDark
 };
-var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
-  var _children$ref, _children$props, _context;
-
-  var setTriggerRef = _ref2.setTriggerRef,
-      targetComponent = _ref2.targetComponent,
-      isControlled = _ref2.isControlled,
-      handleMouseEnterTarget = _ref2.handleMouseEnterTarget,
-      handleMouseLeaveTarget = _ref2.handleMouseLeaveTarget,
-      children = _ref2.children;
-  var eventListeners = !isControlled ? {
+const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  var _children$props, _context;
+
+  let {
+    setTriggerRef,
+    targetComponent,
+    isControlled,
+    handleMouseEnterTarget,
+    handleMouseLeaveTarget,
+    children
+  } = _ref2;
+  const eventListeners = !isControlled ? {
     onMouseEnter: handleMouseEnterTarget,
     onMouseLeave: handleMouseLeaveTarget,
     onFocus: handleMouseEnterTarget,
     onBlur: handleMouseLeaveTarget,
     tabIndex: 0
   } : {};
-  var childrenRef = (_children$ref = children === null || children === void 0 ? void 0 : children.ref) !== null && _children$ref !== void 0 ? _children$ref : children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.ref;
-
-  var tooltipTargetProps = _Object$assign({}, {
-    ref: function ref(el) {
+  const childrenRef = (children === null || children === void 0 ? void 0 : children.ref) ?? (children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.ref);
+  const tooltipTargetProps = Object.assign({}, {
+    ref: el => {
       setTriggerRef(el);
 
       if (childrenRef) {
@@ -94,11 +78,11 @@ var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
         }
       }
 
-      if (_ref3) {
-        if (typeof _ref3 === 'function') {
-          _ref3(el);
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(el);
         } else {
-          _ref3.current = el;
+          ref.current = el;
         }
       }
     }
@@ -109,62 +93,51 @@ var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
       targetProps: tooltipTargetProps
     });
   } else if (_includesInstanceProperty(_context = [Element, ForwardRef]).call(_context, typeOf(children))) {
-    return /*#__PURE__*/cloneElement(children, _objectSpread({
-      className: cn(styles.trigger, children.props.className)
-    }, tooltipTargetProps));
+    return /*#__PURE__*/cloneElement(children, {
+      className: cn(styles.trigger, children.props.className),
+      ...tooltipTargetProps
+    });
   } // create trigger-wrapper to bind tooltip
 
 
-  return /*#__PURE__*/createElement(targetComponent, _objectSpread({
-    className: styles.trigger
-  }, tooltipTargetProps), children);
+  return /*#__PURE__*/createElement(targetComponent, {
+    className: styles.trigger,
+    ...tooltipTargetProps
+  }, children);
 });
-TriggerRenderer.displayName = 'TriggerRenderer';
-
-var Tooltip = function Tooltip(_ref4) {
-  var children = _ref4.children,
-      _ref4$targetComponent = _ref4.targetComponent,
-      targetComponent = _ref4$targetComponent === void 0 ? 'span' : _ref4$targetComponent,
-      content = _ref4.content,
-      className = _ref4.className,
-      isVisibleFromProps = _ref4.isVisible,
-      modifiers = _ref4.modifiers,
-      _ref4$placement = _ref4.placement,
-      placement = _ref4$placement === void 0 ? 'auto' : _ref4$placement,
-      _ref4$sparse = _ref4.sparse,
-      sparse = _ref4$sparse === void 0 ? true : _ref4$sparse,
-      _ref4$fallbackPlaceme = _ref4.fallbackPlacements,
-      fallbackPlacements = _ref4$fallbackPlaceme === void 0 ? ['top', 'bottom'] : _ref4$fallbackPlaceme,
-      disableHideDelay = _ref4.disableHideDelay;
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      triggerRef = _useState2[0],
-      setTriggerRef = _useState2[1];
-
-  var isControlled = typeof isVisibleFromProps !== 'undefined';
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isVisibleState = _useState4[0],
-      setIsVisibleState = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isTooltipHovered = _useState6[0],
-      setIsTooltipHovered = _useState6[1];
-
-  var schedulePopperUpdateRef = useRef(null);
-  var hideTimeoutRef = useRef(null);
-  var isVisible = isControlled ? isVisibleFromProps : isVisibleState;
-  var isOpen = isVisible || isTooltipHovered;
-  useEffect(function () {
+TriggerRenderer.displayName = 'TriggerRenderer'; // eslint-disable-next-line complexity
+
+const Tooltip = _ref3 => {
+  let {
+    children,
+    targetComponent = 'span',
+    content,
+    className,
+    isVisible: isVisibleFromProps,
+    modifiers,
+    placement = 'auto',
+    sparse = true,
+    fallbackPlacements = ['top', 'bottom'],
+    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();
     }
   }, [content]);
 
-  var handleMouseEnterTarget = function handleMouseEnterTarget() {
+  const handleMouseEnterTarget = () => {
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
       hideTimeoutRef.current = null;
@@ -173,65 +146,65 @@ var Tooltip = function Tooltip(_ref4) {
     setIsVisibleState(true);
   };
 
-  var handleMouseLeaveTarget = function handleMouseLeaveTarget() {
+  const handleMouseLeaveTarget = () => {
     if (disableHideDelay) {
       setIsVisibleState(false);
     } else {
-      hideTimeoutRef.current = setTimeout(function () {
+      hideTimeoutRef.current = setTimeout(() => {
         setIsVisibleState(false);
       }, HIDE_TIMEOUT);
     }
   };
 
-  var tooltipState = useTooltipState(isOpen, CLOSING_TIMEOUT);
-  var isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
-  var isExists = tooltipState !== TOOLTIP_STATES.CLOSED; // a state to toggle the starting transition
+  const tooltipState = useTooltipState(isOpen, CLOSING_TIMEOUT);
+  const isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
+  const isExists = tooltipState !== TOOLTIP_STATES.CLOSED; // a state to toggle the starting transition
 
-  var _useState7 = useState(true),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isInitial = _useState8[0],
-      setIsInitial = _useState8[1]; // reset the initial flag when the closing transition ends and the state switches to CLOSED
+  const [isInitial, setIsInitial] = useState(true); // reset the initial flag when the closing transition ends and the state switches to CLOSED
 
-
-  useEffect(function () {
+  useEffect(() => {
     if (!isExists) {
       setIsInitial(true);
     }
   }, [isExists]);
-  var disableInitialFlag = useCallback(function (_ref5) {
-    var state = _ref5.state;
-    var el = state.elements.popper; // force layout phase
+  const disableInitialFlag = useCallback(_ref4 => {
+    let {
+      state
+    } = _ref4;
+    const el = state.elements.popper; // force layout phase
     // to make sure that the dom has registered the initial
     // styles with resolved placement (for `auto` placement)
 
     el.getBoundingClientRect();
     setIsInitial(false);
   }, []);
-  var tooltipShouldBeRendered = isExists && isNode(content);
-  var primaryColors = {};
-  var themeFromCss = 'light';
+  const tooltipShouldBeRendered = isExists && isNode(content);
+  let primaryColors = {};
+  let themeFromCss = 'light';
 
   if (triggerRef && tooltipShouldBeRendered) {
     // In theory this part of the code might cause issues with SSR.
     // But in this specific context, because of the nature of the state-ref "triggerRef",
     // we are sure that the tooltip wouldn't be rendered on the first client render.
     // Therefore, the first render on the client will be the same as on the server.
-    var triggerStyles = getComputedStyle(triggerRef);
+    const triggerStyles = getComputedStyle(triggerRef);
     themeFromCss = extractThemeFromCss(triggerStyles);
     primaryColors = extractPrimaryColors(triggerStyles);
   }
 
-  var _useContext = useContext(ThemeContext),
-      themeFromContext = _useContext.theme,
-      noProvider = _useContext.noProvider;
-
-  var theme = noProvider ? themeFromCss : themeFromContext;
-  return /*#__PURE__*/React.createElement(LayeringConsumer, null, function (_ref6) {
-    var _context2;
-
-    var tooltipZIndex = _ref6.tooltipZIndex;
-    return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref7) {
-      var ref = _ref7.ref;
+  const {
+    theme: themeFromContext,
+    noProvider
+  } = useContext(ThemeContext);
+  const theme = noProvider ? themeFromCss : themeFromContext;
+  return /*#__PURE__*/React.createElement(LayeringConsumer, null, _ref5 => {
+    let {
+      tooltipZIndex
+    } = _ref5;
+    return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, _ref6 => {
+      let {
+        ref
+      } = _ref6;
       return /*#__PURE__*/React.createElement(TriggerRenderer, {
         ref: ref,
         setTriggerRef: setTriggerRef,
@@ -240,9 +213,9 @@ var Tooltip = function Tooltip(_ref4) {
         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: _concatInstanceProperty(_context2 = [// the modifier to trigger starting animation
+      modifiers: [// the modifier to trigger starting animation
       {
         name: 'disableInitialFlag',
         enabled: true,
@@ -252,13 +225,15 @@ var Tooltip = function Tooltip(_ref4) {
       }, {
         name: 'flip',
         options: {
-          fallbackPlacements: fallbackPlacements
+          fallbackPlacements
         }
       }, {
         name: 'offset',
         options: {
-          offset: function offset(_ref8) {
-            var offsetPlacement = _ref8.placement;
+          offset: _ref7 => {
+            let {
+              placement: offsetPlacement
+            } = _ref7;
 
             if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'left') || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'right')) {
               return [0, sparse ? 16 : 8];
@@ -267,23 +242,24 @@ var Tooltip = function Tooltip(_ref4) {
             }
           }
         }
-      }]).call(_context2, _toConsumableArray(modifiers || []))
-    }, function (_ref9) {
-      var ref = _ref9.ref,
-          style = _ref9.style,
-          update = _ref9.update,
-          realPlacement = _ref9.placement;
+      }, ...(modifiers || [])]
+    }, _ref8 => {
+      let {
+        ref,
+        style,
+        update,
+        placement: realPlacement
+      } = _ref8;
       schedulePopperUpdateRef.current = update;
       return /*#__PURE__*/React.createElement("span", {
         className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
         ref: ref,
-        style: _objectSpread(_objectSpread(_objectSpread({}, style), primaryColors), {}, {
+        style: { ...style,
+          ...primaryColors,
           zIndex: tooltipZIndex
-        }),
-        onMouseEnter: function onMouseEnter() {
-          return setIsTooltipHovered(true);
         },
-        onMouseLeave: function onMouseLeave() {
+        onMouseEnter: () => setIsTooltipHovered(true),
+        onMouseLeave: () => {
           setIsVisibleState(false);
           setIsTooltipHovered(false);
         },
@@ -294,7 +270,10 @@ var Tooltip = function Tooltip(_ref4) {
         theme: "dark",
         ignoreThemeValueForCSSApi: noProvider
       }, /*#__PURE__*/React.createElement("div", {
-        className: cn(styles.content)
+        className: cn(styles.content),
+        onBlur: handleMouseLeaveTarget,
+        onFocus: handleMouseEnterTarget,
+        ref: contentRef
       }, content)));
     })));
   });
@@ -310,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/lib/use-tooltip-state.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import { useState, useEffect } from 'react';
 var TOOLTIP_STATES;
 
@@ -9,17 +8,12 @@ var TOOLTIP_STATES;
 })(TOOLTIP_STATES || (TOOLTIP_STATES = {}));
 
 function useTooltipState(isOpen) {
-  var transitionDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-  var _useState = useState(TOOLTIP_STATES.CLOSED),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  useEffect(function () {
+  let transitionDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  const [state, setState] = useState(TOOLTIP_STATES.CLOSED);
+  useEffect(() => {
     if (isOpen) {
       // set tooltip state to OPEN when it should be open, but the current state is closing or already closed
-      setState(function (curState) {
+      setState(curState => {
         if (curState === TOOLTIP_STATES.CLOSING || curState === TOOLTIP_STATES.CLOSED) {
           return TOOLTIP_STATES.OPEN;
         } else {
@@ -30,7 +24,7 @@ function useTooltipState(isOpen) {
 
     if (!isOpen) {
       // if tooltip should not be open, but actually open, start the closing process
-      setState(function (curState) {
+      setState(curState => {
         if (curState === TOOLTIP_STATES.OPEN) {
           return TOOLTIP_STATES.CLOSING;
         }
@@ -39,8 +33,8 @@ function useTooltipState(isOpen) {
       }); // by the time the transition is finished, set state from closing to closed
       // if by any means at that moment state is not closing (but open or already closed), do nothing
 
-      var timeoutId = setTimeout(function () {
-        setState(function (curState) {
+      const timeoutId = setTimeout(() => {
+        setState(curState => {
           if (curState === TOOLTIP_STATES.CLOSING) {
             return TOOLTIP_STATES.CLOSED;
           }
@@ -48,13 +42,13 @@ function useTooltipState(isOpen) {
           return curState;
         });
       }, transitionDuration);
-      return function () {
+      return () => {
         clearTimeout(timeoutId);
       };
     } // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
-    return function () {};
+    return () => {};
   }, [transitionDuration, isOpen]);
   return state;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tooltip",
-  "version": "0.8.13",
+  "version": "0.9.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -14,10 +14,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.14.0",
+    "@babel/runtime-corejs3": "^7.26.0",
     "@popperjs/core": "^2.9.2",
     "classnames": "^2.2.6",
-    "core-js": "^3.9.1",
     "react-is": "^17.0.2",
     "react-popper": "^2.2.5"
   },
@@ -28,15 +27,15 @@
     "react-dom": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.5",
-    "@rescui/icons": "^0.16.11",
-    "@rescui/scripts": "^0.3.4",
-    "@rescui/typography": "^0.19.0",
+    "@rescui/colors": "^0.2.6",
+    "@rescui/icons": "^0.16.12",
+    "@rescui/scripts": "^0.3.5",
+    "@rescui/typography": "^0.19.1",
     "@types/react-is": "^17.0.3"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "3ef429c66a082b71861a814ba508693c68a94842"
+  "gitHead": "0736ddaa3aad7cdec54d8eb2e6f6ce79f8f9cdce"
 }