@bpmn-io/form-js-editor 1.19.0 → 1.20.1

package/dist/assets/form-js-editor.css

@@ -1979,7 +1979,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/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.cjs

@@ -5720,6 +5720,8 @@ function Tooltip(props) {
     hideDelay = 250
   } = props;
   const [visible, setVisible] = hooks.useState(false);
+  const [tooltipPosition, setTooltipPosition] = hooks.useState(null);
+  const [arrowOffset, setArrowOffset] = hooks.useState(null);
   const showTimeoutRef = hooks.useRef(null);
   const hideTimeoutRef = hooks.useRef(null);
   const wrapperRef = hooks.useRef(null);
@@ -5773,6 +5775,20 @@ function Tooltip(props) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [visible, hide]);
+  hooks.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
   }) => {
@@ -5808,12 +5824,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 jsxRuntime.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,
@@ -5822,7 +5840,8 @@ function Tooltip(props) {
         class: "bio-properties-panel-tooltip-content",
         children: value
       }), jsxRuntime.jsx("div", {
-        class: "bio-properties-panel-tooltip-arrow"
+        class: "bio-properties-panel-tooltip-arrow",
+        style: arrowStyle
       })]
     });
   };
@@ -5841,11 +5860,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
+  };
 }
 
 /**
@@ -6083,12 +6138,17 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
  * The `callback` reference is static and can be safely used in external
  * libraries or as a prop that does not cause rerendering of children.
  *
+ * The ref update is deferred to useLayoutEffect to prevent stale-closure
+ * bugs when Chrome fires blur on elements removed during re-render.
+ *
  * @param {Function} callback function with changing reference
  * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
   const callbackRef = hooks.useRef(callback);
-  callbackRef.current = callback;
+  hooks.useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
   return hooks.useCallback((...args) => callbackRef.current(...args), []);
 }
 function useElementVisible(element) {
@@ -7344,7 +7404,7 @@ function ToggleSwitchEntry(props) {
       inline: inline,
       tooltip: tooltip,
       element: element
-    }), jsxRuntime.jsx(Description$1, {
+    }, element), jsxRuntime.jsx(Description$1, {
       forId: id,
       element: element,
       value: description
@@ -7517,7 +7577,7 @@ function prefixId$6(id) {
 const noop$2 = () => {};
 
 /**
- * @typedef {'required'|'optional'|'static'} FeelType
+ * @typedef {'required'|'optional'|'optional-default-enabled'|'static'} FeelType
  */
 
 /**
@@ -7560,7 +7620,7 @@ function FeelTextfield(props) {
     OptionalComponent = OptionalFeelInput,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = hooks.useState(value);
+  const [localValue, setLocalValue] = hooks.useState(getInitialFeelLocalValue(feel, value));
   const editorRef = useShowEntryEvent(id);
   const containerRef = hooks.useRef();
   const onInput = hooks.useCallback(newValue => {
@@ -7569,8 +7629,8 @@ function FeelTextfield(props) {
     const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
     commitValue(newModelValue);
   }, [commitValue]);
-  const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const feelActive = isFeelActive(feel, localValue);
+  const feelOnlyValue = getFeelValue(localValue);
   const feelLanguageContext = hooks.useContext(FeelLanguageContext);
   const [focus, _setFocus] = hooks.useState(undefined);
   const {
@@ -7633,7 +7693,7 @@ function FeelTextfield(props) {
   };
   const handleOnKeyDown = e => {
     if (isCmdWithChar(e)) {
-      handleInput.flush();
+      handleInput.flush?.();
     }
   };
   const handleLint = useStaticCallback((lint = []) => {
@@ -7757,7 +7817,7 @@ function FeelTextfield(props) {
       ref: containerRef,
       children: [jsxRuntime.jsx(FeelIndicator, {
         active: feelActive,
-        disabled: feel !== 'optional' || disabled,
+        disabled: !isFeelOptional(feel) || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsxRuntime.jsx(FeelEditor, {
         name: id,
@@ -8215,6 +8275,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 (minDash.isString(localValue)) {
+    if (localValue.startsWith('=')) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * @template T
+ * @param {T} value
+ *
+ * @return {string|T}
+ */
+function getFeelValue(value) {
+  if (minDash.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;
+}
+
 /**
  * @typedef { { value: string, label: string, disabled: boolean, children: { value: string, label: string, disabled: boolean } } } Option
  */
@@ -8465,7 +8587,7 @@ function TextArea(props) {
   };
   const handleOnKeyDown = e => {
     if (isCmdWithChar(e)) {
-      handleInput.flush();
+      handleInput.flush?.();
     }
   };
   hooks.useLayoutEffect(() => {
@@ -8680,7 +8802,7 @@ function Textfield(props) {
   }, [value]);
   const handleOnKeyDown = e => {
     if (isCmdWithChar(e)) {
-      handleInput.flush();
+      handleInput.flush?.();
     }
   };
   return jsxRuntime.jsxs("div", {
@@ -9048,6 +9170,7 @@ function Title(props) {
       class: "bio-properties-panel-popup__title",
       children: title
     }), children, showCloseButton && jsxRuntime.jsx("button", {
+      type: "button",
       title: closeButtonTooltip,
       class: "bio-properties-panel-popup__close",
       onClick: onClose,
@@ -13820,7 +13943,7 @@ function CustomPropertiesGroup(field, editField) {
       event.stopPropagation();
       return editField(field, ['properties'], removeKey(properties, key));
     };
-    const id = `property-${field.id}-${index}`;
+    const id = `property-${index}`;
     return {
       autoFocusEntry: id + '-key',
       entries: CustomValueEntry({