@rescui/tooltip 0.7.3 → 0.8.0

package/lib/css-vars-utils.d.ts

@@ -0,0 +1,3 @@
+export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
+/** Check out `@rescui/colors/src/public-api.p.css` file */
+export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";

package/lib/css-vars-utils.js

@@ -0,0 +1,21 @@
+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'];
+
+var extractPrimaryColors = function extractPrimaryColors(styles) {
+  var colors = {};
+  PRIMARY_COLORS.forEach(function (varName) {
+    colors[varName] = styles.getPropertyValue(varName) || 'initial';
+  });
+  return colors;
+};
+/** 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);
+  return themeDarkCoefficient === 1 ? 'dark' : 'light';
+};
+
+export { extractPrimaryColors, extractThemeFromCss };

package/lib/index.css

@@ -1,24 +1,72 @@
-._tooltip_1twilvc_4{
+._tooltip_1d84c4t_5{
   position:relative;
 }
-._closing_1twilvc_8{
+._closing_1d84c4t_9{
   pointer-events:none;
 }
-._content_1twilvc_12{
-  letter-spacing:0.0045em;
-  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
-  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
-  -webkit-font-feature-settings:"kern", "liga", "calt";
-  font-feature-settings:"kern", "liga", "calt";
-  font-size:13px;
-  font-size:var(--rs-text-3-font-size, 13px);
-  line-height:20px;
-  line-height:var(--rs-text-3-line-height, 20px);
+._content_1d84c4t_13{
+  --rs-theme-dark:1;
+
+  --_rs-theme-dark:var(
+    --_rs-internal-force-theme-dark-consult-rescui-before-using,
+    var(--rs-theme-dark, 0)
+  );
+
+  --_rs-theme-flip:var(--rs-theme-flip, 0);
+
+  --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
+
+  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
+  letter-spacing:var(
+    --rs-text-base-letter-spacing,
+    var(--_rs-typography-letter-spacing)
+  );
+  text-transform:var(--_rs-typography-text-transform);
+  font-family:var(--_rs-typography-font-family);
+  font-size:var(--_rs-typography-font-size);
+  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-reset-letter-spacing_1twilvc_1 ._content_1twilvc_12{
-    letter-spacing:normal;
+._content_1d84c4t_13 > p:not(:nth-child(1)),
+  ._content_1d84c4t_13 > pre:not(:nth-child(1)){
+    padding-top:var(--_rs-typography-auto-offset-or-initial);
   }
-._content_1twilvc_12 {
+._content_1d84c4t_13 {
+  --_rs-typography-letter-spacing:0.0045em;
+  --_rs-typography-text-transform:initial;
+  --_rs-typography-font-variant-numeric:initial;
+  --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+  --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
+  --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+  --_rs-typography-line-height:var(
+    --rs-text-3-line-height,
+    20px
+  );
+  --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+  --_rs-typography-text-auto-offset:8px;
+  --_rs-typography-ul-list-li-padding-left:28px;
+  --_rs-typography-ol-list-li-padding-left:21px;
+  --_rs-typography-list-li-margin-top-from-text:8px;
+  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+  --_rs-typography-link-border-bottom-width-from-text:1px;
 
   max-width:283px;
 
@@ -39,56 +87,77 @@
   -webkit-transform:translate(0, 0);
           transform:translate(0, 0);
 }
-[data-real-placement='top-end'] ._content_1twilvc_12,
-  [data-real-placement='bottom-end'] ._content_1twilvc_12{
+[data-real-placement='top-end'] ._content_1d84c4t_13,
+  [data-real-placement='bottom-end'] ._content_1d84c4t_13{
     margin-right:0;
   }
-[data-real-placement='top-start'] ._content_1twilvc_12,
-  [data-real-placement='bottom-start'] ._content_1twilvc_12{
+[data-real-placement='top-start'] ._content_1d84c4t_13,
+  [data-real-placement='bottom-start'] ._content_1d84c4t_13{
     margin-left:0;
   }
-[data-real-placement='left-end'] ._content_1twilvc_12,
-  [data-real-placement='right-end'] ._content_1twilvc_12{
+[data-real-placement='left-end'] ._content_1d84c4t_13,
+  [data-real-placement='right-end'] ._content_1d84c4t_13{
     margin-bottom:0;
   }
-[data-real-placement='left-start'] ._content_1twilvc_12,
-  [data-real-placement='right-start'] ._content_1twilvc_12{
+[data-real-placement='left-start'] ._content_1d84c4t_13,
+  [data-real-placement='right-start'] ._content_1d84c4t_13{
     margin-top:0;
   }
-._initial_1twilvc_47 ._content_1twilvc_12{
+._initial_1d84c4t_52 ._content_1d84c4t_13{
     -webkit-transition:none;
     transition:none;
   }
-._closing_1twilvc_8 ._content_1twilvc_12{
+._closing_1d84c4t_9 ._content_1d84c4t_13{
     -webkit-transition-duration:200ms, 200ms;
             transition-duration:200ms, 200ms;
   }
-._initial_1twilvc_47 ._content_1twilvc_12,
-  ._closing_1twilvc_8 ._content_1twilvc_12{
+._initial_1d84c4t_52 ._content_1d84c4t_13,
+  ._closing_1d84c4t_9 ._content_1d84c4t_13{
     opacity:0;
   }
-._initial_1twilvc_47[data-real-placement^='top'] ._content_1twilvc_12, ._closing_1twilvc_8[data-real-placement^='top'] ._content_1twilvc_12{
+._outerThemeLight_1d84c4t_66 ._content_1d84c4t_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);
+    --rs-color-primary-t-dim-dark-theme:var(
+      --rs-color-primary-t-dim-light-theme
+    );
+    --rs-color-primary-t-fog-dark-theme:var(
+      --rs-color-primary-t-fog-light-theme
+    );
+  }
+._outerThemeDark_1d84c4t_79 ._content_1d84c4t_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);
+    --rs-color-primary-t-dim-light-theme:var(
+      --rs-color-primary-t-dim-dark-theme
+    );
+    --rs-color-primary-t-fog-light-theme:var(
+      --rs-color-primary-t-fog-dark-theme
+    );
+  }
+._initial_1d84c4t_52[data-real-placement^='top'] ._content_1d84c4t_13, ._closing_1d84c4t_9[data-real-placement^='top'] ._content_1d84c4t_13{
     -webkit-transform:translate(0, 10px);
             transform:translate(0, 10px);
   }
-._initial_1twilvc_47[data-real-placement^='right'] ._content_1twilvc_12, ._closing_1twilvc_8[data-real-placement^='right'] ._content_1twilvc_12{
+._initial_1d84c4t_52[data-real-placement^='right'] ._content_1d84c4t_13, ._closing_1d84c4t_9[data-real-placement^='right'] ._content_1d84c4t_13{
     -webkit-transform:translate(-10px, 0);
             transform:translate(-10px, 0);
   }
-._initial_1twilvc_47[data-real-placement^='bottom'] ._content_1twilvc_12, ._closing_1twilvc_8[data-real-placement^='bottom'] ._content_1twilvc_12{
+._initial_1d84c4t_52[data-real-placement^='bottom'] ._content_1d84c4t_13, ._closing_1d84c4t_9[data-real-placement^='bottom'] ._content_1d84c4t_13{
     -webkit-transform:translate(0, -10px);
             transform:translate(0, -10px);
   }
-._initial_1twilvc_47[data-real-placement^='left'] ._content_1twilvc_12, ._closing_1twilvc_8[data-real-placement^='left'] ._content_1twilvc_12{
+._initial_1d84c4t_52[data-real-placement^='left'] ._content_1d84c4t_13, ._closing_1d84c4t_9[data-real-placement^='left'] ._content_1d84c4t_13{
     -webkit-transform:translate(10px, 0);
             transform:translate(10px, 0);
   }
-._trigger_1twilvc_81:focus-visible,
-._trigger_1twilvc_81:focus[data-focus-method='key']{
-    outline:none;
-    -webkit-box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
-    -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
-            box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
-            box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
-}
+._trigger_1d84c4t_111:focus-visible,
+._trigger_1d84c4t_111: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;
+}

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

@@ -1,9 +1,10 @@
 var styles = {
-  "tooltip": "_tooltip_1twilvc_4",
-  "closing": "_closing_1twilvc_8",
-  "content": "_content_1twilvc_12",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1twilvc_1",
-  "initial": "_initial_1twilvc_47",
-  "trigger": "_trigger_1twilvc_81"
+  "tooltip": "_tooltip_1d84c4t_5",
+  "closing": "_closing_1d84c4t_9",
+  "content": "_content_1d84c4t_13",
+  "initial": "_initial_1d84c4t_52",
+  "outerThemeLight": "_outerThemeLight_1d84c4t_66",
+  "outerThemeDark": "_outerThemeDark_1d84c4t_79",
+  "trigger": "_trigger_1d84c4t_111"
 };
 export { styles as default };

package/lib/tooltip.js

@@ -4,8 +4,8 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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; }
@@ -17,15 +17,16 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 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, { useState, useRef, useEffect, useCallback, cloneElement, createElement, isValidElement } from 'react';
+import React, { useEffect, cloneElement, createElement, useState, useRef, useCallback, useContext, isValidElement } from 'react';
 import { Element, ForwardRef, typeOf } from 'react-is';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { Manager, Reference, Popper } from 'react-popper';
-import { LayeringConsumer } from '@rescui/ui-contexts';
+import { ThemeContext, LayeringConsumer, ThemeProvider } from '@rescui/ui-contexts';
 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
 
 var CLOSING_TIMEOUT = 300;
@@ -59,32 +60,90 @@ var isNode = function isNode(maybeNode) {
   }
 };
 
-var Tooltip = function Tooltip(_ref2) {
-  var children = _ref2.children,
-      _ref2$targetComponent = _ref2.targetComponent,
-      targetComponent = _ref2$targetComponent === void 0 ? 'span' : _ref2$targetComponent,
-      content = _ref2.content,
-      className = _ref2.className,
-      isVisibleFromProps = _ref2.isVisible,
-      modifiers = _ref2.modifiers,
-      _ref2$placement = _ref2.placement,
-      placement = _ref2$placement === void 0 ? 'auto' : _ref2$placement,
-      _ref2$sparse = _ref2.sparse,
-      sparse = _ref2$sparse === void 0 ? true : _ref2$sparse,
-      _ref2$fallbackPlaceme = _ref2.fallbackPlacements,
-      fallbackPlacements = _ref2$fallbackPlaceme === void 0 ? ['top', 'bottom'] : _ref2$fallbackPlaceme,
-      disableHideDelay = _ref2.disableHideDelay;
-  var isControlled = typeof isVisibleFromProps !== 'undefined';
+var OUTER_THEME_STYLES = {
+  light: styles.outerThemeLight,
+  dark: styles.outerThemeDark
+};
+var TriggerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _context;
+
+  var triggerRef = _ref2.triggerRef,
+      setTriggerRef = _ref2.setTriggerRef,
+      targetComponent = _ref2.targetComponent,
+      isControlled = _ref2.isControlled,
+      handleMouseEnterTarget = _ref2.handleMouseEnterTarget,
+      handleMouseLeaveTarget = _ref2.handleMouseLeaveTarget,
+      children = _ref2.children;
+  var eventListeners = !isControlled ? {
+    onMouseEnter: handleMouseEnterTarget,
+    onMouseLeave: handleMouseLeaveTarget,
+    onFocus: handleMouseEnterTarget,
+    onBlur: handleMouseLeaveTarget,
+    tabIndex: 0
+  } : {};
+  useEffect(function () {
+    if (!ref) return;
+
+    if (typeof ref === 'function') {
+      ref(triggerRef);
+    } else {
+      ref.current = triggerRef;
+    }
+  }, [ref, triggerRef]);
+
+  var tooltipTargetProps = _Object$assign({}, {
+    ref: setTriggerRef
+  }, eventListeners);
+
+  if (typeof children === 'function') {
+    return children({
+      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));
+  } // create trigger-wrapper to bind tooltip
+
 
-  var _useState = useState(false),
+  return /*#__PURE__*/createElement(targetComponent, _objectSpread({
+    className: styles.trigger
+  }, tooltipTargetProps), children);
+});
+TriggerRenderer.displayName = 'TriggerRenderer';
+
+var Tooltip = function Tooltip(_ref3) {
+  var children = _ref3.children,
+      _ref3$targetComponent = _ref3.targetComponent,
+      targetComponent = _ref3$targetComponent === void 0 ? 'span' : _ref3$targetComponent,
+      content = _ref3.content,
+      className = _ref3.className,
+      isVisibleFromProps = _ref3.isVisible,
+      modifiers = _ref3.modifiers,
+      _ref3$placement = _ref3.placement,
+      placement = _ref3$placement === void 0 ? 'auto' : _ref3$placement,
+      _ref3$sparse = _ref3.sparse,
+      sparse = _ref3$sparse === void 0 ? true : _ref3$sparse,
+      _ref3$fallbackPlaceme = _ref3.fallbackPlacements,
+      fallbackPlacements = _ref3$fallbackPlaceme === void 0 ? ['top', 'bottom'] : _ref3$fallbackPlaceme,
+      disableHideDelay = _ref3.disableHideDelay;
+
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      isVisibleState = _useState2[0],
-      setIsVisibleState = _useState2[1];
+      triggerRef = _useState2[0],
+      setTriggerRef = _useState2[1];
+
+  var isControlled = typeof isVisibleFromProps !== 'undefined';
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      isTooltipHovered = _useState4[0],
-      setIsTooltipHovered = _useState4[1];
+      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);
@@ -119,10 +178,10 @@ var Tooltip = function Tooltip(_ref2) {
   var isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
   var isExists = tooltipState !== TOOLTIP_STATES.CLOSED; // a state to toggle the starting transition
 
-  var _useState5 = useState(true),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isInitial = _useState6[0],
-      setIsInitial = _useState6[1]; // reset the initial flag when the closing transition ends and the state switches to CLOSED
+  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
 
 
   useEffect(function () {
@@ -130,8 +189,8 @@ var Tooltip = function Tooltip(_ref2) {
       setIsInitial(true);
     }
   }, [isExists]);
-  var disableInitialFlag = useCallback(function (_ref3) {
-    var state = _ref3.state;
+  var disableInitialFlag = useCallback(function (_ref4) {
+    var state = _ref4.state;
     var el = state.elements.popper; // force layout phase
     // to make sure that the dom has registered the initial
     // styles with resolved placement (for `auto` placement)
@@ -139,41 +198,41 @@ var Tooltip = function Tooltip(_ref2) {
     el.getBoundingClientRect();
     setIsInitial(false);
   }, []);
-  return /*#__PURE__*/React.createElement(LayeringConsumer, null, function (_ref4) {
+  var tooltipShouldBeRendered = isExists && isNode(content);
+  var primaryColors = {};
+  var 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);
+    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 (_ref5) {
     var _context2;
 
-    var tooltipZIndex = _ref4.tooltipZIndex;
-    return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref5) {
-      var _context;
-
-      var ref = _ref5.ref;
-      var eventListeners = !isControlled ? {
-        onMouseEnter: handleMouseEnterTarget,
-        onMouseLeave: handleMouseLeaveTarget,
-        onFocus: handleMouseEnterTarget,
-        onBlur: handleMouseLeaveTarget,
-        tabIndex: 0
-      } : {};
-
-      var tooltipTargetProps = _Object$assign({}, {
-        ref: ref
-      }, eventListeners);
-
-      if (typeof children === 'function') {
-        return children({
-          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));
-      } // create trigger-wrapper to bind tooltip
-
-
-      return /*#__PURE__*/createElement(targetComponent, _objectSpread({
-        className: styles.trigger
-      }, tooltipTargetProps), children);
-    }), isExists && isNode(content) && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
+    var tooltipZIndex = _ref5.tooltipZIndex;
+    return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref6) {
+      var ref = _ref6.ref;
+      return /*#__PURE__*/React.createElement(TriggerRenderer, {
+        ref: ref,
+        triggerRef: triggerRef,
+        setTriggerRef: setTriggerRef,
+        targetComponent: targetComponent,
+        isControlled: isControlled,
+        handleMouseEnterTarget: handleMouseEnterTarget,
+        handleMouseLeaveTarget: handleMouseLeaveTarget
+      }, children);
+    }), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
       placement: placement,
       modifiers: _concatInstanceProperty(_context2 = [// the modifier to trigger starting animation
       {
@@ -190,8 +249,8 @@ var Tooltip = function Tooltip(_ref2) {
       }, {
         name: 'offset',
         options: {
-          offset: function offset(_ref6) {
-            var offsetPlacement = _ref6.placement;
+          offset: function offset(_ref7) {
+            var offsetPlacement = _ref7.placement;
 
             if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'left') || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'right')) {
               return [0, sparse ? 16 : 8];
@@ -201,16 +260,16 @@ var Tooltip = function Tooltip(_ref2) {
           }
         }
       }]).call(_context2, _toConsumableArray(modifiers || []))
-    }, function (_ref7) {
-      var ref = _ref7.ref,
-          style = _ref7.style,
-          update = _ref7.update,
-          realPlacement = _ref7.placement;
+    }, function (_ref8) {
+      var ref = _ref8.ref,
+          style = _ref8.style,
+          update = _ref8.update,
+          realPlacement = _ref8.placement;
       schedulePopperUpdateRef.current = update;
       return /*#__PURE__*/React.createElement("span", {
-        className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, className),
+        className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
         ref: ref,
-        style: _objectSpread(_objectSpread({}, style), {}, {
+        style: _objectSpread(_objectSpread(_objectSpread({}, style), primaryColors), {}, {
           zIndex: tooltipZIndex
         }),
         onMouseEnter: function onMouseEnter() {
@@ -223,9 +282,12 @@ var Tooltip = function Tooltip(_ref2) {
         "data-placement": placement,
         "data-real-placement": realPlacement,
         "data-test": "tooltip"
+      }, /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: "dark",
+        ignoreThemeValueForCSSApi: noProvider
       }, /*#__PURE__*/React.createElement("div", {
         className: cn(styles.content)
-      }, content));
+      }, content)));
     })));
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tooltip",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -28,13 +28,13 @@
     "react-dom": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.1.11",
-    "@rescui/scripts": "^0.2.3",
-    "@rescui/typography": "^0.15.0",
+    "@rescui/colors": "^0.2.0",
+    "@rescui/scripts": "^0.3.0",
+    "@rescui/typography": "^0.16.0",
     "@types/react-is": "^17.0.3"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "e21b6f80037993b094ceaff022db6d4cd176a88d"
+  "gitHead": "51da8a7188f4c558c563065a4ff4ef5c8e74994c"
 }