@bpmn-io/properties-panel 3.3.0 → 3.3.2

package/dist/index.js

@@ -273,18 +273,25 @@ function Tooltip(props) {
     parent
   } = props;
   const [visible, setShow] = hooks.useState(false);
+  const [focusedViaKeyboard, setFocusedViaKeyboard] = hooks.useState(false);
   let timeout = null;
   const wrapperRef = hooks.useRef(null);
   const tooltipRef = hooks.useRef(null);
   const showTooltip = async event => {
-    const show = () => !visible && setShow(true);
-    if (event instanceof MouseEvent) {
-      timeout = setTimeout(show, 200);
-    } else {
-      show();
+    const show = () => setShow(true);
+    if (!visible && !timeout) {
+      if (event instanceof MouseEvent) {
+        timeout = setTimeout(show, 200);
+      } else {
+        show();
+        setFocusedViaKeyboard(true);
+      }
     }
   };
-  const hideTooltip = () => setShow(false);
+  const hideTooltip = () => {
+    setShow(false);
+    setFocusedViaKeyboard(false);
+  };
   const hideTooltipViaEscape = e => {
     e.code === 'Escape' && hideTooltip();
   };
@@ -308,7 +315,7 @@ function Tooltip(props) {
       if (visible && !isTooltipHovered({
         x: e.x,
         y: e.y
-      }) && !isFocused) {
+      }) && !(isFocused && focusedViaKeyboard)) {
         hideTooltip();
       }
     };
@@ -316,8 +323,8 @@ function Tooltip(props) {
       const {
         relatedTarget
       } = e;
-      const isTooltipChild = el => el && !!el.closest('.bio-properties-panel-tooltip');
-      if (visible && !isHovered(wrapperRef.current) && !isTooltipChild(relatedTarget)) {
+      const isTooltipChild = el => !!el.closest('.bio-properties-panel-tooltip');
+      if (visible && !isHovered(wrapperRef.current) && relatedTarget && !isTooltipChild(relatedTarget)) {
         hideTooltip();
       }
     };
@@ -329,7 +336,7 @@ function Tooltip(props) {
       document.removeEventListener('mousemove', hideHoveredTooltip);
       document.removeEventListener('focusout', hideFocusedTooltip);
     };
-  }, [wrapperRef.current, visible]);
+  }, [wrapperRef.current, visible, focusedViaKeyboard]);
   const renderTooltip = () => {
     return jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-tooltip",
@@ -352,12 +359,12 @@ function Tooltip(props) {
     tabIndex: "0",
     ref: wrapperRef,
     onMouseEnter: showTooltip,
-    onMouseLeave: () => clearTimeout(timeout),
+    onMouseLeave: () => {
+      clearTimeout(timeout);
+      timeout = null;
+    },
     onFocus: showTooltip,
     onKeyDown: hideTooltipViaEscape,
-    onMouseDown: e => {
-      e.preventDefault();
-    },
     children: [props.children, visible ? parent ? compat.createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
   });
 }
@@ -703,7 +710,8 @@ function Group(props) {
       class: classnames__default["default"]('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
-        title: label,
+        title: props.tooltip ? null : label,
+        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -3028,7 +3036,8 @@ function ListGroup(props) {
       class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$1,
       children: [jsxRuntime.jsx("div", {
-        title: label,
+        title: props.tooltip ? null : label,
+        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,