@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/page/components/Widgets/Overlay.js

@@ -1,51 +1,276 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useState,useRef,useEffect,useCallback}from'react';import PropTypes from'prop-types';import{makeStyles,keyframes,colorToRgba}from'@shopgate/engage/styles';import{useRoute}from'@shopgate/engage/core/hooks';import{getScrollContainer}from"./helpers";import{useWidgetPreviewEvent}from"./events";import{useWidgetsPreview}from"./hooks";/**
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles, keyframes, colorToRgba } from '@shopgate/engage/styles';
+import { useRoute } from '@shopgate/engage/core/hooks';
+import { getScrollContainer } from "./helpers";
+import { useWidgetPreviewEvent } from "./events";
+import { useWidgetsPreview } from "./hooks";
+
+/**
  * @typedef {Object} OverlayStyle
  * @property {number} top Style for the top position of the overlay.
  * @property {number} left Style for the left position of the overlay.
  * @property {number} width Style for the width of the overlay.
  * @property {number} height Style for the height of the overlay.
- */ /**
+ */
+
+/**
  * @typedef {Object} MarginOverlayStyles
  * @property {OverlayStyle} top Style for the top margin overlay.
  * @property {OverlayStyle} left Style for the left margin overlay.
  * @property {OverlayStyle} bottom Style for the bottom margin overlay.
  * @property {OverlayStyle} right Style for the right margin overlay.
- */var useStyles=makeStyles({name:'WidgetPreviewOverlay'})(function(_,_ref){var highlightColor=_ref.highlightColor,overlayBorderColor=_ref.overlayBorderColor,marginOverlayColor=_ref.marginOverlayColor,isFlashing=_ref.isFlashing;return{root:{},mainOverlay:_extends({position:'absolute',pointerEvents:'none',zIndex:10,boxShadow:'0 0 8px 2px rgba(34, 42, 69, 0.07)',outline:"1px solid ".concat(overlayBorderColor||'#50A9AD')},isFlashing&&{animationName:keyframes({'0%':{backgroundColor:'transparent'},'50%':{backgroundColor:colorToRgba(highlightColor||'#50A9AD',0.5)},'100%':{backgroundColor:'transparent'}}),animationDuration:'0.5s',animationTimingFunction:'ease-in-out',animationFillMode:'forwards'}),marginOverlay:{position:'absolute',backgroundColor:colorToRgba(marginOverlayColor||'#50A9AD',0.1),pointerEvents:'none',zIndex:9}};});/**
+ */
+
+const useStyles = makeStyles({
+  name: 'WidgetPreviewOverlay'
+})((_, {
+  highlightColor,
+  overlayBorderColor,
+  marginOverlayColor,
+  isFlashing
+}) => ({
+  root: {},
+  mainOverlay: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    zIndex: 10,
+    boxShadow: '0 0 8px 2px rgba(34, 42, 69, 0.07)',
+    outline: `1px solid ${overlayBorderColor || '#50A9AD'}`,
+    ...(isFlashing && {
+      animationName: keyframes({
+        '0%': {
+          backgroundColor: 'transparent'
+        },
+        '50%': {
+          backgroundColor: colorToRgba(highlightColor || '#50A9AD', 0.5)
+        },
+        '100%': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      animationDuration: '0.5s',
+      animationTimingFunction: 'ease-in-out',
+      animationFillMode: 'forwards'
+    })
+  },
+  marginOverlay: {
+    position: 'absolute',
+    backgroundColor: colorToRgba(marginOverlayColor || '#50A9AD', 0.1),
+    pointerEvents: 'none',
+    zIndex: 9
+  }
+}));
+
+/**
  * The Overlay component is used to highlight the active widget when preview mode is active.
  * It also visualizes the margins of the widget and the borders to its sibling widgets.
  * @param {Object} props The component props.
  * @param {React.Ref<HTMLDivElement>} props.containerRef The reference to the container element that
  * holds the widgets.
  * @returns {JSX.Element|null}
- */var Overlay=function Overlay(_ref2){var containerRef=_ref2.containerRef;var _useRoute=useRoute(),_useRoute$query=_useRoute.query,highlightColor=_useRoute$query.highlightColor,overlayBorderColor=_useRoute$query.overlayBorderColor,marginOverlayColor=_useRoute$query.marginOverlayColor;var _useWidgetsPreview=useWidgetsPreview(),activeWidget=_useWidgetsPreview.activeWidget;/**
+ */
+const Overlay = ({
+  containerRef
+}) => {
+  const {
+    query: {
+      highlightColor,
+      overlayBorderColor,
+      marginOverlayColor
+    }
+  } = useRoute();
+  const {
+    activeWidget
+  } = useWidgetsPreview();
+
+  /**
    * State to hold the style for the main overlay that highlights the active widget.
    * @type {[OverlayStyle|null, React.Dispatch<React.SetStateAction<OverlayStyle|null>>]}
-   */var _useState=useState(null),_useState2=_slicedToArray(_useState,2),mainOverlayStyle=_useState2[0],setMainOverlayStyle=_useState2[1];/**
+   */
+  const [mainOverlayStyle, setMainOverlayStyle] = useState(null);
+
+  /**
    * State to hold the styles for the margin overlays that visualize the widget margins.
    * @type {[MarginOverlayStyles|null,
    * React.Dispatch<React.SetStateAction<MarginOverlayStyles|null>>]}
-   */var _useState3=useState(null),_useState4=_slicedToArray(_useState3,2),marginOverlays=_useState4[0],setMarginOverlays=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isFlashing=_useState6[0],setIsFlashing=_useState6[1];var _useStyles=useStyles({highlightColor:highlightColor,overlayBorderColor:overlayBorderColor,marginOverlayColor:marginOverlayColor,isFlashing:isFlashing}),classes=_useStyles.classes;/**
+   */
+  const [marginOverlays, setMarginOverlays] = useState(null);
+  const [isFlashing, setIsFlashing] = useState(false);
+  const {
+    classes
+  } = useStyles({
+    highlightColor,
+    overlayBorderColor,
+    marginOverlayColor,
+    isFlashing
+  });
+
+  /**
    * @type {import('react').MutableRefObject<ResizeObserver|null>}
-   */var resizeRef=useRef(null);/**
+   */
+  const resizeRef = useRef(null);
+  /**
    * @type {import('react').MutableRefObject<MutationObserver|null>}
-   */var mutationRef=useRef(null);/**
+   */
+  const mutationRef = useRef(null);
+
+  /**
    * Callback to update the overlay position, margin overlays and size based on the active widget.
-   */var updateOverlay=useCallback(function(){if(!containerRef.current||!activeWidget){return;}var target=containerRef.current.querySelector("#widget-code-".concat(activeWidget));if(!target){setMainOverlayStyle(null);return;}var scrollContainer=getScrollContainer();// Get the computed styles of the active widget to calculate margins
-var styles=window.getComputedStyle(target);var marginLeft=parseFloat(styles.marginLeft);var marginRight=parseFloat(styles.marginRight);var marginTop=parseFloat(styles.marginTop);var marginBottom=parseFloat(styles.marginBottom);// Get bounding rectangles for the target widget and the scroll container
-var elementRect=target.getBoundingClientRect();var containerRect=scrollContainer.getBoundingClientRect();var baseTop=elementRect.top-containerRect.top+scrollContainer.scrollTop;var baseLeft=elementRect.left-containerRect.left+scrollContainer.scrollLeft;var top=baseTop;var left=baseLeft-marginLeft;var width=target.offsetWidth+marginLeft+marginRight;var height=target.offsetHeight;// Keep a backdoor to re-enable overlay outline inside the widget margins
-var mainOverlayBordersOnMarginEdges=true;var mainTop=baseTop-(mainOverlayBordersOnMarginEdges?marginTop:0);var mainHeight=height+(mainOverlayBordersOnMarginEdges?marginTop+marginBottom:0);setMainOverlayStyle({top:mainTop+1,left:left,width:width,height:mainHeight-2});setMarginOverlays({top:{top:top-marginTop,left:left,width:width,height:marginTop},bottom:{top:top+height,left:left,width:width,height:marginBottom},left:{top:top,left:left,width:marginLeft,height:height},right:{top:top,left:left+width-marginRight,width:marginRight,height:height}});},[activeWidget,containerRef]);// Effect to setup observers that watch for changes in the container and its children.
-// Needed to update the overlay style when the layout changes.
-useEffect(function(){var containerEl=containerRef.current;if(!containerEl)return undefined;// Create a ResizeObserver to watch for size changes of children
-resizeRef.current=new ResizeObserver(function(){// Whenever any observed child resizes, update overlay
-updateOverlay();});// Observe all existing children
-Array.from(containerEl.children).forEach(function(child){if(child.nodeType===Node.ELEMENT_NODE){resizeRef.current.observe(child);}});// Create one MutationObserver on the container to watch for changes in the DOM
-mutationRef.current=new MutationObserver(function(mutations){// eslint-disable-next-line no-restricted-syntax
-var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=mutations[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var mutation=_step.value;if(mutation.type==='childList'){// Handle newly added nodes - observe them for size changes
-mutation.addedNodes.forEach(function(node){if(node.nodeType===Node.ELEMENT_NODE){resizeRef.current.observe(node);}});// Handle removed nodes - remove them from observation
-mutation.removedNodes.forEach(function(node){if(node.nodeType===Node.ELEMENT_NODE){resizeRef.current.unobserve(node);}});// If children were added/removed, recalculate overlay position
-updateOverlay();}else if(mutation.type==='attributes'&&(mutation.attributeName==='class'||mutation.attributeName==='style')){// Update overlay if the class or style of a child changes
-if(mutation.target.parentElement===containerEl){updateOverlay();}}}}catch(err){_didIteratorError=true;_iteratorError=err;}finally{try{if(!_iteratorNormalCompletion&&_iterator["return"]!=null){_iterator["return"]();}}finally{if(_didIteratorError){throw _iteratorError;}}}});// Start observing:
-// - childList:true → to catch added/removed children
-// - subtree:true + attributes:true → to catch any class/style changes in descendants
-mutationRef.current.observe(containerEl,{childList:true,subtree:true,attributes:true,attributeFilter:['class','style']});// Cleanup on unmount or if updateOverlay changes:
-return function(){if(resizeRef.current){resizeRef.current.disconnect();resizeRef.current=null;}if(mutationRef.current){mutationRef.current.disconnect();mutationRef.current=null;}};},[containerRef,updateOverlay]);useWidgetPreviewEvent('highlight-widget',function(){setIsFlashing(true);});var handleAnimationEnd=useCallback(function(){setIsFlashing(false);},[]);if(!mainOverlayStyle)return null;return React.createElement("div",{className:classes.root},React.createElement("div",{className:classes.mainOverlay,style:mainOverlayStyle,onAnimationEnd:handleAnimationEnd}),marginOverlays&&Object.entries(marginOverlays).map(function(_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],overlayStyle=_ref4[1];return React.createElement("div",{key:key,className:classes.marginOverlay,style:overlayStyle});}));};export default Overlay;
+   */
+  const updateOverlay = useCallback(() => {
+    if (!containerRef.current || !activeWidget) {
+      return;
+    }
+    const target = containerRef.current.querySelector(`#widget-code-${activeWidget}`);
+    if (!target) {
+      setMainOverlayStyle(null);
+      return;
+    }
+    const scrollContainer = getScrollContainer();
+
+    // Get the computed styles of the active widget to calculate margins
+    const styles = window.getComputedStyle(target);
+    const marginLeft = parseFloat(styles.marginLeft);
+    const marginRight = parseFloat(styles.marginRight);
+    const marginTop = parseFloat(styles.marginTop);
+    const marginBottom = parseFloat(styles.marginBottom);
+
+    // Get bounding rectangles for the target widget and the scroll container
+    const elementRect = target.getBoundingClientRect();
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const baseTop = elementRect.top - containerRect.top + scrollContainer.scrollTop;
+    const baseLeft = elementRect.left - containerRect.left + scrollContainer.scrollLeft;
+    const top = baseTop;
+    const left = baseLeft - marginLeft;
+    const width = target.offsetWidth + marginLeft + marginRight;
+    const height = target.offsetHeight;
+
+    // Keep a backdoor to re-enable overlay outline inside the widget margins
+    const mainOverlayBordersOnMarginEdges = true;
+    const mainTop = baseTop - (mainOverlayBordersOnMarginEdges ? marginTop : 0);
+    const mainHeight = height + (mainOverlayBordersOnMarginEdges ? marginTop + marginBottom : 0);
+    setMainOverlayStyle({
+      top: mainTop + 1,
+      left,
+      width,
+      height: mainHeight - 2
+    });
+    setMarginOverlays({
+      top: {
+        top: top - marginTop,
+        left,
+        width,
+        height: marginTop
+      },
+      bottom: {
+        top: top + height,
+        left,
+        width,
+        height: marginBottom
+      },
+      left: {
+        top,
+        left,
+        width: marginLeft,
+        height
+      },
+      right: {
+        top,
+        left: left + width - marginRight,
+        width: marginRight,
+        height
+      }
+    });
+  }, [activeWidget, containerRef]);
+
+  // Effect to setup observers that watch for changes in the container and its children.
+  // Needed to update the overlay style when the layout changes.
+  useEffect(() => {
+    const containerEl = containerRef.current;
+    if (!containerEl) return undefined;
+
+    // Create a ResizeObserver to watch for size changes of children
+    resizeRef.current = new ResizeObserver(() => {
+      // Whenever any observed child resizes, update overlay
+      updateOverlay();
+    });
+
+    // Observe all existing children
+    Array.from(containerEl.children).forEach(child => {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        resizeRef.current.observe(child);
+      }
+    });
+
+    // Create one MutationObserver on the container to watch for changes in the DOM
+    mutationRef.current = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          // Handle newly added nodes - observe them for size changes
+          mutation.addedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              resizeRef.current.observe(node);
+            }
+          });
+
+          // Handle removed nodes - remove them from observation
+          mutation.removedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              resizeRef.current.unobserve(node);
+            }
+          });
+
+          // If children were added/removed, recalculate overlay position
+          updateOverlay();
+        } else if (mutation.type === 'attributes' && (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
+          // Update overlay if the class or style of a child changes
+          if (mutation.target.parentElement === containerEl) {
+            updateOverlay();
+          }
+        }
+      }
+    });
+
+    // Start observing:
+    // - childList:true → to catch added/removed children
+    // - subtree:true + attributes:true → to catch any class/style changes in descendants
+    mutationRef.current.observe(containerEl, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['class', 'style']
+    });
+
+    // Cleanup on unmount or if updateOverlay changes:
+    return () => {
+      if (resizeRef.current) {
+        resizeRef.current.disconnect();
+        resizeRef.current = null;
+      }
+      if (mutationRef.current) {
+        mutationRef.current.disconnect();
+        mutationRef.current = null;
+      }
+    };
+  }, [containerRef, updateOverlay]);
+  useWidgetPreviewEvent('highlight-widget', () => {
+    setIsFlashing(true);
+  });
+  const handleAnimationEnd = useCallback(() => {
+    setIsFlashing(false);
+  }, []);
+  if (!mainOverlayStyle) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.mainOverlay,
+    style: mainOverlayStyle,
+    onAnimationEnd: handleAnimationEnd
+  }), marginOverlays && Object.entries(marginOverlays).map(([key, overlayStyle]) => /*#__PURE__*/React.createElement("div", {
+    key: key,
+    className: classes.marginOverlay,
+    style: overlayStyle
+  })));
+};
+export default Overlay;

package/page/components/Widgets/Tooltip.js

@@ -1,22 +1,199 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useRef,useEffect}from'react';import ReactDOM from'react-dom';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(){return{wrapper:{display:'inline-block',position:'relative',cursor:'help'},tooltipBox:{position:'absolute',padding:'6px 10px',backgroundColor:'rgba(0, 0, 0, 0.87)',color:'#fff',fontSize:'0.875rem',fontWeight:400,borderRadius:'4px',whiteSpace:'normal',// allow multiline
-wordBreak:'break-word',maxWidth:'200px',zIndex:1000,pointerEvents:'none',opacity:0,transform:'scale(0.9)',transition:'opacity 0.1s ease-in-out, transform 0.1s ease-in-out','&[data-visible="true"]':{opacity:1,transform:'scale(1)'}},arrowTop:{'&::before':{content:"''",position:'absolute',bottom:'-6px',left:'var(--arrow-left, 50%)',transform:'translateX(-50%)',borderWidth:'6px 6px 0 6px',borderStyle:'solid',borderColor:'rgba(0, 0, 0, 0.87) transparent transparent transparent'}},arrowBottom:{'&::before':{content:"''",position:'absolute',top:'-6px',left:'var(--arrow-left, 50%)',transform:'translateX(-50%) rotate(180deg)',borderWidth:'6px 6px 0 6px',borderStyle:'solid',borderColor:'rgba(0, 0, 0, 0.87) transparent transparent transparent'}}};});/**
+import React, { useState, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+const useStyles = makeStyles()(() => ({
+  wrapper: {
+    display: 'inline-block',
+    position: 'relative',
+    cursor: 'help'
+  },
+  tooltipBox: {
+    position: 'absolute',
+    padding: '6px 10px',
+    backgroundColor: 'rgba(0, 0, 0, 0.87)',
+    color: '#fff',
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    borderRadius: '4px',
+    whiteSpace: 'normal',
+    // allow multiline
+    wordBreak: 'break-word',
+    maxWidth: '200px',
+    zIndex: 1000,
+    pointerEvents: 'none',
+    opacity: 0,
+    transform: 'scale(0.9)',
+    transition: 'opacity 0.1s ease-in-out, transform 0.1s ease-in-out',
+    '&[data-visible="true"]': {
+      opacity: 1,
+      transform: 'scale(1)'
+    }
+  },
+  arrowTop: {
+    '&::before': {
+      content: "''",
+      position: 'absolute',
+      bottom: '-6px',
+      left: 'var(--arrow-left, 50%)',
+      transform: 'translateX(-50%)',
+      borderWidth: '6px 6px 0 6px',
+      borderStyle: 'solid',
+      borderColor: 'rgba(0, 0, 0, 0.87) transparent transparent transparent'
+    }
+  },
+  arrowBottom: {
+    '&::before': {
+      content: "''",
+      position: 'absolute',
+      top: '-6px',
+      left: 'var(--arrow-left, 50%)',
+      transform: 'translateX(-50%) rotate(180deg)',
+      borderWidth: '6px 6px 0 6px',
+      borderStyle: 'solid',
+      borderColor: 'rgba(0, 0, 0, 0.87) transparent transparent transparent'
+    }
+  }
+}));
+
+/**
  * AI generated Tooltip component to display additional information on hover.
  * @param {Object} props The component props.
  * @param {React.ReactNode} props.children The child elements to wrap.
  * @param {string} props.text The tooltip text to display.
  * @returns {JSX.Element}
- */function Tooltip(_ref){var children=_ref.children,text=_ref.text;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var wrapperRef=useRef(null);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),visible=_useState2[0],setVisible=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),mounted=_useState4[0],setMounted=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),animate=_useState6[0],setAnimate=_useState6[1];var _useState7=useState({left:0,top:0}),_useState8=_slicedToArray(_useState7,2),coords=_useState8[0],setCoords=_useState8[1];var _useState9=useState(null),_useState10=_slicedToArray(_useState9,2),arrowLeft=_useState10[0],setArrowLeft=_useState10[1];var _useState11=useState('top'),_useState12=_slicedToArray(_useState11,2),positionState=_useState12[0],setPositionState=_useState12[1];// 'top' or 'bottom'
-var tooltipId=useRef(Math.random().toString(36).slice(2,11));// Handle mounting/unmounting and trigger fade animation
-useEffect(function(){var timeoutId;if(visible){setMounted(true);// allow DOM to insert before starting the fade-in
-timeoutId=setTimeout(function(){return setAnimate(true);},10);}else{setAnimate(false);// after fade-out duration, unmount
-timeoutId=setTimeout(function(){return setMounted(false);},200);}return function(){return clearTimeout(timeoutId);};},[visible]);// Compute position, flipping if needed, when mounted
-useEffect(function(){if(!mounted||!wrapperRef.current)return;var wrapperRect=wrapperRef.current.getBoundingClientRect();var selector=".tooltip-box[data-tooltip-id=\"".concat(tooltipId.current,"\"]");var tooltipEl=document.querySelector(selector);if(!tooltipEl)return;var ttRect=tooltipEl.getBoundingClientRect();var margin=8;var vw=window.innerWidth;var vh=window.innerHeight;// 1) Try "top" placement
-var left=wrapperRect.left+wrapperRect.width/2-ttRect.width/2;var top=wrapperRect.top-ttRect.height-8;// Clamp horizontal even before deciding flip, to calculate arrow offset
-if(left<margin){left=margin;}else if(left+ttRect.width>vw-margin){left=vw-ttRect.width-margin;}// If top would be too high (tooltip clipped), switch to "bottom"
-var finalPosition='top';if(top<margin){// try bottom
-var bottomTop=wrapperRect.bottom+8;if(bottomTop+ttRect.height<=vh-margin){finalPosition='bottom';top=bottomTop;}else{// can't fit fully in bottom either; clamp top to margin
-top=margin;}}// If using "top", ensure vertical clamp if it goes off bottom
-if(finalPosition==='top'){if(top+ttRect.height>vh-margin){top=vh-ttRect.height-margin;}}// If using "bottom", clamp bottom if it would go off bottom
-if(finalPosition==='bottom'){if(top+ttRect.height>vh-margin){top=vh-ttRect.height-margin;}}// 2) Compute arrow offset so it points to wrapper’s center X
-var wrapperCenterX=wrapperRect.left+wrapperRect.width/2;var computedArrowLeft=wrapperCenterX-left;// Clamp arrow within [6px, ttRect.width - 6px]
-var minArrow=6;var maxArrow=ttRect.width-6;if(computedArrowLeft<minArrow){computedArrowLeft=minArrow;}else if(computedArrowLeft>maxArrow){computedArrowLeft=maxArrow;}setPositionState(finalPosition);setCoords({left:left,top:top});setArrowLeft(computedArrowLeft);},[mounted]);if(!text){return children;}var portalStyle=_extends({left:"".concat(coords.left,"px"),top:"".concat(coords.top,"px")},arrowLeft!==null?{'--arrow-left':"".concat(arrowLeft,"px")}:{});var arrowClass=positionState==='top'?classes.arrowTop:classes.arrowBottom;return React.createElement("span",{className:classes.wrapper,ref:wrapperRef,"data-tooltip-id":tooltipId.current,onMouseEnter:function onMouseEnter(){return setVisible(true);},onMouseLeave:function onMouseLeave(){return setVisible(false);}},children,mounted&&ReactDOM.createPortal(React.createElement("div",{className:cx(classes.tooltipBox,arrowClass,'tooltip-box'),style:portalStyle,"data-visible":animate?'true':'false',"data-tooltip-id":tooltipId.current,dangerouslySetInnerHTML:{__html:text}}),document.body));}Tooltip.defaultProps={text:null};export default Tooltip;
+ */
+function Tooltip({
+  children,
+  text
+}) {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const wrapperRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [animate, setAnimate] = useState(false);
+  const [coords, setCoords] = useState({
+    left: 0,
+    top: 0
+  });
+  const [arrowLeft, setArrowLeft] = useState(null);
+  const [positionState, setPositionState] = useState('top'); // 'top' or 'bottom'
+  const tooltipId = useRef(Math.random().toString(36).slice(2, 11));
+
+  // Handle mounting/unmounting and trigger fade animation
+  useEffect(() => {
+    let timeoutId;
+    if (visible) {
+      setMounted(true);
+      // allow DOM to insert before starting the fade-in
+      timeoutId = setTimeout(() => setAnimate(true), 10);
+    } else {
+      setAnimate(false);
+      // after fade-out duration, unmount
+      timeoutId = setTimeout(() => setMounted(false), 200);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [visible]);
+
+  // Compute position, flipping if needed, when mounted
+  useEffect(() => {
+    if (!mounted || !wrapperRef.current) return;
+    const wrapperRect = wrapperRef.current.getBoundingClientRect();
+    const selector = `.tooltip-box[data-tooltip-id="${tooltipId.current}"]`;
+    const tooltipEl = document.querySelector(selector);
+    if (!tooltipEl) return;
+    const ttRect = tooltipEl.getBoundingClientRect();
+    const margin = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    // 1) Try "top" placement
+    let left = wrapperRect.left + wrapperRect.width / 2 - ttRect.width / 2;
+    let top = wrapperRect.top - ttRect.height - 8;
+
+    // Clamp horizontal even before deciding flip, to calculate arrow offset
+    if (left < margin) {
+      left = margin;
+    } else if (left + ttRect.width > vw - margin) {
+      left = vw - ttRect.width - margin;
+    }
+
+    // If top would be too high (tooltip clipped), switch to "bottom"
+    let finalPosition = 'top';
+    if (top < margin) {
+      // try bottom
+      const bottomTop = wrapperRect.bottom + 8;
+      if (bottomTop + ttRect.height <= vh - margin) {
+        finalPosition = 'bottom';
+        top = bottomTop;
+      } else {
+        // can't fit fully in bottom either; clamp top to margin
+        top = margin;
+      }
+    }
+
+    // If using "top", ensure vertical clamp if it goes off bottom
+    if (finalPosition === 'top') {
+      if (top + ttRect.height > vh - margin) {
+        top = vh - ttRect.height - margin;
+      }
+    }
+    // If using "bottom", clamp bottom if it would go off bottom
+    if (finalPosition === 'bottom') {
+      if (top + ttRect.height > vh - margin) {
+        top = vh - ttRect.height - margin;
+      }
+    }
+
+    // 2) Compute arrow offset so it points to wrapper’s center X
+    const wrapperCenterX = wrapperRect.left + wrapperRect.width / 2;
+    let computedArrowLeft = wrapperCenterX - left;
+    // Clamp arrow within [6px, ttRect.width - 6px]
+    const minArrow = 6;
+    const maxArrow = ttRect.width - 6;
+    if (computedArrowLeft < minArrow) {
+      computedArrowLeft = minArrow;
+    } else if (computedArrowLeft > maxArrow) {
+      computedArrowLeft = maxArrow;
+    }
+    setPositionState(finalPosition);
+    setCoords({
+      left,
+      top
+    });
+    setArrowLeft(computedArrowLeft);
+  }, [mounted]);
+  if (!text) {
+    return children;
+  }
+  const portalStyle = {
+    left: `${coords.left}px`,
+    top: `${coords.top}px`,
+    ...(arrowLeft !== null ? {
+      '--arrow-left': `${arrowLeft}px`
+    } : {})
+  };
+  const arrowClass = positionState === 'top' ? classes.arrowTop : classes.arrowBottom;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classes.wrapper,
+    ref: wrapperRef,
+    "data-tooltip-id": tooltipId.current,
+    onMouseEnter: () => setVisible(true),
+    onMouseLeave: () => setVisible(false)
+  }, children, mounted && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+    className: cx(classes.tooltipBox, arrowClass, 'tooltip-box'),
+    style: portalStyle,
+    "data-visible": animate ? 'true' : 'false',
+    "data-tooltip-id": tooltipId.current,
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  }), document.body));
+}
+Tooltip.defaultProps = {
+  text: null
+};
+export default Tooltip;