@bpmn-io/properties-panel 3.39.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
+  };
 }
 
 /**
@@ -2363,7 +2418,7 @@ function prefixId$6(id) {
 const noop$2 = () => {};
 
 /**
- * @typedef {'required'|'optional'|'static'} FeelType
+ * @typedef {'required'|'optional'|'optional-default-enabled'|'static'} FeelType
  */
 
 /**
@@ -2406,7 +2461,7 @@ function FeelTextfield(props) {
     OptionalComponent = OptionalFeelInput,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = useState(value);
+  const [localValue, setLocalValue] = useState(getInitialFeelLocalValue(feel, value));
   const editorRef = useShowEntryEvent(id);
   const containerRef = useRef();
   const onInput = useCallback(newValue => {
@@ -2415,8 +2470,8 @@ function FeelTextfield(props) {
     const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
     commitValue(newModelValue);
   }, [commitValue]);
-  const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const feelActive = isFeelActive(feel, localValue);
+  const feelOnlyValue = getFeelValue(localValue);
   const feelLanguageContext = useContext(FeelLanguageContext);
   const [focus, _setFocus] = useState(undefined);
   const {
@@ -2603,7 +2658,7 @@ function FeelTextfield(props) {
       ref: containerRef,
       children: [jsx(FeelIndicator, {
         active: feelActive,
-        disabled: feel !== 'optional' || disabled,
+        disabled: !isFeelOptional(feel) || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(FeelEditor, {
         name: id,
@@ -3116,6 +3171,68 @@ function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
 }
 
+/**
+ * Determine if FEEL is optional for the configured {@link FeelType}.
+ *
+ * @param {FeelType} feelType
+ *
+ * @return {boolean}
+ */
+function isFeelOptional(feelType) {
+  return feelType === 'optional' || feelType === 'optional-default-enabled';
+}
+
+/**
+ * Determine if FEEL editing is currently active.
+ *
+ * @param {FeelType} feelType
+ * @param {string} localValue
+ *
+ * @return {boolean}
+ */
+function isFeelActive(feelType, localValue) {
+  if (feelType === 'required') {
+    return true;
+  }
+  if (isString(localValue)) {
+    if (localValue.startsWith('=')) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * @template T
+ * @param {T} value
+ *
+ * @return {string|T}
+ */
+function getFeelValue(value) {
+  if (isString(value) && value.startsWith('=')) {
+    return value.substring(1);
+  }
+  return value;
+}
+
+/**
+ * Initialize local FEEL value.
+ *
+ * `optional-default-enabled` starts in FEEL mode if no value or empty string is provided.
+ *
+ * @template T
+ * @param {FeelType} feelType
+ * @param {T} value
+ *
+ * @return {string|T}
+ */
+function getInitialFeelLocalValue(feelType, value) {
+  if (feelType === 'optional-default-enabled' && (value === undefined || value === '')) {
+    return '=';
+  }
+  return value;
+}
+
 const noop$1 = () => {};
 
 /**