@bpmn-io/properties-panel 3.26.1 → 3.26.3

package/dist/index.esm.js

@@ -283,7 +283,7 @@ function TooltipWrapper(props) {
   return jsx(Tooltip, {
     ...props,
     value: value,
-    forId: prefixId$9(forId)
+    forId: `bio-properties-panel-${forId}`
   });
 }
 function Tooltip(props) {
@@ -294,71 +294,52 @@ function Tooltip(props) {
     direction = 'right',
     position
   } = props;
-  const [visible, setShow] = useState(false);
-  const [focusedViaKeyboard, setFocusedViaKeyboard] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
+  const SHOW_DELAY = 200;
   let timeout = null;
   const wrapperRef = useRef(null);
   const tooltipRef = useRef(null);
-  const showTooltip = async event => {
-    const show = () => setShow(true);
-    if (!visible && !timeout) {
-      if (event instanceof MouseEvent) {
-        timeout = setTimeout(show, 200);
-      } else {
-        show();
-        setFocusedViaKeyboard(true);
-      }
+  const show = (_, delay) => {
+    if (visible) return;
+    if (delay) {
+      timeout = setTimeout(() => {
+        setVisible(true);
+      }, SHOW_DELAY);
+    } else {
+      setVisible(true);
     }
   };
-  const hideTooltip = () => {
-    setShow(false);
-    setFocusedViaKeyboard(false);
-  };
-  const hideTooltipViaEscape = e => {
-    e.code === 'Escape' && hideTooltip();
+  const hide = () => {
+    clearTimeout(timeout);
+    setVisible(false);
   };
-  const isTooltipHovered = ({
-    x,
-    y
+  const handleMouseLeave = ({
+    relatedTarget
   }) => {
-    const tooltip = tooltipRef.current;
-    const wrapper = wrapperRef.current;
-    return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+    // Don't hide the tooltip when moving mouse between the wrapper and the tooltip.
+    if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) {
+      return;
+    }
+    hide();
   };
-  useEffect(() => {
+  const handleFocusOut = e => {
     const {
-      current
-    } = wrapperRef;
-    if (!current) {
+      target
+    } = e;
+
+    // Don't hide the tooltip if the wrapper or the tooltip itself is clicked.
+    const isHovered = target.matches(':hover') || tooltipRef.current?.matches(':hover');
+    if (target === wrapperRef.current && isHovered) {
+      e.stopPropagation();
       return;
     }
-    const hideHoveredTooltip = e => {
-      const isFocused = document.activeElement === wrapperRef.current || document.activeElement.closest('.bio-properties-panel-tooltip');
-      if (visible && !isTooltipHovered({
-        x: e.x,
-        y: e.y
-      }) && !(isFocused && focusedViaKeyboard)) {
-        hideTooltip();
-      }
-    };
-    const hideFocusedTooltip = e => {
-      const {
-        relatedTarget
-      } = e;
-      const isTooltipChild = el => !!el.closest('.bio-properties-panel-tooltip');
-      if (visible && !isHovered(wrapperRef.current) && relatedTarget && !isTooltipChild(relatedTarget)) {
-        hideTooltip();
-      }
-    };
-    document.addEventListener('wheel', hideHoveredTooltip);
-    document.addEventListener('focusout', hideFocusedTooltip);
-    document.addEventListener('mousemove', hideHoveredTooltip);
-    return () => {
-      document.removeEventListener('wheel', hideHoveredTooltip);
-      document.removeEventListener('mousemove', hideHoveredTooltip);
-      document.removeEventListener('focusout', hideFocusedTooltip);
-    };
-  }, [wrapperRef.current, visible, focusedViaKeyboard]);
+    hide();
+  };
+  const hideTooltipViaEscape = e => {
+    e.code === 'Escape' && hide();
+  };
   const renderTooltip = () => {
     return jsxs("div", {
       class: `bio-properties-panel-tooltip ${direction}`,
@@ -368,6 +349,7 @@ function Tooltip(props) {
       style: position || getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
+      onMouseLeave: handleMouseLeave,
       children: [jsx("div", {
         class: "bio-properties-panel-tooltip-content",
         children: value
@@ -380,39 +362,23 @@ function Tooltip(props) {
     class: "bio-properties-panel-tooltip-wrapper",
     tabIndex: "0",
     ref: wrapperRef,
-    onMouseEnter: showTooltip,
-    onMouseLeave: () => {
-      clearTimeout(timeout);
-      timeout = null;
-    },
-    onFocus: showTooltip,
+    onMouseEnter: e => show(e, true),
+    onMouseLeave: handleMouseLeave,
+    onFocus: show,
+    onBlur: handleFocusOut,
     onKeyDown: hideTooltipViaEscape,
     children: [props.children, visible ? parent ? createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
   });
 }
 
 // helper
-function inBounds(x, y, bounds) {
-  const {
-    top,
-    right,
-    bottom,
-    left
-  } = bounds;
-  return x >= left && x <= right && y >= top && y <= bottom;
-}
+
 function getTooltipPosition(refElement) {
   const refPosition = refElement.getBoundingClientRect();
   const right = `calc(100% - ${refPosition.x}px)`;
   const top = `${refPosition.top - 10}px`;
   return `right: ${right}; top: ${top};`;
 }
-function isHovered(element) {
-  return element.matches(':hover');
-}
-function prefixId$9(id) {
-  return `bio-properties-panel-${id}`;
-}
 
 /**
  * Accesses the global DescriptionContext and returns a description for a given id and element.
@@ -1982,6 +1948,7 @@ function FeelTextfieldComponent(props) {
     label,
     hostLanguage,
     onInput,
+    onBlur,
     onError,
     placeholder,
     feel,
@@ -2047,6 +2014,12 @@ function FeelTextfieldComponent(props) {
       setFocus(-1);
     }
   };
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
     if (syntaxError) {
@@ -2168,6 +2141,7 @@ function FeelTextfieldComponent(props) {
         ...props,
         popupOpen: popuOpen,
         onInput: handleLocalInput,
+        onBlur: handleOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -3996,6 +3970,12 @@ function TextArea(props) {
     autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
@@ -4027,7 +4007,7 @@ function TextArea(props) {
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       rows: rows,
       value: localValue,
@@ -4146,6 +4126,12 @@ function Textfield(props) {
   const handleInputCallback = useMemo(() => {
     return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   const handleInput = e => {
     handleInputCallback(e.target);
     setLocalValue(e.target.value);
@@ -4178,7 +4164,7 @@ function Textfield(props) {
       class: "bio-properties-panel-input",
       onInput: handleInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       value: localValue
     })]