@rescui/tooltip 0.12.1-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10 → 0.12.1-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39

package/lib/index.css

@@ -1,10 +1,15 @@
-._tooltip_1v46vsu_5{
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
+}
+._tooltip_umk73y_5{
   position:relative;
 }
-._closing_1v46vsu_9{
+._closing_umk73y_9{
   pointer-events:none;
 }
-._content_1v46vsu_13{
+._content_umk73y_13{
   --rs-theme-dark:1;
   --_rs-tooltip-border-width:1px;
 
@@ -63,6 +68,8 @@
   --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
   --_rs-typography-link-border-bottom-width-from-text:1px;
 
+  color-scheme:dark;
+
   max-width:283px;
 
   padding:calc(8px - var(--_rs-tooltip-border-width));
@@ -76,33 +83,33 @@
   transition:opacity 300ms var(--rs-transition-function, ease), transform 300ms var(--rs-transition-function, ease);
   transform:translate(0, 0);
 }
-[data-popper-placement='top-end'] ._content_1v46vsu_13,
-  [data-popper-placement='bottom-end'] ._content_1v46vsu_13{
+[data-popper-placement='top-end'] ._content_umk73y_13,
+  [data-popper-placement='bottom-end'] ._content_umk73y_13{
     margin-right:0;
   }
-[data-popper-placement='top-start'] ._content_1v46vsu_13,
-  [data-popper-placement='bottom-start'] ._content_1v46vsu_13{
+[data-popper-placement='top-start'] ._content_umk73y_13,
+  [data-popper-placement='bottom-start'] ._content_umk73y_13{
     margin-left:0;
   }
-[data-popper-placement='left-end'] ._content_1v46vsu_13,
-  [data-popper-placement='right-end'] ._content_1v46vsu_13{
+[data-popper-placement='left-end'] ._content_umk73y_13,
+  [data-popper-placement='right-end'] ._content_umk73y_13{
     margin-bottom:0;
   }
-[data-popper-placement='left-start'] ._content_1v46vsu_13,
-  [data-popper-placement='right-start'] ._content_1v46vsu_13{
+[data-popper-placement='left-start'] ._content_umk73y_13,
+  [data-popper-placement='right-start'] ._content_umk73y_13{
     margin-top:0;
   }
-._initial_1v46vsu_55 ._content_1v46vsu_13{
+._initial_umk73y_57 ._content_umk73y_13{
     transition:none;
   }
-._closing_1v46vsu_9 ._content_1v46vsu_13{
+._closing_umk73y_9 ._content_umk73y_13{
     transition-duration:200ms, 200ms;
   }
-._initial_1v46vsu_55 ._content_1v46vsu_13,
-  ._closing_1v46vsu_9 ._content_1v46vsu_13{
+._initial_umk73y_57 ._content_umk73y_13,
+  ._closing_umk73y_9 ._content_umk73y_13{
     opacity:0;
   }
-._outerThemeLight_1v46vsu_69 ._content_1v46vsu_13{
+._outerThemeLight_umk73y_71 ._content_umk73y_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);
@@ -113,7 +120,7 @@
       --rs-color-primary-t-fog-light-theme
     );
   }
-._outerThemeDark_1v46vsu_82 ._content_1v46vsu_13{
+._outerThemeDark_umk73y_84 ._content_umk73y_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);
@@ -124,20 +131,20 @@
       --rs-color-primary-t-fog-dark-theme
     );
   }
-._initial_1v46vsu_55[data-popper-placement^='top'] ._content_1v46vsu_13, ._closing_1v46vsu_9[data-popper-placement^='top'] ._content_1v46vsu_13{
+._initial_umk73y_57[data-popper-placement^='top'] ._content_umk73y_13, ._closing_umk73y_9[data-popper-placement^='top'] ._content_umk73y_13{
     transform:translate(0, 10px);
   }
-._initial_1v46vsu_55[data-popper-placement^='right'] ._content_1v46vsu_13, ._closing_1v46vsu_9[data-popper-placement^='right'] ._content_1v46vsu_13{
+._initial_umk73y_57[data-popper-placement^='right'] ._content_umk73y_13, ._closing_umk73y_9[data-popper-placement^='right'] ._content_umk73y_13{
     transform:translate(-10px, 0);
   }
-._initial_1v46vsu_55[data-popper-placement^='bottom'] ._content_1v46vsu_13, ._closing_1v46vsu_9[data-popper-placement^='bottom'] ._content_1v46vsu_13{
+._initial_umk73y_57[data-popper-placement^='bottom'] ._content_umk73y_13, ._closing_umk73y_9[data-popper-placement^='bottom'] ._content_umk73y_13{
     transform:translate(0, -10px);
   }
-._initial_1v46vsu_55[data-popper-placement^='left'] ._content_1v46vsu_13, ._closing_1v46vsu_9[data-popper-placement^='left'] ._content_1v46vsu_13{
+._initial_umk73y_57[data-popper-placement^='left'] ._content_umk73y_13, ._closing_umk73y_9[data-popper-placement^='left'] ._content_umk73y_13{
     transform:translate(10px, 0);
   }
-._trigger_1v46vsu_114:focus-visible,
-._trigger_1v46vsu_114:focus[data-focus-method='key']{
+._trigger_umk73y_116:focus-visible,
+._trigger_umk73y_116:focus[data-focus-method='key']{
   outline:none;
 
   box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;

package/lib/tooltip.d.ts

@@ -48,6 +48,7 @@ export interface TooltipProps {
      * When no space is available on the preferred placement, the tooltip will test
      * the ones provided in the list, and use the first useful one.
      * See [docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * @rawDefaultValue
      */
     fallbackPlacements?: Placement[];
     /**

package/lib/tooltip.js

@@ -1,14 +1,17 @@
 "use client";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React, { cloneElement, createElement, useState, useRef, useEffect, useCallback, useContext, isValidElement } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import { c } from 'react-compiler-runtime';
+import React, { cloneElement, createElement, useState, useRef, useContext, isValidElement } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import { useLayeringContext, ThemeContext, ThemeProvider } from '@rescui/ui-contexts';
+import { useResizeObserver } from '@rescui/use-resize-observer';
 import styles from './tooltip.p.module.css.js';
 import { useTooltipState, TOOLTIP_STATES } from './use-tooltip-state.js';
-import { extractThemeFromCss, extractPrimaryColors } from './css-vars-utils.js';
+import { useExtractCssValues } from './use-extract-css-values.js';
 const HIDE_TIMEOUT = 500;
 
 const Portal = _ref => {
@@ -19,20 +22,32 @@ const Portal = _ref => {
   return target ? /*#__PURE__*/ReactDOM.createPortal(children, target) : null;
 };
 
-const TooltipPortal = _ref2 => {
-  let {
+const TooltipPortal = t0 => {
+  const $ = c(3);
+  const {
     children,
     renderBesideTrigger,
     target
-  } = _ref2;
+  } = t0;
 
   if (renderBesideTrigger) {
     return children;
   }
 
-  return /*#__PURE__*/React.createElement(Portal, {
-    target: target
-  }, children);
+  let t1;
+
+  if ($[0] !== children || $[1] !== target) {
+    t1 = /*#__PURE__*/React.createElement(Portal, {
+      target: target
+    }, children);
+    $[0] = children;
+    $[1] = target;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+
+  return t1;
 };
 
 const isNode = maybeNode => {
@@ -61,7 +76,7 @@ const OUTER_THEME_STYLES = {
   light: styles.outerThemeLight,
   dark: styles.outerThemeDark
 };
-const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     setTriggerRef,
     targetComponent,
@@ -69,7 +84,7 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     handleMouseEnterTarget,
     handleMouseLeaveTarget,
     children
-  } = _ref3;
+  } = _ref2;
   const eventListeners = !isControlled ? {
     onMouseEnter: handleMouseEnterTarget,
     onMouseLeave: handleMouseLeaveTarget,
@@ -119,202 +134,341 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
 });
 TriggerRenderer.displayName = 'TriggerRenderer'; // eslint-disable-next-line complexity
 
-const Tooltip = _ref4 => {
-  let {
+const Tooltip = t0 => {
+  const $ = c(55);
+  const {
     children,
-    targetComponent = 'span',
+    targetComponent: t1,
     content,
     className,
     isVisible: isVisibleFromProps,
     modifiers,
-    placement = 'auto',
-    sparse = true,
-    fallbackPlacements = ['top', 'bottom'],
+    placement: t2,
+    sparse: t3,
+    fallbackPlacements: t4,
     disableHideDelay,
-    renderBesideTrigger = false
-  } = _ref4;
+    renderBesideTrigger: t5
+  } = t0;
+  const targetComponent = t1 === undefined ? "span" : t1;
+  const placement = t2 === undefined ? "auto" : t2;
+  const sparse = t3 === undefined ? true : t3;
+  let t6;
+
+  if ($[0] !== t4) {
+    t6 = t4 === undefined ? ["top", "bottom"] : t4;
+    $[0] = t4;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+
+  const fallbackPlacements = t6;
+  const renderBesideTrigger = t5 === undefined ? false : t5;
   const {
     tooltipZIndex
   } = useLayeringContext();
   const [popperRef, setPopperRef] = useState(null);
-  const [triggerRef, setTriggerRef] = useState(null);
+  const [triggerRef, setTriggerRef] = useState(undefined);
   const [isVisibleState, setIsVisibleState] = useState(false);
   const [isTooltipHovered, setIsTooltipHovered] = useState(false);
-  const schedulePopperUpdateRef = useRef(null);
-  const contentRef = useRef(null);
+  const [contentEl, setContentEl] = useState(null);
   const hideTimeoutRef = useRef(null);
-  const isControlled = typeof isVisibleFromProps !== 'undefined';
-  let isVisible = isControlled ? isVisibleFromProps : isVisibleState; // We set isVisible this way to avoid hydration issue due to
-  // the Portal to document.body which does not exist on the server.
-  // So even if isVisible prop is used, the tooltip will not render on the server, and
-  // it's the same on the first client render, so there is no hydration issue.
-
-  const [isFirstRender, setIsFirstRender] = useState(true);
-  useEffect(() => {
-    setIsFirstRender(false);
-  }, []);
-  isVisible = isFirstRender && !renderBesideTrigger ? false : isVisible;
+  const isControlled = typeof isVisibleFromProps !== "undefined";
+  const requestedVisibility = isControlled ? isVisibleFromProps : isVisibleState;
+  const isVisible = typeof triggerRef !== "undefined" || renderBesideTrigger ? requestedVisibility : false;
   const ownerDocument = triggerRef?.ownerDocument;
   const isOpen = isVisible || isTooltipHovered;
-  useEffect(() => {
-    if (schedulePopperUpdateRef.current) {
-      schedulePopperUpdateRef.current();
-    }
-  }, [content]);
+  let t7;
+
+  if ($[2] !== content) {
+    t7 = isNode(content);
+    $[2] = content;
+    $[3] = t7;
+  } else {
+    t7 = $[3];
+  }
 
-  const handleMouseEnterTarget = () => {
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
+  const contentCanBeRendered = t7;
+  const portalTargetIsAvailable = renderBesideTrigger || Boolean(ownerDocument?.body);
+  const canRenderTooltip = contentCanBeRendered && portalTargetIsAvailable;
+  let t8;
+
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = () => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+
+      setIsVisibleState(true);
+    };
+
+    $[4] = t8;
+  } else {
+    t8 = $[4];
+  }
 
-    setIsVisibleState(true);
-  };
+  const handleMouseEnterTarget = t8;
+  let t9;
 
-  const handleMouseLeaveTarget = () => {
-    if (disableHideDelay) {
-      setIsVisibleState(false);
-    } else {
-      hideTimeoutRef.current = setTimeout(() => {
+  if ($[5] !== disableHideDelay) {
+    t9 = () => {
+      if (disableHideDelay) {
         setIsVisibleState(false);
-      }, HIDE_TIMEOUT);
-    }
-  };
+      } else {
+        hideTimeoutRef.current = setTimeout(() => {
+          setIsVisibleState(false);
+        }, HIDE_TIMEOUT);
+      }
+    };
 
-  const [handleAnimationEnd, tooltipState] = useTooltipState(isOpen);
-  const isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
-  const isExists = tooltipState !== TOOLTIP_STATES.CLOSE; // a state to toggle the starting transition
+    $[5] = disableHideDelay;
+    $[6] = t9;
+  } else {
+    t9 = $[6];
+  }
 
-  const [isInitial, setIsInitial] = useState(true); // reset the initial flag when the closing transition ends and the state switches to CLOSED
+  const handleMouseLeaveTarget = t9;
+  let t10;
 
-  useEffect(() => {
-    if (!isExists) {
-      setIsInitial(true);
-    }
-  }, [isExists]);
-  const disableInitialFlag = useCallback(_ref5 => {
-    let {
-      state
-    } = _ref5;
-    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);
-  }, []);
-  const tooltipShouldBeRendered = isExists && isNode(content); // immediately fire handleAnimationEnd event on visibility change in case transition is disabled
-  // it may happen if the user hard-disabled all transitions in his browser
-
-  useEffect(() => {
-    if (!isInitial && contentRef.current) {
-      const ownerWindow = contentRef.current.ownerDocument.defaultView;
-      const isTransitionDisabled = ownerWindow?.getComputedStyle(contentRef.current).transitionDuration === '0s';
-
-      if (isTransitionDisabled) {
-        handleAnimationEnd();
+  if ($[7] !== sparse) {
+    t10 = t11 => {
+      const {
+        placement: offsetPlacement
+      } = t11;
+
+      if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, "left") || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, "right")) {
+        return [0, sparse ? 16 : 8];
+      } else {
+        return [0, sparse ? 12 : 8];
       }
-    }
-  }, [handleAnimationEnd, isInitial]);
-  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.
-    const triggerStyles = ownerDocument?.defaultView?.getComputedStyle(triggerRef);
-
-    if (triggerStyles) {
-      themeFromCss = extractThemeFromCss(triggerStyles);
-      primaryColors = extractPrimaryColors(triggerStyles);
-    }
+    };
+
+    $[7] = sparse;
+    $[8] = t10;
+  } else {
+    t10 = $[8];
   }
 
-  const {
-    theme: themeFromContext,
-    noProvider
-  } = useContext(ThemeContext);
-  const theme = noProvider ? themeFromCss : themeFromContext;
-  const calcOffset = useCallback(_ref6 => {
-    let {
-      placement: offsetPlacement
-    } = _ref6;
-
-    if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'left') || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'right')) {
-      return [0, sparse ? 16 : 8];
-    } else {
-      return [0, sparse ? 12 : 8];
-    }
-  }, [sparse]);
-  const {
-    styles: popperStyles,
-    attributes,
-    update
-  } = usePopper(triggerRef, popperRef, {
-    placement,
-    modifiers: [// the modifier to trigger starting animation
-    {
-      name: 'disableInitialFlag',
-      enabled: true,
-      phase: 'afterWrite',
-      fn: disableInitialFlag,
-      requires: []
-    }, {
-      name: 'flip',
+  const calcOffset = t10;
+  let t11;
+
+  if ($[9] !== fallbackPlacements) {
+    t11 = {
+      name: "flip",
       options: {
         fallbackPlacements
       }
-    }, {
-      name: 'offset',
+    };
+    $[9] = fallbackPlacements;
+    $[10] = t11;
+  } else {
+    t11 = $[10];
+  }
+
+  let t12;
+
+  if ($[11] !== calcOffset) {
+    t12 = {
+      name: "offset",
       options: {
         offset: calcOffset
       }
-    }, ...(modifiers || [])]
-  });
-  schedulePopperUpdateRef.current = update;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TriggerRenderer, {
-    setTriggerRef: setTriggerRef,
-    targetComponent: targetComponent,
-    isControlled: isControlled,
-    handleMouseEnterTarget: handleMouseEnterTarget,
-    handleMouseLeaveTarget: handleMouseLeaveTarget
-  }, children), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(TooltipPortal, {
-    renderBesideTrigger: renderBesideTrigger,
-    target: ownerDocument?.body
-  }, /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
-    ref: setPopperRef,
-    style: { ...popperStyles.popper,
-      ...primaryColors,
-      zIndex: tooltipZIndex
-    },
-    onMouseEnter: () => {
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current);
-        hideTimeoutRef.current = null;
-      }
+    };
+    $[11] = calcOffset;
+    $[12] = t12;
+  } else {
+    t12 = $[12];
+  }
 
-      setIsTooltipHovered(true);
-    },
-    onMouseLeave: () => {
-      setIsVisibleState(false);
-      setIsTooltipHovered(false);
-    },
-    "data-placement": placement,
-    "data-test": "tooltip",
-    ...attributes.popper
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: "dark",
-    ignoreThemeValueForCSSApi: noProvider
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.content),
-    onBlur: handleMouseLeaveTarget,
-    onFocus: handleMouseEnterTarget,
-    onTransitionEnd: handleAnimationEnd,
-    ref: contentRef
-  }, content)))));
+  let t13;
+
+  if ($[13] !== modifiers) {
+    t13 = modifiers || [];
+    $[13] = modifiers;
+    $[14] = t13;
+  } else {
+    t13 = $[14];
+  }
+
+  let t14;
+
+  if ($[15] !== t11 || $[16] !== t12 || $[17] !== t13) {
+    t14 = [t11, t12, ...t13];
+    $[15] = t11;
+    $[16] = t12;
+    $[17] = t13;
+    $[18] = t14;
+  } else {
+    t14 = $[18];
+  }
+
+  let t15;
+
+  if ($[19] !== placement || $[20] !== t14) {
+    t15 = {
+      placement,
+      modifiers: t14
+    };
+    $[19] = placement;
+    $[20] = t14;
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+
+  const {
+    styles: popperStyles,
+    attributes,
+    update
+  } = usePopper(triggerRef ?? null, popperRef, t15);
+  let t16;
+
+  if ($[22] !== update) {
+    t16 = () => {
+      update?.();
+    };
+
+    $[22] = update;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
+
+  let t17;
+
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = {
+      ignoreFirstCall: true
+    };
+    $[24] = t17;
+  } else {
+    t17 = $[24];
+  }
+
+  useResizeObserver(contentEl, t16, t17);
+  const resolvedPlacement = attributes.popper?.["data-popper-placement"] ?? null;
+  let t18;
+
+  if ($[25] !== canRenderTooltip || $[26] !== contentEl || $[27] !== isOpen || $[28] !== popperRef || $[29] !== resolvedPlacement) {
+    t18 = {
+      isOpen,
+      canRender: canRenderTooltip,
+      contentEl,
+      popperElement: popperRef,
+      resolvedPlacement
+    };
+    $[25] = canRenderTooltip;
+    $[26] = contentEl;
+    $[27] = isOpen;
+    $[28] = popperRef;
+    $[29] = resolvedPlacement;
+    $[30] = t18;
+  } else {
+    t18 = $[30];
+  }
+
+  const tooltipState = useTooltipState(t18);
+  const isInitial = tooltipState === TOOLTIP_STATES.OPENING_PREPARE;
+  const isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
+  const isExists = tooltipState !== TOOLTIP_STATES.CLOSE;
+  const tooltipShouldBeRendered = isExists && canRenderTooltip;
+  const {
+    primaryColors,
+    themeFromCss
+  } = useExtractCssValues(triggerRef, tooltipShouldBeRendered, ownerDocument?.defaultView);
+  const {
+    theme: themeFromContext,
+    noProvider
+  } = useContext(ThemeContext);
+  const theme = noProvider ? themeFromCss : themeFromContext;
+  let t19;
+
+  if ($[31] !== children || $[32] !== handleMouseLeaveTarget || $[33] !== isControlled || $[34] !== targetComponent) {
+    t19 = /*#__PURE__*/React.createElement(TriggerRenderer, {
+      setTriggerRef: setTriggerRef,
+      targetComponent: targetComponent,
+      isControlled: isControlled,
+      handleMouseEnterTarget: handleMouseEnterTarget,
+      handleMouseLeaveTarget: handleMouseLeaveTarget
+    }, children);
+    $[31] = children;
+    $[32] = handleMouseLeaveTarget;
+    $[33] = isControlled;
+    $[34] = targetComponent;
+    $[35] = t19;
+  } else {
+    t19 = $[35];
+  }
+
+  let t20;
+
+  if ($[36] !== attributes.popper || $[37] !== className || $[38] !== content || $[39] !== handleMouseLeaveTarget || $[40] !== isClosing || $[41] !== isInitial || $[42] !== noProvider || $[43] !== ownerDocument?.body || $[44] !== placement || $[45] !== popperStyles || $[46] !== primaryColors || $[47] !== renderBesideTrigger || $[48] !== theme || $[49] !== tooltipShouldBeRendered || $[50] !== tooltipZIndex) {
+    t20 = tooltipShouldBeRendered && /*#__PURE__*/React.createElement(TooltipPortal, {
+      renderBesideTrigger: renderBesideTrigger,
+      target: ownerDocument?.body
+    }, /*#__PURE__*/React.createElement("span", _extends({
+      className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
+      ref: setPopperRef,
+      style: { ...popperStyles.popper,
+        ...primaryColors,
+        zIndex: tooltipZIndex
+      },
+      onMouseEnter: () => {
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+          hideTimeoutRef.current = null;
+        }
+
+        setIsTooltipHovered(true);
+      },
+      onMouseLeave: () => {
+        setIsVisibleState(false);
+        setIsTooltipHovered(false);
+      },
+      "data-placement": placement,
+      "data-test": "tooltip"
+    }, attributes.popper), /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: "dark",
+      ignoreThemeValueForCSSApi: noProvider
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn(styles.content),
+      onBlur: handleMouseLeaveTarget,
+      onFocus: handleMouseEnterTarget,
+      ref: setContentEl
+    }, content))));
+    $[36] = attributes.popper;
+    $[37] = className;
+    $[38] = content;
+    $[39] = handleMouseLeaveTarget;
+    $[40] = isClosing;
+    $[41] = isInitial;
+    $[42] = noProvider;
+    $[43] = ownerDocument?.body;
+    $[44] = placement;
+    $[45] = popperStyles;
+    $[46] = primaryColors;
+    $[47] = renderBesideTrigger;
+    $[48] = theme;
+    $[49] = tooltipShouldBeRendered;
+    $[50] = tooltipZIndex;
+    $[51] = t20;
+  } else {
+    t20 = $[51];
+  }
+
+  let t21;
+
+  if ($[52] !== t19 || $[53] !== t20) {
+    t21 = /*#__PURE__*/React.createElement(React.Fragment, null, t19, t20);
+    $[52] = t19;
+    $[53] = t20;
+    $[54] = t21;
+  } else {
+    t21 = $[54];
+  }
+
+  return t21;
 };
 
 Tooltip.propTypes = {

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

@@ -1,10 +1,10 @@
 var styles = {
-  "tooltip": "_tooltip_1v46vsu_5",
-  "closing": "_closing_1v46vsu_9",
-  "content": "_content_1v46vsu_13",
-  "initial": "_initial_1v46vsu_55",
-  "outerThemeLight": "_outerThemeLight_1v46vsu_69",
-  "outerThemeDark": "_outerThemeDark_1v46vsu_82",
-  "trigger": "_trigger_1v46vsu_114"
+  "tooltip": "_tooltip_umk73y_5",
+  "closing": "_closing_umk73y_9",
+  "content": "_content_umk73y_13",
+  "initial": "_initial_umk73y_57",
+  "outerThemeLight": "_outerThemeLight_umk73y_71",
+  "outerThemeDark": "_outerThemeDark_umk73y_84",
+  "trigger": "_trigger_umk73y_116"
 };
 export { styles as default };

package/lib/use-extract-css-values.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '@rescui/ui-contexts';
+export declare const useExtractCssValues: (triggerRef: Element | null | undefined, shouldBeRendered: boolean, defaultView: Window | undefined) => {
+    primaryColors: Record<string, string>;
+    themeFromCss: Theme;
+};

package/lib/use-extract-css-values.js

@@ -0,0 +1,81 @@
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
+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'];
+
+const extractPrimaryColors = styles => {
+  const colors = {};
+  PRIMARY_COLORS.forEach(varName => {
+    colors[varName] = styles.getPropertyValue(varName) || 'initial';
+  });
+  return colors;
+};
+/** Check out `@rescui/colors/src/public-api.p.css` file */
+
+
+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';
+};
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+const useExtractCssValues = (triggerRef, shouldBeRendered, defaultView) => {
+  const $ = c(9);
+  let t0;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+
+  const [primaryColors, setPrimaryColors] = useState(t0);
+  const [themeFromCss, setThemeFromCss] = useState("light");
+  let t1;
+  let t2;
+
+  if ($[1] !== defaultView || $[2] !== shouldBeRendered || $[3] !== triggerRef) {
+    t1 = () => {
+      if (triggerRef && shouldBeRendered) {
+        const triggerStyles = defaultView?.getComputedStyle(triggerRef);
+
+        if (triggerStyles) {
+          setThemeFromCss(extractThemeFromCss(triggerStyles));
+          setPrimaryColors(extractPrimaryColors(triggerStyles));
+        }
+      }
+    };
+
+    t2 = [defaultView, shouldBeRendered, triggerRef];
+    $[1] = defaultView;
+    $[2] = shouldBeRendered;
+    $[3] = triggerRef;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+
+  useIsomorphicLayoutEffect(t1, t2);
+  let t3;
+
+  if ($[6] !== primaryColors || $[7] !== themeFromCss) {
+    t3 = {
+      primaryColors,
+      themeFromCss
+    };
+    $[6] = primaryColors;
+    $[7] = themeFromCss;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+
+  return t3;
+};
+
+export { useExtractCssValues };

package/lib/use-tooltip-state.d.ts

@@ -1,7 +1,16 @@
 export declare enum TOOLTIP_STATES {
+    OPENING_PREPARE = "OPENING_PREPARE",
     OPENING = "OPENING",
     OPEN = "OPEN",
     CLOSING = "CLOSING",
     CLOSE = "CLOSE"
 }
-export declare function useTooltipState(isOpen: boolean): [() => void, TOOLTIP_STATES];
+type UseTooltipStateOptions = {
+    isOpen: boolean;
+    canRender?: boolean;
+    contentEl: HTMLDivElement | null;
+    popperElement: HTMLElement | null;
+    resolvedPlacement: string | null;
+};
+export declare function useTooltipState({ isOpen, canRender, contentEl, popperElement, resolvedPlacement }: UseTooltipStateOptions): TOOLTIP_STATES;
+export {};

package/lib/use-tooltip-state.js

@@ -1,36 +1,195 @@
 "use client";
-import { useState, useRef, useCallback } from 'react';
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const TOOLTIP_TRANSITION_PROPERTIES = ['opacity', 'transform'];
+
+const getTooltipTransition = (element, property) => element.getAnimations().find(animation => animation.transitionProperty === property);
+
 var TOOLTIP_STATES;
 
 (function (TOOLTIP_STATES) {
+  TOOLTIP_STATES["OPENING_PREPARE"] = "OPENING_PREPARE";
   TOOLTIP_STATES["OPENING"] = "OPENING";
   TOOLTIP_STATES["OPEN"] = "OPEN";
   TOOLTIP_STATES["CLOSING"] = "CLOSING";
   TOOLTIP_STATES["CLOSE"] = "CLOSE";
 })(TOOLTIP_STATES || (TOOLTIP_STATES = {}));
 
-function useTooltipState(isOpen) {
-  const [, setDummyState] = useState(false);
-  const stateRef = useRef(TOOLTIP_STATES.CLOSE);
-  const onAnimationEnd = useCallback(() => {
-    if ((stateRef.current === TOOLTIP_STATES.CLOSING || stateRef.current === TOOLTIP_STATES.OPENING) && !isOpen) {
-      stateRef.current = TOOLTIP_STATES.CLOSE; //force rerender
+function useTooltipState(t0) {
+  const $ = c(14);
+  const {
+    isOpen,
+    canRender: t1,
+    contentEl,
+    popperElement,
+    resolvedPlacement
+  } = t0;
+  const canRender = t1 === undefined ? true : t1;
+  const [tooltipState, setTooltipState] = useState(isOpen && canRender ? TOOLTIP_STATES.OPENING_PREPARE : TOOLTIP_STATES.CLOSE);
+  let t2;
 
-      setDummyState(s => !s);
-    } else if (stateRef.current === TOOLTIP_STATES.OPENING && isOpen) {
-      stateRef.current = TOOLTIP_STATES.OPEN; //force rerender
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = expectedState => {
+      setTooltipState(state => {
+        if (state !== expectedState) {
+          return state;
+        }
 
-      setDummyState(s => !s);
-    }
-  }, [isOpen]);
+        if (expectedState === TOOLTIP_STATES.CLOSING) {
+          return TOOLTIP_STATES.CLOSE;
+        }
+
+        if (expectedState === TOOLTIP_STATES.OPENING) {
+          return TOOLTIP_STATES.OPEN;
+        }
+
+        return state;
+      });
+    };
+
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+
+  const completeTransition = t2;
+  let t3;
+
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      setTooltipState(_temp);
+    };
+
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+
+  const completeOpeningPreparation = t3;
+  let t4;
+  let t5;
+
+  if ($[2] !== popperElement || $[3] !== resolvedPlacement || $[4] !== tooltipState) {
+    t4 = () => {
+      if (tooltipState !== TOOLTIP_STATES.OPENING_PREPARE || !popperElement || !resolvedPlacement) {
+        return;
+      }
+
+      popperElement.getBoundingClientRect();
+      completeOpeningPreparation();
+    };
+
+    t5 = [completeOpeningPreparation, popperElement, resolvedPlacement, tooltipState];
+    $[2] = popperElement;
+    $[3] = resolvedPlacement;
+    $[4] = tooltipState;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t4 = $[5];
+    t5 = $[6];
+  }
+
+  useIsomorphicLayoutEffect(t4, t5);
+  let t6;
+
+  if ($[7] !== contentEl || $[8] !== tooltipState) {
+    t6 = () => {
+      if (tooltipState !== TOOLTIP_STATES.OPENING && tooltipState !== TOOLTIP_STATES.CLOSING) {
+        return;
+      }
+
+      if (!contentEl) {
+        return;
+      }
 
-  if (isOpen && stateRef.current !== TOOLTIP_STATES.OPEN) {
-    stateRef.current = TOOLTIP_STATES.OPENING;
-  } else if ((stateRef.current === TOOLTIP_STATES.OPEN || stateRef.current === TOOLTIP_STATES.OPENING) && !isOpen) {
-    stateRef.current = TOOLTIP_STATES.CLOSING;
+      let isCurrentPhase = true;
+
+      const completeCurrentPhase = () => {
+        if (isCurrentPhase) {
+          completeTransition(tooltipState);
+        }
+      };
+
+      const waitForCurrentTransition = (property, previousTransition) => {
+        if (!isCurrentPhase) {
+          return Promise.resolve();
+        }
+
+        const transition = getTooltipTransition(contentEl, property);
+
+        if (!transition || transition === previousTransition) {
+          return Promise.resolve();
+        }
+
+        return transition.finished.then(() => {
+          if (!isCurrentPhase) {
+            return Promise.resolve();
+          }
+
+          const replacementTransition = getTooltipTransition(contentEl, property);
+
+          if (replacementTransition && replacementTransition !== transition) {
+            return waitForCurrentTransition(property, transition);
+          }
+
+          return Promise.resolve();
+        }, () => waitForCurrentTransition(property, transition));
+      };
+
+      Promise.all(TOOLTIP_TRANSITION_PROPERTIES.map(property_0 => waitForCurrentTransition(property_0))).then(completeCurrentPhase);
+      return () => {
+        isCurrentPhase = false;
+      };
+    };
+
+    $[7] = contentEl;
+    $[8] = tooltipState;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
   }
 
-  return [onAnimationEnd, stateRef.current];
+  let t7;
+
+  if ($[10] !== contentEl || $[11] !== popperElement || $[12] !== tooltipState) {
+    t7 = [completeTransition, contentEl, popperElement, tooltipState];
+    $[10] = contentEl;
+    $[11] = popperElement;
+    $[12] = tooltipState;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+
+  useIsomorphicLayoutEffect(t6, t7);
+
+  if (!canRender && tooltipState !== TOOLTIP_STATES.CLOSE) {
+    setTooltipState(TOOLTIP_STATES.CLOSE);
+  } else {
+    if (isOpen && canRender && tooltipState === TOOLTIP_STATES.CLOSE) {
+      setTooltipState(TOOLTIP_STATES.OPENING_PREPARE);
+    } else {
+      if (isOpen && canRender && tooltipState === TOOLTIP_STATES.CLOSING) {
+        setTooltipState(TOOLTIP_STATES.OPENING);
+      } else {
+        if (!isOpen && tooltipState === TOOLTIP_STATES.OPENING_PREPARE) {
+          setTooltipState(TOOLTIP_STATES.CLOSE);
+        } else {
+          if (!isOpen && (tooltipState === TOOLTIP_STATES.OPEN || tooltipState === TOOLTIP_STATES.OPENING)) {
+            setTooltipState(TOOLTIP_STATES.CLOSING);
+          }
+        }
+      }
+    }
+  }
+
+  return tooltipState;
+}
+
+function _temp(state_0) {
+  return state_0 === TOOLTIP_STATES.OPENING_PREPARE ? TOOLTIP_STATES.OPENING : state_0;
 }
 
 export { TOOLTIP_STATES, useTooltipState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tooltip",
-  "version": "0.12.1-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
+  "version": "0.12.1-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39+8aaaed4be",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -18,7 +18,9 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
     "@popperjs/core": "^2.11.8",
+    "@rescui/use-resize-observer": "0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39+8aaaed4be",
     "classnames": "^2.2.6",
+    "react-compiler-runtime": "^1.0.0",
     "react-popper": "^2.2.5"
   },
   "peerDependencies": {
@@ -28,14 +30,14 @@
     "react-dom": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
-    "@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
+    "@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
     "@rescui/scripts": "0.5.2",
-    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8"
+    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
+  "gitHead": "8aaaed4bee650c002b7f195438380b70c31cc5a4"
 }

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

@@ -1,3 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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'];
-
-const extractPrimaryColors = styles => {
-  const colors = {};
-  PRIMARY_COLORS.forEach(varName => {
-    colors[varName] = styles.getPropertyValue(varName) || 'initial';
-  });
-  return colors;
-};
-/** Check out `@rescui/colors/src/public-api.p.css` file */
-
-
-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';
-};
-
-export { extractPrimaryColors, extractThemeFromCss };