@bpmn-io/properties-panel 3.40.0 → 3.40.1

package/dist/assets/properties-panel.css

@@ -1176,7 +1176,7 @@ textarea.bio-properties-panel-input {
   display: flex;
   color: var(--color-white, white);
   position: fixed;
-  z-index: 1000;
+  z-index: 1001;
   max-width: 300px;
   font-size: var(--text-size-small);
   font-family: var(--font-family);

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { useContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from '../preact/hooks';
+import { useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo } from '../preact/hooks';
 import { isFunction, isArray, get, assign, set, isString, isNumber, debounce } from 'min-dash';
 import { createPortal, forwardRef } from '../preact/compat';
 import { jsx, jsxs, Fragment } from '../preact/jsx-runtime';
@@ -343,6 +343,8 @@ function Tooltip(props) {
     hideDelay = 250
   } = props;
   const [visible, setVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState(null);
+  const [arrowOffset, setArrowOffset] = useState(null);
   const showTimeoutRef = useRef(null);
   const hideTimeoutRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -396,6 +398,20 @@ function Tooltip(props) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [visible, hide]);
+  useLayoutEffect(() => {
+    if (!visible || position) {
+      setTooltipPosition(null);
+      setArrowOffset(null);
+      return;
+    }
+    if (!wrapperRef.current || !tooltipRef.current) return;
+    const {
+      tooltipPosition: newPosition,
+      arrowOffset: newArrowOffset
+    } = getTooltipPosition(wrapperRef.current, tooltipRef.current, direction);
+    setTooltipPosition(newPosition);
+    setArrowOffset(newArrowOffset);
+  }, [visible, position]);
   const handleMouseLeave = ({
     relatedTarget
   }) => {
@@ -431,12 +447,14 @@ function Tooltip(props) {
     e.code === 'Escape' && hide(false);
   };
   const renderTooltip = () => {
+    const tooltipStyle = position || (tooltipPosition ? `right: ${tooltipPosition.right}; top: ${tooltipPosition.top}px;` : undefined);
+    const arrowStyle = arrowOffset != null ? `margin-top: ${arrowOffset}px;` : undefined;
     return jsxs("div", {
       class: `bio-properties-panel-tooltip ${direction}`,
       role: "tooltip",
       id: "bio-properties-panel-tooltip",
       "aria-labelledby": forId,
-      style: position || getTooltipPosition(wrapperRef.current),
+      style: tooltipStyle,
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
       onMouseEnter: handleTooltipMouseEnter,
@@ -445,7 +463,8 @@ function Tooltip(props) {
         class: "bio-properties-panel-tooltip-content",
         children: value
       }), jsx("div", {
-        class: "bio-properties-panel-tooltip-arrow"
+        class: "bio-properties-panel-tooltip-arrow",
+        style: arrowStyle
       })]
     });
   };
@@ -464,11 +483,47 @@ function Tooltip(props) {
 
 // helper
 
-function getTooltipPosition(refElement) {
+function getTooltipPosition(refElement, tooltipElement, direction) {
+  if (!refElement) {
+    return {
+      tooltipPosition: null,
+      arrowOffset: null
+    };
+  }
   const refPosition = refElement.getBoundingClientRect();
   const right = `calc(100% - ${refPosition.x}px)`;
-  const top = `${refPosition.top - 10}px`;
-  return `right: ${right}; top: ${top};`;
+  let top = refPosition.top - 10;
+  let arrowOffset = null;
+
+  // Ensure that the tooltip is within the viewport, adjust the top position if needed.
+  // This is only relevant for the 'right' direction for now
+  if (tooltipElement && direction === 'right') {
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const minTop = 0;
+    const maxTop = viewportHeight - tooltipRect.height;
+    const originalTop = top;
+    if (top > maxTop) {
+      top = maxTop;
+    }
+    if (top < minTop) {
+      top = minTop;
+    }
+
+    // Adjust the arrow position if the tooltip had to be moved to stay within viewport
+    if (top !== originalTop) {
+      const defaultMarginTop = 16;
+      const topDiff = top - originalTop;
+      arrowOffset = defaultMarginTop - topDiff;
+    }
+  }
+  return {
+    tooltipPosition: {
+      right,
+      top
+    },
+    arrowOffset
+  };
 }
 
 /**