@moving-walls/design-system 1.0.22 → 1.0.23

package/dist/index.js

@@ -41337,8 +41337,8 @@ function Tooltip(_ref2) {
     _useState6 = _slicedToArray(_useState5, 2),
     resolvedPosition = _useState6[0],
     setResolvedPosition = _useState6[1];
-  React.useLayoutEffect(function () {
-    if (!isVisible || !triggerRef.current || !tooltipRef.current) return;
+  var recalculate = React.useCallback(function () {
+    if (!triggerRef.current || !tooltipRef.current) return;
     var triggerRect = triggerRef.current.getBoundingClientRect();
     var tooltipRect = tooltipRef.current.getBoundingClientRect();
     var vw = window.innerWidth;
@@ -41346,7 +41346,6 @@ function Tooltip(_ref2) {
     var top = 0;
     var left = 0;
     var resolved = position;
-    // Calculate preferred position
     var calc = function calc(pos) {
       switch (pos) {
         case 'top':
@@ -41368,7 +41367,6 @@ function Tooltip(_ref2) {
       }
     };
     calc(position);
-    // Flip if overflowing viewport
     if (position === 'top' && top < PADDING) {
       resolved = 'bottom';
       calc('bottom');
@@ -41382,10 +41380,8 @@ function Tooltip(_ref2) {
       resolved = 'left';
       calc('left');
     }
-    // Clamp horizontal to stay within viewport
     if (left < PADDING) left = PADDING;
     if (left + tooltipRect.width > vw - PADDING) left = vw - PADDING - tooltipRect.width;
-    // Clamp vertical
     if (top < PADDING) top = PADDING;
     if (top + tooltipRect.height > vh - PADDING) top = vh - PADDING - tooltipRect.height;
     setCoords({
@@ -41393,10 +41389,20 @@ function Tooltip(_ref2) {
       left: left
     });
     setResolvedPosition(resolved);
-  }, [isVisible, position]);
+  }, [position]);
+  // Recalculate on visibility change
+  React.useLayoutEffect(function () {
+    if (!isVisible) return;
+    recalculate();
+  }, [isVisible, recalculate]);
+  // Use callback ref to recalculate once the portal element is mounted in the DOM
+  var tooltipCallbackRef = React.useCallback(function (node) {
+    tooltipRef.current = node;
+    if (node && isVisible) recalculate();
+  }, [isVisible, recalculate]);
   var show = React.useCallback(function () {
-    return setIsVisible(true);
-  }, []);
+    if (content != null && content !== '') setIsVisible(true);
+  }, [content]);
   var hide = React.useCallback(function () {
     setIsVisible(false);
     setCoords(null);
@@ -41432,16 +41438,18 @@ function Tooltip(_ref2) {
       onFocus: show,
       onBlur: hide,
       children: children
-    }), isVisible && /*#__PURE__*/ReactDOM.createPortal(require$$1.jsxs("div", {
-      ref: tooltipRef,
+    }), isVisible && content != null && content !== '' && /*#__PURE__*/ReactDOM.createPortal(require$$1.jsxs("div", {
+      ref: tooltipCallbackRef,
       style: coords ? {
         top: coords.top,
-        left: coords.left
+        left: coords.left,
+        zIndex: 999999
       } : {
         top: -9999,
-        left: -9999
+        left: -9999,
+        zIndex: 999999
       },
-      className: clsx('fixed z-[9999] px-2 py-1 text-sm text-mw-neutral-500 bg-white border border-mw-neutral-100 rounded-md shadow-sm max-w-xs whitespace-normal', className),
+      className: clsx('fixed px-2 py-1 text-sm text-mw-neutral-500 bg-white border border-mw-neutral-100 rounded-md shadow-sm max-w-sm whitespace-normal', className),
       children: [content, require$$1.jsx("div", {
         className: clsx('w-0 h-0 border-4', arrowClasses[resolvedPosition]),
         style: arrowStyle()