@bpmn-io/form-js-editor 1.15.4 → 1.15.5

package/dist/index.cjs

@@ -3128,7 +3128,7 @@ function hasModifier(event) {
  * @param {KeyboardEvent} event
  * @return {boolean}
  */
-function isCmd(event) {
+function isCmd$1(event) {
   // ensure we don't react to AltGr
   // (mapped to CTRL + ALT)
   if (event.altKey) {
@@ -3160,28 +3160,28 @@ function isShift(event) {
  * @param {KeyboardEvent} event
  */
 function isCopy(event) {
-  return isCmd(event) && isKey(KEYS_COPY, event);
+  return isCmd$1(event) && isKey(KEYS_COPY, event);
 }
 
 /**
  * @param {KeyboardEvent} event
  */
 function isPaste(event) {
-  return isCmd(event) && isKey(KEYS_PASTE, event);
+  return isCmd$1(event) && isKey(KEYS_PASTE, event);
 }
 
 /**
  * @param {KeyboardEvent} event
  */
 function isUndo(event) {
-  return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
+  return isCmd$1(event) && !isShift(event) && isKey(KEYS_UNDO, event);
 }
 
 /**
  * @param {KeyboardEvent} event
  */
 function isRedo(event) {
-  return isCmd(event) && (isKey(KEYS_REDO, event) || isKey(KEYS_UNDO, event) && isShift(event));
+  return isCmd$1(event) && (isKey(KEYS_REDO, event) || isKey(KEYS_UNDO, event) && isShift(event));
 }
 
 /**
@@ -3350,7 +3350,7 @@ Keyboard.prototype.removeListener = function (listener, type) {
   this._eventBus.off(type || KEYDOWN_EVENT, listener);
 };
 Keyboard.prototype.hasModifier = hasModifier;
-Keyboard.prototype.isCmd = isCmd;
+Keyboard.prototype.isCmd = isCmd$1;
 Keyboard.prototype.isShift = isShift;
 Keyboard.prototype.isKey = isKey;
 
@@ -3442,7 +3442,7 @@ KeyboardBindings.prototype.registerBindings = function (keyboard, editorActions)
 
     // quirk: it has to be triggered by `=` as well to work on international keyboard layout
     // cf: https://github.com/bpmn-io/bpmn-js/issues/1362#issuecomment-722989754
-    if (isKey(['+', 'Add', '='], event) && isCmd(event)) {
+    if (isKey(['+', 'Add', '='], event) && isCmd$1(event)) {
       editorActions.trigger('stepZoom', {
         value: 1
       });
@@ -3454,7 +3454,7 @@ KeyboardBindings.prototype.registerBindings = function (keyboard, editorActions)
   // CTRL + -
   addListener('stepZoom', function (context) {
     var event = context.keyEvent;
-    if (isKey(['-', 'Subtract'], event) && isCmd(event)) {
+    if (isKey(['-', 'Subtract'], event) && isCmd$1(event)) {
       editorActions.trigger('stepZoom', {
         value: -1
       });
@@ -3466,7 +3466,7 @@ KeyboardBindings.prototype.registerBindings = function (keyboard, editorActions)
   // CTRL + 0
   addListener('zoom', function (context) {
     var event = context.keyEvent;
-    if (isKey('0', event) && isCmd(event)) {
+    if (isKey('0', event) && isCmd$1(event)) {
       editorActions.trigger('zoom', {
         value: 1
       });
@@ -5473,6 +5473,21 @@ OpenPopupIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16"
 };
+
+/**
+ * @typedef { {
+ *  getElementLabel: (element: object) => string,
+ *  getTypeLabel: (element: object) => string,
+ *  getElementIcon: (element: object) => import('preact').Component,
+ *  getDocumentationRef: (element: object) => string
+ * } } HeaderProvider
+ */
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element,
+ * @param {HeaderProvider} props.headerProvider
+ */
 function Header(props) {
   const {
     element,
@@ -5500,11 +5515,9 @@ function Header(props) {
     }), jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-header-labels",
       children: [jsxRuntime.jsx("div", {
-        title: type,
         class: "bio-properties-panel-header-type",
         children: type
       }), label ? jsxRuntime.jsx("div", {
-        title: label,
         class: "bio-properties-panel-header-label",
         children: label
       }) : null]
@@ -5592,6 +5605,27 @@ function useTooltipContext(id, element) {
   } = hooks.useContext(TooltipContext);
   return getTooltipForId(id, element);
 }
+
+/**
+ * @typedef {Object} TooltipProps
+ * @property {Object} [parent] - Parent element ref for portal rendering
+ * @property {String} [direction='right'] - Tooltip direction ( 'right', 'top')
+ * @property {String} [position] - Custom CSS position override
+ * @property {Number} [showDelay=250] - Delay in ms before showing tooltip on hover
+ * @property {Number} [hideDelay=250] - Delay in ms before hiding tooltip when mouse leaves, to avoid multiple tooltips from being opened, this should be the same as showDelay
+ * @property {*} [children] - Child elements to render inside the tooltip wrapper
+ */
+
+/**
+ * Tooltip wrapper that provides context-based tooltip content lookup.
+ * All props are forwarded to the underlying Tooltip component.
+ *
+ * @param {TooltipProps & {
+ *   forId: String,
+ *   value?: String|Object,
+ *   element?: Object
+ * }} props - Shared tooltip props plus wrapper-specific ones
+ */
 function TooltipWrapper(props) {
   const {
     forId,
@@ -5608,35 +5642,93 @@ function TooltipWrapper(props) {
     forId: `bio-properties-panel-${forId}`
   });
 }
+
+/**
+ * @param {TooltipProps & {
+ *   forId: String,
+ *   value: String|Object
+ * }} props
+ */
 function Tooltip(props) {
   const {
     forId,
     value,
     parent,
     direction = 'right',
-    position
+    position,
+    showDelay = 250,
+    hideDelay = 250
   } = props;
   const [visible, setVisible] = hooks.useState(false);
-
-  // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
-  const SHOW_DELAY = 200;
-  let timeout = null;
+  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);
   const tooltipRef = hooks.useRef(null);
   const show = (_, delay) => {
+    clearTimeout(showTimeoutRef.current);
+    clearTimeout(hideTimeoutRef.current);
     if (visible) return;
     if (delay) {
-      timeout = setTimeout(() => {
+      showTimeoutRef.current = setTimeout(() => {
         setVisible(true);
-      }, SHOW_DELAY);
+      }, showDelay);
     } else {
       setVisible(true);
     }
   };
-  const hide = () => {
-    clearTimeout(timeout);
-    setVisible(false);
+  const handleWrapperMouseEnter = e => {
+    show(e, true);
   };
+  const hide = (delay = false) => {
+    clearTimeout(showTimeoutRef.current);
+    clearTimeout(hideTimeoutRef.current);
+    if (delay) {
+      hideTimeoutRef.current = setTimeout(() => {
+        setVisible(false);
+      }, hideDelay);
+    } else {
+      setVisible(false);
+    }
+  };
+
+  // Cleanup timeouts on unmount
+  hooks.useEffect(() => {
+    return () => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+
+  // Handle click outside to close tooltip for non-focusable elements
+  hooks.useEffect(() => {
+    if (!visible) return;
+    const handleClickOutside = e => {
+      // If clicking outside both the wrapper and tooltip, hide it
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target) && tooltipRef.current && !tooltipRef.current.contains(e.target)) {
+        hide(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      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
   }) => {
@@ -5644,39 +5736,52 @@ function Tooltip(props) {
     if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) {
       return;
     }
-    hide();
+    const selection = window.getSelection();
+    if (selection && selection.toString().length > 0) {
+      // Check if selection is within tooltip content
+      const selectionRange = selection.getRangeAt(0);
+      if (tooltipRef.current?.contains(selectionRange.commonAncestorContainer) || tooltipRef.current?.contains(selection.anchorNode) || tooltipRef.current?.contains(selection.focusNode)) {
+        return; // Keep tooltip open during text selection
+      }
+    }
+    hide(true);
+  };
+  const handleTooltipMouseEnter = () => {
+    clearTimeout(hideTimeoutRef.current);
   };
   const handleFocusOut = e => {
     const {
-      target
+      relatedTarget
     } = 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();
+    // Don't hide if focus moved to the tooltip or another element within the wrapper
+    if (tooltipRef.current?.contains(relatedTarget) || wrapperRef.current?.contains(relatedTarget)) {
       return;
     }
-    hide();
+    hide(false);
   };
   const hideTooltipViaEscape = e => {
-    e.code === 'Escape' && hide();
+    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,
       onMouseLeave: handleMouseLeave,
       children: [jsxRuntime.jsx("div", {
         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
       })]
     });
   };
@@ -5684,7 +5789,7 @@ function Tooltip(props) {
     class: "bio-properties-panel-tooltip-wrapper",
     tabIndex: "0",
     ref: wrapperRef,
-    onMouseEnter: e => show(e, true),
+    onMouseEnter: handleWrapperMouseEnter,
     onMouseLeave: handleMouseLeave,
     onFocus: show,
     onBlur: handleFocusOut,
@@ -5695,11 +5800,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
+  };
 }
 
 /**
@@ -5937,12 +6078,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) {
@@ -5962,6 +6108,10 @@ function useElementVisible(element) {
   }, [element, visible]);
   return visible;
 }
+
+/**
+ * @param {import('../PropertiesPanel').GroupDefinition} props
+ */
 function Group(props) {
   const {
     element,
@@ -6016,8 +6166,6 @@ function Group(props) {
       class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
-        title: props.tooltip ? null : label,
-        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -6221,9 +6369,11 @@ function PropertiesPanel$1(props) {
     return minDash.get(layout, key, defaultValue);
   };
   const setLayoutForKey = (key, config) => {
-    const newLayout = minDash.assign({}, layout);
-    minDash.set(newLayout, key, config);
-    setLayout(newLayout);
+    setLayout(prevLayout => {
+      const newLayout = minDash.assign({}, prevLayout);
+      minDash.set(newLayout, key, config);
+      return newLayout;
+    });
   };
   const layoutContext = {
     layout,
@@ -6422,7 +6572,6 @@ function CollapsibleEntry(props) {
       class: "bio-properties-panel-collapsible-entry-header",
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
-        title: label || placeholderLabel,
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
@@ -6458,6 +6607,10 @@ function CollapsibleEntry(props) {
     })]
   });
 }
+
+/**
+ * @param {import('../PropertiesPanel').ListItemDefinition} props
+ */
 function ListItem(props) {
   const {
     autoFocusEntry,
@@ -6559,8 +6712,6 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$6,
       children: [jsxRuntime.jsx("div", {
-        title: props.tooltip ? null : label,
-        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -6629,6 +6780,13 @@ function getNewItemIds(newItems, oldItems) {
   const oldIds = oldItems.map(item => item.id);
   return newIds.filter(itemId => !oldIds.includes(itemId));
 }
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.forId - id of the entry the description is used for
+ * @param {String} props.value
+ */
 function Description$1(props) {
   const {
     element,
@@ -6758,6 +6916,16 @@ function isEdited$8(node) {
 function prefixId$8(id) {
   return `bio-properties-panel-${id}`;
 }
+
+/**
+ * Button to open popups.
+ *
+ * @param {Object} props
+ * @param {Function} props.onClick - Callback to trigger when the button is clicked.
+ * @param {string} [props.title] - Tooltip text for the button.
+ * @param {boolean} [props.disabled] - Whether the button is disabled.
+ * @param {string} [props.className] - Additional class names for the button.
+ */
 function OpenPopupButton({
   onClick,
   title = 'Open pop-up editor'
@@ -6901,6 +7069,7 @@ const FeelEditor = React.forwardRef((props, ref) => {
     enableGutters,
     value,
     onInput,
+    onKeyDown: onKeyDownProp = noop$4,
     onFeelToggle = noop$4,
     onLint = noop$4,
     onOpenPopup = noop$4,
@@ -6933,6 +7102,8 @@ const FeelEditor = React.forwardRef((props, ref) => {
      * - AND the cursor is at the beginning of the input
      */
     const onKeyDown = e => {
+      // Call parent onKeyDown handler first
+      onKeyDownProp(e);
       if (e.key !== 'Backspace' || !editor) {
         return;
       }
@@ -7049,6 +7220,22 @@ function FeelIcon(props) {
     children: jsxRuntime.jsx(FeelIcon$1, {})
   });
 }
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {boolean}
+ */
+function isCmd(event) {
+  // ensure we don't react to AltGr
+  // (mapped to CTRL + ALT)
+  if (event.altKey) {
+    return false;
+  }
+  return event.ctrlKey || event.metaKey;
+}
+function isCmdWithChar(event) {
+  return isCmd(event) && event.key.length === 1 && /^[a-zA-Z]$/.test(event.key);
+}
 function ToggleSwitch(props) {
   const {
     id,
@@ -7157,7 +7344,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
@@ -7330,7 +7517,7 @@ function prefixId$6(id) {
 const noop$2 = () => {};
 
 /**
- * @typedef {'required'|'optional'|'static'} FeelType
+ * @typedef {'required'|'optional'|'optional-default-enabled'|'static'} FeelType
  */
 
 /**
@@ -7360,7 +7547,7 @@ function FeelTextfield(props) {
     element,
     label,
     hostLanguage,
-    onInput,
+    onInput: commitValue,
     onBlur,
     onError,
     placeholder,
@@ -7373,11 +7560,17 @@ 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 feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const onInput = hooks.useCallback(newValue => {
+    // we don't commit empty FEEL expressions,
+    // but instead serialize them as <undefined>
+    const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
+  const feelActive = isFeelActive(feel, localValue);
+  const feelOnlyValue = getFeelValue(localValue);
   const feelLanguageContext = hooks.useContext(FeelLanguageContext);
   const [focus, _setFocus] = hooks.useState(undefined);
   const {
@@ -7395,13 +7588,7 @@ function FeelTextfield(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
-  const handleInput = newValue => {
-    // we don't commit empty FEEL expressions,
-    // but instead serialize them as <undefined>
-    const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
-    handleInputCallback(newModelValue);
-  };
+  const handleInput = useDebounce(onInput, debounce);
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
       return;
@@ -7414,7 +7601,7 @@ function FeelTextfield(props) {
       handleInput(feelOnlyValue);
     }
   });
-  const handleLocalInput = newValue => {
+  const handleLocalInput = (newValue, useDebounce = true) => {
     if (feelActive) {
       newValue = '=' + newValue;
     }
@@ -7422,23 +7609,33 @@ function FeelTextfield(props) {
       return;
     }
     setLocalValue(newValue);
-    handleInput(newValue);
+    if (useDebounce) {
+      handleInput(newValue);
+    } else {
+      onInput(newValue);
+    }
     if (!feelActive && minDash.isString(newValue) && newValue.startsWith('=')) {
       // focus is behind `=` sign that will be removed
       setFocus(-1);
     }
   };
   const handleOnBlur = e => {
+    handleInput.cancel?.();
     if (e.target.type === 'checkbox') {
       onInput(e.target.checked);
     } else {
       const trimmedValue = e.target.value.trim();
-      onInput(trimmedValue);
+      handleLocalInput(trimmedValue, false);
     }
     if (onBlur) {
       onBlur(e);
     }
   };
+  const handleOnKeyDown = e => {
+    if (isCmdWithChar(e)) {
+      handleInput.flush?.();
+    }
+  };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
     if (syntaxError) {
@@ -7505,12 +7702,26 @@ function FeelTextfield(props) {
       if (feelActive || isPopupOpen) {
         return;
       }
-      const data = event.clipboardData.getData('application/FEEL');
-      if (data) {
+      const feelData = event.clipboardData.getData('application/FEEL');
+      if (feelData) {
         setTimeout(() => {
           handleFeelToggle();
           setFocus();
         });
+        return;
+      }
+      const input = event.target;
+      const isFieldEmpty = !input.value;
+      const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+      if (isFieldEmpty || isAllSelected) {
+        const textData = event.clipboardData.getData('text');
+        const trimmedValue = textData.trim();
+        setLocalValue(trimmedValue);
+        handleInput(trimmedValue);
+        if (!feelActive && minDash.isString(trimmedValue) && trimmedValue.startsWith('=')) {
+          setFocus(trimmedValue.length - 1);
+        }
+        event.preventDefault();
       }
     };
     containerRef.current.addEventListener('copy', copyHandler);
@@ -7546,11 +7757,12 @@ 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,
         onInput: handleLocalInput,
+        onKeyDown: handleOnKeyDown,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -7573,6 +7785,7 @@ function FeelTextfield(props) {
         ...props,
         popupOpen: isPopupOpen,
         onInput: handleLocalInput,
+        onKeyDown: handleOnKeyDown,
         onBlur: handleOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
@@ -7591,6 +7804,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
+    onKeyDown,
     value,
     onFocus,
     onBlur,
@@ -7626,6 +7840,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     class: "bio-properties-panel-input",
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
+    onKeyDown: onKeyDown,
     onBlur: onBlur,
     placeholder: placeholder,
     value: value || ''
@@ -7999,6 +8214,87 @@ function isEdited$5(node) {
 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
+ */
+
+/**
+ * Provides basic select input.
+ *
+ * @param {object} props
+ * @param {string} props.id
+ * @param {string[]} props.path
+ * @param {string} props.label
+ * @param {Function} props.onChange
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Array<Option>} [props.options]
+ * @param {string} props.value
+ * @param {boolean} [props.disabled]
+ */
 function Select(props) {
   const {
     id,
@@ -8164,12 +8460,13 @@ function TextArea(props) {
     id,
     label,
     debounce,
-    onInput,
+    onInput: commitValue,
     value = '',
     disabled,
     monospace,
     onFocus,
     onBlur,
+    onPaste,
     autoResize = true,
     placeholder,
     rows = autoResize ? 1 : 2,
@@ -8177,16 +8474,16 @@ function TextArea(props) {
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
+  const onInput = hooks.useCallback(newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
   const visible = useElementVisible(ref.current);
 
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
-  const handleInput = newValue => {
-    const newModelValue = newValue === '' ? undefined : newValue;
-    handleInputCallback(newModelValue);
-  };
+  const handleInput = useDebounce(onInput, debounce);
   const handleLocalInput = e => {
     autoResize && resizeToContents(e.target);
     if (e.target.value === localValue) {
@@ -8199,11 +8496,40 @@ function TextArea(props) {
     const trimmedValue = e.target.value.trim();
 
     // trim and commit on blur
+    handleInput.cancel?.();
     onInput(trimmedValue);
+    setLocalValue(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
   };
+  const handleOnPaste = e => {
+    const input = e.target;
+    const isFieldEmpty = !input.value;
+    const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+
+    // Trim and handle paste if field is empty or all content is selected
+    if (isFieldEmpty || isAllSelected) {
+      const trimmedValue = e.clipboardData.getData('text').trim();
+      setLocalValue(trimmedValue);
+      handleInput(trimmedValue);
+      if (onPaste) {
+        onPaste(e);
+      }
+      e.preventDefault();
+      return;
+    }
+
+    // Allow default paste behavior for normal text editing
+    if (onPaste) {
+      onPaste(e);
+    }
+  };
+  const handleOnKeyDown = e => {
+    if (isCmdWithChar(e)) {
+      handleInput.flush?.();
+    }
+  };
   hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
@@ -8235,7 +8561,9 @@ function TextArea(props) {
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleLocalInput,
       onFocus: onFocus,
+      onKeyDown: handleOnKeyDown,
       onBlur: handleOnBlur,
+      onPaste: handleOnPaste,
       placeholder: placeholder,
       rows: rows,
       value: localValue,
@@ -8256,6 +8584,7 @@ function TextArea(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {Function} props.onPaste
  * @param {number} props.rows
  * @param {boolean} props.monospace
  * @param {Function} [props.validate]
@@ -8276,6 +8605,7 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     autoResize,
     tooltip
@@ -8311,6 +8641,7 @@ function TextAreaEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      onPaste: onPaste,
       rows: rows,
       debounce: debounce,
       monospace: monospace,
@@ -8344,32 +8675,57 @@ function Textfield(props) {
     disabled = false,
     id,
     label,
-    onInput,
+    onInput: commitValue,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     value = '',
     tooltip
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value || '');
   const ref = useShowEntryEvent(id);
+  const onInput = hooks.useCallback(newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
 
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
+  const handleInput = useDebounce(onInput, debounce);
   const handleOnBlur = e => {
     const trimmedValue = e.target.value.trim();
 
     // trim and commit on blur
+    handleInput.cancel?.();
     onInput(trimmedValue);
+    setLocalValue(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
   };
-  const handleInput = newValue => {
-    const newModelValue = newValue === '' ? undefined : newValue;
-    handleInputCallback(newModelValue);
+  const handleOnPaste = e => {
+    const input = e.target;
+    const isFieldEmpty = !input.value;
+    const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+
+    // Trim and handle paste if field is empty or all content is selected (overwrite)
+    if (isFieldEmpty || isAllSelected) {
+      const trimmedValue = e.clipboardData.getData('text').trim();
+      setLocalValue(trimmedValue);
+      handleInput(trimmedValue);
+      if (onPaste) {
+        onPaste(e);
+      }
+      e.preventDefault();
+      return;
+    }
+
+    // Allow default paste behavior for normal text editing
+    if (onPaste) {
+      onPaste(e);
+    }
   };
   const handleLocalInput = e => {
     if (e.target.value === localValue) {
@@ -8384,6 +8740,11 @@ function Textfield(props) {
     }
     setLocalValue(value);
   }, [value]);
+  const handleOnKeyDown = e => {
+    if (isCmdWithChar(e)) {
+      handleInput.flush?.();
+    }
+  };
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-textfield",
     children: [jsxRuntime.jsx("label", {
@@ -8406,7 +8767,9 @@ function Textfield(props) {
       class: "bio-properties-panel-input",
       onInput: handleLocalInput,
       onFocus: onFocus,
+      onKeyDown: handleOnKeyDown,
       onBlur: handleOnBlur,
+      onPaste: handleOnPaste,
       placeholder: placeholder,
       value: localValue
     })]
@@ -8441,6 +8804,7 @@ function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     tooltip
   } = props;
@@ -8476,6 +8840,7 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      onPaste: onPaste,
       placeholder: placeholder,
       value: value,
       tooltip: tooltip,
@@ -8745,6 +9110,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,
@@ -8786,6 +9152,25 @@ function cancel(event) {
   event.preventDefault();
   event.stopPropagation();
 }
+
+/**
+ * @typedef {Object} FeelPopupProps
+ * @property {string} entryId
+ * @property {Function} onInput
+ * @property {Function} onClose
+ * @property {string} title
+ * @property {'feel'|'feelers'} type
+ * @property {string} value
+ * @property {Array} [links]
+ * @property {Array|Object} [variables]
+ * @property {Object} [position]
+ * @property {string} [hostLanguage]
+ * @property {boolean} [singleLine]
+ * @property {HTMLElement} [sourceElement]
+ * @property {HTMLElement|string} [tooltipContainer]
+ * @property {Object} [eventBus]
+ */
+
 const FEEL_POPUP_WIDTH = 700;
 const FEEL_POPUP_HEIGHT = 250;