@rescui/tooltip 0.14.3 → 0.14.4-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db

package/lib/index.css

@@ -3,15 +3,15 @@
   inherits:true;
   initial-value:0;
 }
-._tooltip_1icxgcw_5{
+._tooltip_gllyq6_5{
   position:relative;
 }
 
-._closing_1icxgcw_9{
+._closing_gllyq6_9{
   pointer-events:none;
 }
 
-._content_1icxgcw_13{
+._content_gllyq6_13{
   --rs-theme-dark:1;
   --_rs-tooltip-border-width:1px;
 
@@ -86,40 +86,40 @@
   transform:translate(0, 0);
 }
 
-[data-popper-placement='top-end'] ._content_1icxgcw_13,
-  [data-popper-placement='bottom-end'] ._content_1icxgcw_13{
+[data-popper-placement='top-end'] ._content_gllyq6_13,
+  [data-popper-placement='bottom-end'] ._content_gllyq6_13{
     margin-right:0;
   }
 
-[data-popper-placement='top-start'] ._content_1icxgcw_13,
-  [data-popper-placement='bottom-start'] ._content_1icxgcw_13{
+[data-popper-placement='top-start'] ._content_gllyq6_13,
+  [data-popper-placement='bottom-start'] ._content_gllyq6_13{
     margin-left:0;
   }
 
-[data-popper-placement='left-end'] ._content_1icxgcw_13,
-  [data-popper-placement='right-end'] ._content_1icxgcw_13{
+[data-popper-placement='left-end'] ._content_gllyq6_13,
+  [data-popper-placement='right-end'] ._content_gllyq6_13{
     margin-bottom:0;
   }
 
-[data-popper-placement='left-start'] ._content_1icxgcw_13,
-  [data-popper-placement='right-start'] ._content_1icxgcw_13{
+[data-popper-placement='left-start'] ._content_gllyq6_13,
+  [data-popper-placement='right-start'] ._content_gllyq6_13{
     margin-top:0;
   }
 
-._initial_1icxgcw_57 ._content_1icxgcw_13{
+._initial_gllyq6_57 ._content_gllyq6_13{
     transition:none;
   }
 
-._closing_1icxgcw_9 ._content_1icxgcw_13{
+._closing_gllyq6_9 ._content_gllyq6_13{
     transition-duration:200ms, 200ms;
   }
 
-._initial_1icxgcw_57 ._content_1icxgcw_13,
-  ._closing_1icxgcw_9 ._content_1icxgcw_13{
+._initial_gllyq6_57 ._content_gllyq6_13,
+  ._closing_gllyq6_9 ._content_gllyq6_13{
     opacity:0;
   }
 
-._outerThemeLight_1icxgcw_71 ._content_1icxgcw_13{
+._outerThemeLight_gllyq6_71 ._content_gllyq6_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);
@@ -131,7 +131,7 @@
     );
   }
 
-._outerThemeDark_1icxgcw_84 ._content_1icxgcw_13{
+._outerThemeDark_gllyq6_84 ._content_gllyq6_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);
@@ -143,24 +143,24 @@
     );
   }
 
-._initial_1icxgcw_57[data-popper-placement^='top'] ._content_1icxgcw_13, ._closing_1icxgcw_9[data-popper-placement^='top'] ._content_1icxgcw_13{
+._initial_gllyq6_57[data-popper-placement^='top'] ._content_gllyq6_13, ._closing_gllyq6_9[data-popper-placement^='top'] ._content_gllyq6_13{
     transform:translate(0, 10px);
   }
 
-._initial_1icxgcw_57[data-popper-placement^='right'] ._content_1icxgcw_13, ._closing_1icxgcw_9[data-popper-placement^='right'] ._content_1icxgcw_13{
+._initial_gllyq6_57[data-popper-placement^='right'] ._content_gllyq6_13, ._closing_gllyq6_9[data-popper-placement^='right'] ._content_gllyq6_13{
     transform:translate(-10px, 0);
   }
 
-._initial_1icxgcw_57[data-popper-placement^='bottom'] ._content_1icxgcw_13, ._closing_1icxgcw_9[data-popper-placement^='bottom'] ._content_1icxgcw_13{
+._initial_gllyq6_57[data-popper-placement^='bottom'] ._content_gllyq6_13, ._closing_gllyq6_9[data-popper-placement^='bottom'] ._content_gllyq6_13{
     transform:translate(0, -10px);
   }
 
-._initial_1icxgcw_57[data-popper-placement^='left'] ._content_1icxgcw_13, ._closing_1icxgcw_9[data-popper-placement^='left'] ._content_1icxgcw_13{
+._initial_gllyq6_57[data-popper-placement^='left'] ._content_gllyq6_13, ._closing_gllyq6_9[data-popper-placement^='left'] ._content_gllyq6_13{
     transform:translate(10px, 0);
   }
 
-._trigger_1icxgcw_116:focus-visible,
-._trigger_1icxgcw_116:focus[data-focus-method='key']{
+._trigger_gllyq6_116:focus-visible,
+._trigger_gllyq6_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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { StrictModifiers } from '@popperjs/core/lib/types';
-import type { Placement } from '@popperjs/core/lib/enums';
+import type { Middleware, Placement } from '@floating-ui/react-dom';
 interface TriggerTargetRequiredProps {
     ref: React.Ref<HTMLElement>;
 }
@@ -16,7 +15,8 @@ type ChildrenFunc = (arg: {
     targetProps: TriggerTargetProps;
 }) => React.ReactNode;
 export type TooltipChildren = ChildrenFunc | React.ReactNode;
-export type TooltipPlacement = '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';
+type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
+export type TooltipPlacement = Placement | AutoPlacement;
 export interface TooltipProps {
     /**
      * Target node or `({targetProps}) => node` function
@@ -37,9 +37,10 @@ export interface TooltipProps {
      */
     isVisible?: boolean;
     /**
-     * Pooper.js [modifiers](https://popper.js.org/docs/v2/modifiers/) config
+     * Floating UI [middleware](https://floating-ui.com/docs/middleware).
+     * A middleware replaces the built-in one with the same name (`offset`, `flip`, `autoPlacement` or `shift`)
      */
-    modifiers?: StrictModifiers[];
+    middleware?: Middleware[];
     /**
      * Please use only `auto`, `top-end`, `right`, `left`, `right-start` or `left-start` to be compliant with styleguide
      */
@@ -47,10 +48,10 @@ 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).
+     * See [docs](https://floating-ui.com/docs/flip#fallbackplacements).
      * @rawDefaultValue
      */
-    fallbackPlacements?: Placement[];
+    fallbackPlacements?: TooltipPlacement[];
     /**
      * Disable timeout before hide tooltip after mouse left target,
      * use with cation, it can make impossible to click on links inside tooltip

package/lib/tooltip.js

@@ -4,19 +4,51 @@ import React, { cloneElement, createElement, useState, useRef, useContext, isVal
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { usePopper } from 'react-popper';
+import { offset, autoPlacement, flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react-dom';
 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 { useExtractCssValues } from './use-extract-css-values.js';
 
 const HIDE_TIMEOUT = 500;
-const Portal = _ref => {
+const ALIGNED_PLACEMENTS = ['top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end'];
+/**
+ * Candidates for `autoPlacement()`, in the order Popper.js used to try them when
+ * several placements have the same space: `auto-start` and `auto-end` both try
+ * all aligned placements, `-start` first.
+ */
+const AUTO_PLACEMENTS = {
+  auto: ['top', 'bottom', 'right', 'left'],
+  'auto-start': ALIGNED_PLACEMENTS,
+  'auto-end': ALIGNED_PLACEMENTS
+};
+const isAutoPlacement = placement => placement.startsWith('auto');
+// `flip()` takes only exact placements. Popper.js tried the same placements for `auto*`,
+// but sorted them by the available space.
+const expandAutoPlacements = placements => placements.reduce((result, placement) => {
+  const expanded = isAutoPlacement(placement) ? AUTO_PLACEMENTS[placement] : [placement];
+  return result.concat(expanded.filter(item => !result.includes(item)));
+}, []);
+function mergeMiddleware(builtInMiddleware) {
+  let customMiddleware = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const isBuiltIn = _ref => {
+    let {
+      name
+    } = _ref;
+    return builtInMiddleware.some(builtIn => builtIn.name === name);
+  };
+  return [...builtInMiddleware.map(builtIn => customMiddleware.find(_ref2 => {
+    let {
+      name
+    } = _ref2;
+    return name === builtIn.name;
+  }) ?? builtIn), ...customMiddleware.filter(custom => !isBuiltIn(custom))];
+}
+const Portal = _ref3 => {
   let {
     children,
     target
-  } = _ref;
+  } = _ref3;
   return target ? /*#__PURE__*/ReactDOM.createPortal(children, target) : null;
 };
 const TooltipPortal = t0 => {
@@ -63,7 +95,7 @@ const OUTER_THEME_STYLES = {
   light: styles.outerThemeLight,
   dark: styles.outerThemeDark
 };
-const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     setTriggerRef,
     targetComponent,
@@ -71,7 +103,7 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     handleMouseEnterTarget,
     handleMouseLeaveTarget,
     children
-  } = _ref2;
+  } = _ref4;
   const eventListeners = !isControlled ? {
     onMouseEnter: handleMouseEnterTarget,
     onMouseLeave: handleMouseLeaveTarget,
@@ -118,14 +150,14 @@ const TriggerRenderer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 TriggerRenderer.displayName = 'TriggerRenderer';
 // eslint-disable-next-line complexity
 const Tooltip = t0 => {
-  const $ = c(55);
+  const $ = c(54);
   const {
     children,
     targetComponent: t1,
     content,
     className,
     isVisible: isVisibleFromProps,
-    modifiers,
+    middleware,
     placement: t2,
     sparse: t3,
     fallbackPlacements: t4,
@@ -135,15 +167,7 @@ const Tooltip = 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 fallbackPlacements = t4 === undefined ? ["top", "bottom"] : t4;
   const renderBesideTrigger = t5 === undefined ? false : t5;
   const {
     tooltipZIndex
@@ -159,34 +183,35 @@ const Tooltip = t0 => {
   const isVisible = typeof triggerRef !== "undefined" || renderBesideTrigger ? requestedVisibility : false;
   const ownerDocument = triggerRef?.ownerDocument;
   const isOpen = isVisible || isTooltipHovered;
-  let t7;
-  if ($[2] !== content) {
-    t7 = isNode(content);
-    $[2] = content;
-    $[3] = t7;
+  let t6;
+  if ($[0] !== content) {
+    t6 = isNode(content);
+    $[0] = content;
+    $[1] = t6;
   } else {
-    t7 = $[3];
+    t6 = $[1];
   }
-  const contentCanBeRendered = t7;
+  const contentCanBeRendered = t6;
   const portalTargetIsAvailable = renderBesideTrigger || Boolean(ownerDocument?.body);
   const canRenderTooltip = contentCanBeRendered && portalTargetIsAvailable;
-  let t8;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = () => {
+  let t7;
+  if ($[2] !== setIsVisibleState) {
+    t7 = () => {
       if (hideTimeoutRef.current) {
         clearTimeout(hideTimeoutRef.current);
         hideTimeoutRef.current = null;
       }
       setIsVisibleState(true);
     };
-    $[4] = t8;
+    $[2] = setIsVisibleState;
+    $[3] = t7;
   } else {
-    t8 = $[4];
+    t7 = $[3];
   }
-  const handleMouseEnterTarget = t8;
-  let t9;
-  if ($[5] !== disableHideDelay) {
-    t9 = () => {
+  const handleMouseEnterTarget = t7;
+  let t8;
+  if ($[4] !== disableHideDelay || $[5] !== setIsVisibleState) {
+    t8 = () => {
       if (disableHideDelay) {
         setIsVisibleState(false);
       } else {
@@ -195,131 +220,95 @@ const Tooltip = t0 => {
         }, HIDE_TIMEOUT);
       }
     };
-    $[5] = disableHideDelay;
-    $[6] = t9;
+    $[4] = disableHideDelay;
+    $[5] = setIsVisibleState;
+    $[6] = t8;
   } else {
-    t9 = $[6];
+    t8 = $[6];
   }
-  const handleMouseLeaveTarget = t9;
-  let t10;
+  const handleMouseLeaveTarget = t8;
+  let t9;
   if ($[7] !== sparse) {
-    t10 = t11 => {
+    t9 = t10 => {
       const {
         placement: offsetPlacement
-      } = t11;
+      } = t10;
       if (offsetPlacement.includes("left") || offsetPlacement.includes("right")) {
-        return [0, sparse ? 16 : 8];
+        return sparse ? 16 : 8;
       } else {
-        return [0, sparse ? 12 : 8];
+        return sparse ? 12 : 8;
       }
     };
     $[7] = sparse;
-    $[8] = t10;
-  } else {
-    t10 = $[8];
-  }
-  const calcOffset = t10;
-  let t11;
-  if ($[9] !== fallbackPlacements) {
-    t11 = {
-      name: "flip",
-      options: {
-        fallbackPlacements
-      }
-    };
-    $[9] = fallbackPlacements;
-    $[10] = t11;
+    $[8] = t9;
   } else {
-    t11 = $[10];
+    t9 = $[8];
   }
-  let t12;
-  if ($[11] !== calcOffset) {
-    t12 = {
-      name: "offset",
-      options: {
-        offset: calcOffset
-      }
+  const calcOffset = t9;
+  let t10;
+  if ($[9] !== popperRef || $[10] !== triggerRef) {
+    t10 = {
+      reference: triggerRef,
+      floating: popperRef
     };
-    $[11] = calcOffset;
-    $[12] = t12;
-  } else {
-    t12 = $[12];
-  }
-  let t13;
-  if ($[13] !== modifiers) {
-    t13 = modifiers || [];
-    $[13] = modifiers;
-    $[14] = t13;
+    $[9] = popperRef;
+    $[10] = triggerRef;
+    $[11] = t10;
   } else {
-    t13 = $[14];
+    t10 = $[11];
   }
+  const t11 = isAutoPlacement(placement) ? undefined : placement;
+  const t12 = mergeMiddleware([offset(calcOffset, [sparse]), isAutoPlacement(placement) ? autoPlacement({
+    allowedPlacements: AUTO_PLACEMENTS[placement]
+  }) : flip({
+    fallbackPlacements: expandAutoPlacements(fallbackPlacements),
+    fallbackStrategy: "initialPlacement"
+  }), shift({
+    limiter: limitShift()
+  })], middleware);
+  const t13 = popperRef !== null;
   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
+  if ($[12] !== t10 || $[13] !== t11 || $[14] !== t12 || $[15] !== t13) {
+    t14 = {
+      elements: t10,
+      placement: t11,
+      middleware: t12,
+      whileElementsMounted: autoUpdate,
+      open: t13
     };
-    $[19] = placement;
-    $[20] = t14;
-    $[21] = t15;
+    $[12] = t10;
+    $[13] = t11;
+    $[14] = t12;
+    $[15] = t13;
+    $[16] = t14;
   } else {
-    t15 = $[21];
+    t14 = $[16];
   }
   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 = {
+    floatingStyles,
+    placement: floatingPlacement,
+    isPositioned
+  } = useFloating(t14);
+  const resolvedPlacement = isPositioned ? floatingPlacement : null;
+  let t15;
+  if ($[17] !== canRenderTooltip || $[18] !== contentEl || $[19] !== isOpen || $[20] !== popperRef || $[21] !== resolvedPlacement) {
+    t15 = {
       isOpen,
       canRender: canRenderTooltip,
       contentEl,
       popperElement: popperRef,
       resolvedPlacement
     };
-    $[25] = canRenderTooltip;
-    $[26] = contentEl;
-    $[27] = isOpen;
-    $[28] = popperRef;
-    $[29] = resolvedPlacement;
-    $[30] = t18;
+    $[17] = canRenderTooltip;
+    $[18] = contentEl;
+    $[19] = isOpen;
+    $[20] = popperRef;
+    $[21] = resolvedPlacement;
+    $[22] = t15;
   } else {
-    t18 = $[30];
+    t15 = $[22];
   }
-  const tooltipState = useTooltipState(t18);
+  const tooltipState = useTooltipState(t15);
   const isInitial = tooltipState === TOOLTIP_STATES.OPENING_PREPARE;
   const isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
   const isExists = tooltipState !== TOOLTIP_STATES.CLOSE;
@@ -333,33 +322,35 @@ const Tooltip = t0 => {
     noProvider
   } = useContext(ThemeContext);
   const theme = noProvider ? themeFromCss : themeFromContext;
-  let t19;
-  if ($[31] !== children || $[32] !== handleMouseLeaveTarget || $[33] !== isControlled || $[34] !== targetComponent) {
-    t19 = /*#__PURE__*/React.createElement(TriggerRenderer, {
+  let t16;
+  if ($[23] !== children || $[24] !== handleMouseEnterTarget || $[25] !== handleMouseLeaveTarget || $[26] !== isControlled || $[27] !== setTriggerRef || $[28] !== targetComponent) {
+    t16 = /*#__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;
+    $[23] = children;
+    $[24] = handleMouseEnterTarget;
+    $[25] = handleMouseLeaveTarget;
+    $[26] = isControlled;
+    $[27] = setTriggerRef;
+    $[28] = targetComponent;
+    $[29] = t16;
   } else {
-    t19 = $[35];
+    t16 = $[29];
   }
-  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, {
+  let t17;
+  if ($[30] !== className || $[31] !== content || $[32] !== floatingStyles || $[33] !== handleMouseEnterTarget || $[34] !== handleMouseLeaveTarget || $[35] !== isClosing || $[36] !== isInitial || $[37] !== noProvider || $[38] !== ownerDocument?.body || $[39] !== placement || $[40] !== primaryColors || $[41] !== renderBesideTrigger || $[42] !== resolvedPlacement || $[43] !== setContentEl || $[44] !== setIsTooltipHovered || $[45] !== setIsVisibleState || $[46] !== setPopperRef || $[47] !== theme || $[48] !== tooltipShouldBeRendered || $[49] !== tooltipZIndex) {
+    t17 = tooltipShouldBeRendered && /*#__PURE__*/React.createElement(TooltipPortal, {
       renderBesideTrigger: renderBesideTrigger,
       target: ownerDocument?.body
-    }, /*#__PURE__*/React.createElement("span", Object.assign({
+    }, /*#__PURE__*/React.createElement("span", {
       className: cn(styles.tooltip, isInitial && styles.initial, isClosing && styles.closing, OUTER_THEME_STYLES[theme], className),
       ref: setPopperRef,
       style: {
-        ...popperStyles.popper,
+        ...floatingStyles,
         ...primaryColors,
         zIndex: tooltipZIndex
       },
@@ -375,8 +366,9 @@ const Tooltip = t0 => {
         setIsTooltipHovered(false);
       },
       "data-placement": placement,
+      "data-popper-placement": resolvedPlacement ?? undefined,
       "data-test": "tooltip"
-    }, attributes.popper), /*#__PURE__*/React.createElement(ThemeProvider, {
+    }, /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: "dark",
       ignoreThemeValueForCSSApi: noProvider
     }, /*#__PURE__*/React.createElement("div", {
@@ -385,35 +377,40 @@ const Tooltip = t0 => {
       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;
+    $[30] = className;
+    $[31] = content;
+    $[32] = floatingStyles;
+    $[33] = handleMouseEnterTarget;
+    $[34] = handleMouseLeaveTarget;
+    $[35] = isClosing;
+    $[36] = isInitial;
+    $[37] = noProvider;
+    $[38] = ownerDocument?.body;
+    $[39] = placement;
+    $[40] = primaryColors;
+    $[41] = renderBesideTrigger;
+    $[42] = resolvedPlacement;
+    $[43] = setContentEl;
+    $[44] = setIsTooltipHovered;
+    $[45] = setIsVisibleState;
+    $[46] = setPopperRef;
+    $[47] = theme;
+    $[48] = tooltipShouldBeRendered;
+    $[49] = tooltipZIndex;
+    $[50] = t17;
   } else {
-    t20 = $[51];
+    t17 = $[50];
   }
-  let t21;
-  if ($[52] !== t19 || $[53] !== t20) {
-    t21 = /*#__PURE__*/React.createElement(React.Fragment, null, t19, t20);
-    $[52] = t19;
-    $[53] = t20;
-    $[54] = t21;
+  let t18;
+  if ($[51] !== t16 || $[52] !== t17) {
+    t18 = /*#__PURE__*/React.createElement(React.Fragment, null, t16, t17);
+    $[51] = t16;
+    $[52] = t17;
+    $[53] = t18;
   } else {
-    t21 = $[54];
+    t18 = $[53];
   }
-  return t21;
+  return t18;
 };
 Tooltip.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
@@ -421,7 +418,7 @@ Tooltip.propTypes = {
   content: PropTypes.node,
   className: PropTypes.string,
   isVisible: PropTypes.bool,
-  modifiers: PropTypes.array,
+  middleware: PropTypes.array,
   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,

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

@@ -1,3 +1,3 @@
-var styles = {"tooltip":"_tooltip_1icxgcw_5","closing":"_closing_1icxgcw_9","content":"_content_1icxgcw_13","initial":"_initial_1icxgcw_57","outerThemeLight":"_outerThemeLight_1icxgcw_71","outerThemeDark":"_outerThemeDark_1icxgcw_84","trigger":"_trigger_1icxgcw_116"};
+var styles = {"tooltip":"_tooltip_gllyq6_5","closing":"_closing_gllyq6_9","content":"_content_gllyq6_13","initial":"_initial_gllyq6_57","outerThemeLight":"_outerThemeLight_gllyq6_71","outerThemeDark":"_outerThemeDark_gllyq6_84","trigger":"_trigger_gllyq6_116"};
 
 export { styles as default };

package/llm/components/tooltip.md

@@ -6,7 +6,7 @@ Tooltips display informative text when users hover over, focus on, or click an e
 
 #### Simple
 
-```tsx
+```jsx
 import { Tooltip } from '@rescui/tooltip';
 
 <Tooltip content="Simple text">Tooltip will appear on mouseIn</Tooltip>;
@@ -14,7 +14,7 @@ import { Tooltip } from '@rescui/tooltip';
 
 #### With Icon
 
-```tsx
+```jsx
 import { Tooltip } from '@rescui/tooltip';
 import { InfoIcon } from '@rescui/icons';
 
@@ -29,7 +29,7 @@ import { InfoIcon } from '@rescui/icons';
 
 #### Controlled
 
-```tsx
+```jsx
 import { Tooltip } from '@rescui/tooltip';
 import { useState } from 'react';
 import { Checkbox } from '@rescui/checkbox';
@@ -63,7 +63,7 @@ render(<MyTooltip />);
 
 Use `renderBesideTrigger` property to allow tab-focusing on the content inside tooltip.
 
-```tsx
+```jsx
 import { Tooltip } from '@rescui/tooltip';
 import { textCn } from '@rescui/typography';
 
@@ -87,7 +87,7 @@ import { textCn } from '@rescui/typography';
 </Tooltip>;
 ```
 
-```tsx
+```jsx
 import { Tooltip } from '@rescui/tooltip';
 import { textCn } from '@rescui/typography';
 
@@ -114,7 +114,7 @@ import { textCn } from '@rescui/typography';
 
 #### Showing tooltip on click
 
-```tsx
+```jsx
 import { useState } from 'react';
 import { Tooltip } from '@rescui/tooltip';
 
@@ -135,7 +135,7 @@ render(<MyTooltip />);
 
 #### Tooltip with dark background
 
-```tsx
+```jsx
 import { Tooltip } from '@rescui/tooltip';
 import { InfoIcon } from '@rescui/icons';
 import { textCn } from '@rescui/typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tooltip",
-  "version": "0.14.3",
+  "version": "0.14.4-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,11 +16,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@rescui/use-resize-observer": "^0.5.0",
+    "@floating-ui/react-dom": "^2.1.9",
     "classnames": "^2.2.6",
-    "react-compiler-runtime": "^1.0.0",
-    "react-popper": "^2.2.5"
+    "react-compiler-runtime": "^1.0.0"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.7.0 || ^0.8.0",
@@ -29,14 +27,14 @@
     "react-dom": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.6",
-    "@rescui/icons": "^1.12.0",
-    "@rescui/scripts": "^0.6.0",
-    "@rescui/typography": "^0.30.2"
+    "@rescui/colors": "0.3.7-floating-ui-migration-ee8cf10db.12.sha-ee8cf10db",
+    "@rescui/icons": "1.12.1-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db",
+    "@rescui/scripts": "0.6.0",
+    "@rescui/typography": "0.30.3-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "5a6fe218e161f8f97ea1faf56a82b0a5dae2ab4d"
+  "gitHead": "ee8cf10dbbe12af812fa565b2325a88196088d92"
 }