@rescui/tooltip 0.8.15-RUI-226-Update-card-cn-4218d3f2.76 → 0.8.15-RUI-226-Update-card-cn-9ae48d69.79

package/lib/index.css

@@ -1,10 +1,10 @@
-._tooltip_1aindjy_5{
+._tooltip_13cfp0j_5{
   position:relative;
 }
-._closing_1aindjy_9{
+._closing_13cfp0j_9{
   pointer-events:none;
 }
-._content_1aindjy_13{
+._content_13cfp0j_13{
   --rs-theme-dark:1;
   --_rs-tooltip-border-width:1px;
 
@@ -75,33 +75,33 @@
   transition:opacity 300ms, transform 300ms;
   transform:translate(0, 0);
 }
-[data-real-placement='top-end'] ._content_1aindjy_13,
-  [data-real-placement='bottom-end'] ._content_1aindjy_13{
+[data-popper-placement='top-end'] ._content_13cfp0j_13,
+  [data-popper-placement='bottom-end'] ._content_13cfp0j_13{
     margin-right:0;
   }
-[data-real-placement='top-start'] ._content_1aindjy_13,
-  [data-real-placement='bottom-start'] ._content_1aindjy_13{
+[data-popper-placement='top-start'] ._content_13cfp0j_13,
+  [data-popper-placement='bottom-start'] ._content_13cfp0j_13{
     margin-left:0;
   }
-[data-real-placement='left-end'] ._content_1aindjy_13,
-  [data-real-placement='right-end'] ._content_1aindjy_13{
+[data-popper-placement='left-end'] ._content_13cfp0j_13,
+  [data-popper-placement='right-end'] ._content_13cfp0j_13{
     margin-bottom:0;
   }
-[data-real-placement='left-start'] ._content_1aindjy_13,
-  [data-real-placement='right-start'] ._content_1aindjy_13{
+[data-popper-placement='left-start'] ._content_13cfp0j_13,
+  [data-popper-placement='right-start'] ._content_13cfp0j_13{
     margin-top:0;
   }
-._initial_1aindjy_54 ._content_1aindjy_13{
+._initial_13cfp0j_54 ._content_13cfp0j_13{
     transition:none;
   }
-._closing_1aindjy_9 ._content_1aindjy_13{
+._closing_13cfp0j_9 ._content_13cfp0j_13{
     transition-duration:200ms, 200ms;
   }
-._initial_1aindjy_54 ._content_1aindjy_13,
-  ._closing_1aindjy_9 ._content_1aindjy_13{
+._initial_13cfp0j_54 ._content_13cfp0j_13,
+  ._closing_13cfp0j_9 ._content_13cfp0j_13{
     opacity:0;
   }
-._outerThemeLight_1aindjy_68 ._content_1aindjy_13{
+._outerThemeLight_13cfp0j_68 ._content_13cfp0j_13{
     --rs-color-primary-dark-theme:var(--rs-color-primary-light-theme);
     --rs-color-primary-dim-dark-theme:var(--rs-color-primary-dim-light-theme);
     --rs-color-primary-fog-dark-theme:var(--rs-color-primary-fog-light-theme);
@@ -112,7 +112,7 @@
       --rs-color-primary-t-fog-light-theme
     );
   }
-._outerThemeDark_1aindjy_81 ._content_1aindjy_13{
+._outerThemeDark_13cfp0j_81 ._content_13cfp0j_13{
     --rs-color-primary-light-theme:var(--rs-color-primary-dark-theme);
     --rs-color-primary-dim-light-theme:var(--rs-color-primary-dim-dark-theme);
     --rs-color-primary-fog-light-theme:var(--rs-color-primary-fog-dark-theme);
@@ -123,20 +123,20 @@
       --rs-color-primary-t-fog-dark-theme
     );
   }
-._initial_1aindjy_54[data-real-placement^='top'] ._content_1aindjy_13, ._closing_1aindjy_9[data-real-placement^='top'] ._content_1aindjy_13{
+._initial_13cfp0j_54[data-popper-placement^='top'] ._content_13cfp0j_13, ._closing_13cfp0j_9[data-popper-placement^='top'] ._content_13cfp0j_13{
     transform:translate(0, 10px);
   }
-._initial_1aindjy_54[data-real-placement^='right'] ._content_1aindjy_13, ._closing_1aindjy_9[data-real-placement^='right'] ._content_1aindjy_13{
+._initial_13cfp0j_54[data-popper-placement^='right'] ._content_13cfp0j_13, ._closing_13cfp0j_9[data-popper-placement^='right'] ._content_13cfp0j_13{
     transform:translate(-10px, 0);
   }
-._initial_1aindjy_54[data-real-placement^='bottom'] ._content_1aindjy_13, ._closing_1aindjy_9[data-real-placement^='bottom'] ._content_1aindjy_13{
+._initial_13cfp0j_54[data-popper-placement^='bottom'] ._content_13cfp0j_13, ._closing_13cfp0j_9[data-popper-placement^='bottom'] ._content_13cfp0j_13{
     transform:translate(0, -10px);
   }
-._initial_1aindjy_54[data-real-placement^='left'] ._content_1aindjy_13, ._closing_1aindjy_9[data-real-placement^='left'] ._content_1aindjy_13{
+._initial_13cfp0j_54[data-popper-placement^='left'] ._content_13cfp0j_13, ._closing_13cfp0j_9[data-popper-placement^='left'] ._content_13cfp0j_13{
     transform:translate(10px, 0);
   }
-._trigger_1aindjy_113:focus-visible,
-._trigger_1aindjy_113:focus[data-focus-method='key']{
+._trigger_13cfp0j_113:focus-visible,
+._trigger_13cfp0j_113:focus[data-focus-method='key']{
   outline:none;
 
   box-shadow:var(--rs-color-primary-t-dim-light-theme) 0 0 0 4px;

package/lib/tooltip.js

@@ -1,24 +1,23 @@
+"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 { 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 { ThemeContext, LayeringConsumer, ThemeProvider } from '@rescui/ui-contexts';
+import { usePopper } from 'react-popper';
+import { useLayeringContext, ThemeContext, ThemeProvider } from '@rescui/ui-contexts';
 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';
-const HIDE_TIMEOUT = 500; // it should in sync with the transition-duration css-property
-
-const CLOSING_TIMEOUT = 300;
+const HIDE_TIMEOUT = 500;
 
 const Portal = _ref => {
   let {
     children,
-    target = document.body
+    target = typeof window !== 'undefined' ? document.body : undefined
   } = _ref;
-  return /*#__PURE__*/ReactDOM.createPortal(children, target);
+  return target ? /*#__PURE__*/ReactDOM.createPortal(children, target) : null;
 };
 
 const isNode = maybeNode => {
@@ -121,14 +120,27 @@ const Tooltip = _ref3 => {
     disableHideDelay,
     renderBesideTrigger = false
   } = _ref3;
+  const {
+    tooltipZIndex
+  } = useLayeringContext();
+  const [popperRef, setPopperRef] = useState(null);
   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 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 isOpen = isVisible || isTooltipHovered;
   const PortalResolved = renderBesideTrigger ? React.Fragment : Portal;
   useEffect(() => {
@@ -156,9 +168,9 @@ const Tooltip = _ref3 => {
     }
   };
 
-  const tooltipState = useTooltipState(isOpen, CLOSING_TIMEOUT);
+  const [handleAnimationEnd, tooltipState] = useTooltipState(isOpen);
   const isClosing = tooltipState === TOOLTIP_STATES.CLOSING;
-  const isExists = tooltipState !== TOOLTIP_STATES.CLOSED; // a state to toggle the starting transition
+  const isExists = tooltipState !== TOOLTIP_STATES.CLOSE; // a state to toggle the starting transition
 
   const [isInitial, setIsInitial] = useState(true); // reset the initial flag when the closing transition ends and the state switches to CLOSED
 
@@ -197,86 +209,75 @@ const Tooltip = _ref3 => {
     noProvider
   } = useContext(ThemeContext);
   const theme = noProvider ? themeFromCss : themeFromContext;
-  return /*#__PURE__*/React.createElement(LayeringConsumer, null, _ref5 => {
+  const calcOffset = useCallback(_ref5 => {
     let {
-      tooltipZIndex
+      placement: offsetPlacement
     } = _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,
-        targetComponent: targetComponent,
-        isControlled: isControlled,
-        handleMouseEnterTarget: handleMouseEnterTarget,
-        handleMouseLeaveTarget: handleMouseLeaveTarget
-      }, children);
-    }), tooltipShouldBeRendered && /*#__PURE__*/React.createElement(PortalResolved, null, /*#__PURE__*/React.createElement(Popper, {
-      placement: placement,
-      modifiers: [// the modifier to trigger starting animation
-      {
-        name: 'disableInitialFlag',
-        enabled: true,
-        phase: 'afterWrite',
-        fn: disableInitialFlag,
-        requires: []
-      }, {
-        name: 'flip',
-        options: {
-          fallbackPlacements
-        }
-      }, {
-        name: 'offset',
-        options: {
-          offset: _ref7 => {
-            let {
-              placement: offsetPlacement
-            } = _ref7;
 
-            if (_includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'left') || _includesInstanceProperty(offsetPlacement).call(offsetPlacement, 'right')) {
-              return [0, sparse ? 16 : 8];
-            } else {
-              return [0, sparse ? 12 : 8];
-            }
-          }
-        }
-      }, ...(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: { ...style,
-          ...primaryColors,
-          zIndex: tooltipZIndex
-        },
-        onMouseEnter: () => setIsTooltipHovered(true),
-        onMouseLeave: () => {
-          setIsVisibleState(false);
-          setIsTooltipHovered(false);
-        },
-        "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),
-        onBlur: handleMouseLeaveTarget,
-        onFocus: handleMouseEnterTarget,
-        ref: contentRef
-      }, content)));
-    })));
+    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',
+      options: {
+        fallbackPlacements
+      }
+    }, {
+      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(PortalResolved, null, /*#__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: () => 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,
+    onAnimationEnd: handleAnimationEnd,
+    ref: contentRef
+  }, content)))));
 };
 
 Tooltip.propTypes = {

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

@@ -1,10 +1,10 @@
 var styles = {
-  "tooltip": "_tooltip_1aindjy_5",
-  "closing": "_closing_1aindjy_9",
-  "content": "_content_1aindjy_13",
-  "initial": "_initial_1aindjy_54",
-  "outerThemeLight": "_outerThemeLight_1aindjy_68",
-  "outerThemeDark": "_outerThemeDark_1aindjy_81",
-  "trigger": "_trigger_1aindjy_113"
+  "tooltip": "_tooltip_13cfp0j_5",
+  "closing": "_closing_13cfp0j_9",
+  "content": "_content_13cfp0j_13",
+  "initial": "_initial_13cfp0j_54",
+  "outerThemeLight": "_outerThemeLight_13cfp0j_68",
+  "outerThemeDark": "_outerThemeDark_13cfp0j_81",
+  "trigger": "_trigger_13cfp0j_113"
 };
 export { styles as default };

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

@@ -1,6 +1,7 @@
 export declare enum TOOLTIP_STATES {
+    OPENING = "OPENING",
     OPEN = "OPEN",
     CLOSING = "CLOSING",
-    CLOSED = "CLOSED"
+    CLOSE = "CLOSE"
 }
-export declare function useTooltipState(isOpen: boolean, transitionDuration?: number): TOOLTIP_STATES;
+export declare function useTooltipState(isOpen: boolean): [() => void, TOOLTIP_STATES];

package/lib/use-tooltip-state.js

@@ -1,56 +1,36 @@
-import { useState, useEffect } from 'react';
+"use client";
+import { useState, useRef, useCallback } from 'react';
 var TOOLTIP_STATES;
 
 (function (TOOLTIP_STATES) {
+  TOOLTIP_STATES["OPENING"] = "OPENING";
   TOOLTIP_STATES["OPEN"] = "OPEN";
   TOOLTIP_STATES["CLOSING"] = "CLOSING";
-  TOOLTIP_STATES["CLOSED"] = "CLOSED";
+  TOOLTIP_STATES["CLOSE"] = "CLOSE";
 })(TOOLTIP_STATES || (TOOLTIP_STATES = {}));
 
 function useTooltipState(isOpen) {
-  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(curState => {
-        if (curState === TOOLTIP_STATES.CLOSING || curState === TOOLTIP_STATES.CLOSED) {
-          return TOOLTIP_STATES.OPEN;
-        } else {
-          return curState;
-        }
-      });
-    }
-
-    if (!isOpen) {
-      // if tooltip should not be open, but actually open, start the closing process
-      setState(curState => {
-        if (curState === TOOLTIP_STATES.OPEN) {
-          return TOOLTIP_STATES.CLOSING;
-        }
+  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
 
-        return curState;
-      }); // 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
+      setDummyState(s => !s);
+    } else if (stateRef.current === TOOLTIP_STATES.OPENING && isOpen) {
+      stateRef.current = TOOLTIP_STATES.OPEN; //force rerender
 
-      const timeoutId = setTimeout(() => {
-        setState(curState => {
-          if (curState === TOOLTIP_STATES.CLOSING) {
-            return TOOLTIP_STATES.CLOSED;
-          }
-
-          return curState;
-        });
-      }, transitionDuration);
-      return () => {
-        clearTimeout(timeoutId);
-      };
-    } // eslint-disable-next-line @typescript-eslint/no-empty-function
+      setDummyState(s => !s);
+    }
+  }, [isOpen]);
 
+  if (isOpen && stateRef.current !== TOOLTIP_STATES.OPEN) {
+    stateRef.current = TOOLTIP_STATES.OPENING;
+  } else if (stateRef.current === TOOLTIP_STATES.OPEN && !isOpen) {
+    stateRef.current = TOOLTIP_STATES.CLOSING;
+  }
 
-    return () => {};
-  }, [transitionDuration, isOpen]);
-  return state;
+  return [onAnimationEnd, stateRef.current];
 }
 
 export { TOOLTIP_STATES, useTooltipState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tooltip",
-  "version": "0.8.15-RUI-226-Update-card-cn-4218d3f2.76+4218d3f2",
+  "version": "0.8.15-RUI-226-Update-card-cn-9ae48d69.79+9ae48d69",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,27 +16,27 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@popperjs/core": "^2.9.2",
+    "@popperjs/core": "^2.11.8",
     "classnames": "^2.2.6",
     "react-is": "^17.0.2",
     "react-popper": "^2.2.5"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.5.0",
-    "prop-types": "^15.7.2",
-    "react": ">=16.8.0 <19",
-    "react-dom": ">=16.8.0 <19"
+    "prop-types": "^15",
+    "react": ">=16.8.0 <20",
+    "react-dom": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-4218d3f2.76+4218d3f2",
-    "@rescui/icons": "0.16.13-RUI-226-Update-card-cn-4218d3f2.76+4218d3f2",
-    "@rescui/scripts": "0.5.0",
-    "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-4218d3f2.76+4218d3f2",
+    "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-9ae48d69.79+9ae48d69",
+    "@rescui/icons": "0.16.13-RUI-226-Update-card-cn-9ae48d69.79+9ae48d69",
+    "@rescui/scripts": "0.5.1",
+    "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-9ae48d69.79+9ae48d69",
     "@types/react-is": "^17.0.3"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "4218d3f2e5f4b00b2ed51c5b82dc9a52487128ce"
+  "gitHead": "9ae48d69f75477e5e8ecf86c0727802fd3794f79"
 }