@bpmn-io/properties-panel 3.3.1 → 3.3.2

package/dist/index.esm.js

@@ -245,18 +245,25 @@ function Tooltip(props) {
     parent
   } = props;
   const [visible, setShow] = useState(false);
+  const [focusedViaKeyboard, setFocusedViaKeyboard] = useState(false);
   let timeout = null;
   const wrapperRef = useRef(null);
   const tooltipRef = 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();
   };
@@ -280,7 +287,7 @@ function Tooltip(props) {
       if (visible && !isTooltipHovered({
         x: e.x,
         y: e.y
-      }) && !isFocused) {
+      }) && !(isFocused && focusedViaKeyboard)) {
         hideTooltip();
       }
     };
@@ -288,8 +295,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();
       }
     };
@@ -301,7 +308,7 @@ function Tooltip(props) {
       document.removeEventListener('mousemove', hideHoveredTooltip);
       document.removeEventListener('focusout', hideFocusedTooltip);
     };
-  }, [wrapperRef.current, visible]);
+  }, [wrapperRef.current, visible, focusedViaKeyboard]);
   const renderTooltip = () => {
     return jsxs("div", {
       class: "bio-properties-panel-tooltip",
@@ -324,12 +331,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 ? createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
   });
 }
@@ -675,7 +682,8 @@ function Group(props) {
       class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsx("div", {
-        title: label,
+        title: props.tooltip ? null : label,
+        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -3000,7 +3008,8 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$1,
       children: [jsx("div", {
-        title: label,
+        title: props.tooltip ? null : label,
+        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsx(TooltipWrapper, {
           value: props.tooltip,