@bpmn-io/form-js-editor 1.18.0 → 1.20.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import Ids from 'ids';
+import { Ids } from 'ids';
 import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, DocumentPreview, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, FieldFactory, FormLayouter, PathRegistry, Importer, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, TEXT_VIEW_DEFAULT_TEXT, TIME_USE24H_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_INTERVAL_PATH, TIME_SERIALISING_FORMAT_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISING_FORMATS, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, isString, uniqueBy, isObject, get, isDefined, set as set$1, reduce, isNil, without, has } from 'min-dash';
@@ -13,7 +13,7 @@ import { classes, query, event, domify } from 'min-dom';
 import { arrayMoveMutable } from 'array-move';
 import { FeelersEditor } from 'feelers';
 import Editor from '@bpmn-io/feel-editor';
-import { lineNumbers, EditorView } from '@codemirror/view';
+import { EditorView, lineNumbers } from '@codemirror/view';
 import * as focusTrap from 'focus-trap';
 import Big from 'big.js';
 
@@ -2870,11 +2870,35 @@ EditorActions.prototype._registerDefaultActions = function (injector) {
       }
     });
   }
+  if (copyPaste && selection) {
+    this.register('duplicate', function () {
+      var selectedElements = selection.get();
+      if (selectedElements.length) {
+        return copyPaste.duplicate(selectedElements);
+      }
+    });
+  }
   if (copyPaste) {
     this.register('paste', function () {
       copyPaste.paste();
     });
   }
+  if (copyPaste && selection && rules) {
+    this.register('cut', function () {
+      var selectedElements = selection.get();
+      if (!selectedElements.length) {
+        return;
+      }
+      var allowed = rules.allowed('elements.delete', {
+        elements: selectedElements
+      });
+      if (allowed === false) {
+        return;
+      }
+      var cuttableElements = isArray(allowed) ? allowed : selectedElements;
+      return copyPaste.cut(cuttableElements.slice());
+    });
+  }
   if (zoomScroll) {
     this.register('stepZoom', function (opts) {
       zoomScroll.stepZoom(opts.value);
@@ -3093,6 +3117,8 @@ const EditorExpressionLanguageModule = {
 
 var KEYS_COPY = ['c', 'C'];
 var KEYS_PASTE = ['v', 'V'];
+var KEYS_DUPLICATE = ['d', 'D'];
+var KEYS_CUT = ['x', 'X'];
 var KEYS_REDO = ['y', 'Y'];
 var KEYS_UNDO = ['z', 'Z'];
 
@@ -3108,7 +3134,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) {
@@ -3140,28 +3166,42 @@ 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 isDuplicate(event) {
+  return isCmd$1(event) && isKey(KEYS_DUPLICATE, event);
+}
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function isCut(event) {
+  return isCmd$1(event) && isKey(KEYS_CUT, 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));
 }
 
 /**
@@ -3330,7 +3370,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;
 
@@ -3415,6 +3455,26 @@ KeyboardBindings.prototype.registerBindings = function (keyboard, editorActions)
     }
   });
 
+  // duplicate
+  // CTRL/CMD + D
+  addListener('duplicate', function (context) {
+    var event = context.keyEvent;
+    if (isDuplicate(event)) {
+      editorActions.trigger('duplicate');
+      return true;
+    }
+  });
+
+  // cut
+  // CTRL/CMD + X
+  addListener('cut', function (context) {
+    var event = context.keyEvent;
+    if (isCut(event)) {
+      editorActions.trigger('cut');
+      return true;
+    }
+  });
+
   // zoom in one step
   // CTRL/CMD + +
   addListener('stepZoom', function (context) {
@@ -3422,7 +3482,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
       });
@@ -3434,7 +3494,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
       });
@@ -3446,7 +3506,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
       });
@@ -5453,6 +5513,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,
@@ -5480,11 +5555,9 @@ function Header(props) {
     }), jsxs("div", {
       class: "bio-properties-panel-header-labels",
       children: [jsx("div", {
-        title: type,
         class: "bio-properties-panel-header-type",
         children: type
       }), label ? jsx("div", {
-        title: label,
         class: "bio-properties-panel-header-label",
         children: label
       }) : null]
@@ -5572,6 +5645,27 @@ function useTooltipContext(id, element) {
   } = 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,
@@ -5588,35 +5682,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] = 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] = useState(null);
+  const [arrowOffset, setArrowOffset] = useState(null);
+  const showTimeoutRef = useRef(null);
+  const hideTimeoutRef = useRef(null);
   const wrapperRef = useRef(null);
   const tooltipRef = 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
+  useEffect(() => {
+    return () => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+
+  // Handle click outside to close tooltip for non-focusable elements
+  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]);
+  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
   }) => {
@@ -5624,39 +5776,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 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: [jsx("div", {
         class: "bio-properties-panel-tooltip-content",
         children: value
       }), jsx("div", {
-        class: "bio-properties-panel-tooltip-arrow"
+        class: "bio-properties-panel-tooltip-arrow",
+        style: arrowStyle
       })]
     });
   };
@@ -5664,7 +5829,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,
@@ -5675,11 +5840,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
+  };
 }
 
 /**
@@ -5917,12 +6118,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 = useRef(callback);
-  callbackRef.current = callback;
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
   return useCallback((...args) => callbackRef.current(...args), []);
 }
 function useElementVisible(element) {
@@ -5942,6 +6148,10 @@ function useElementVisible(element) {
   }, [element, visible]);
   return visible;
 }
+
+/**
+ * @param {import('../PropertiesPanel').GroupDefinition} props
+ */
 function Group(props) {
   const {
     element,
@@ -5996,8 +6206,6 @@ function Group(props) {
       class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsx("div", {
-        title: props.tooltip ? null : label,
-        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -6201,9 +6409,11 @@ function PropertiesPanel$1(props) {
     return get(layout, key, defaultValue);
   };
   const setLayoutForKey = (key, config) => {
-    const newLayout = assign({}, layout);
-    set$1(newLayout, key, config);
-    setLayout(newLayout);
+    setLayout(prevLayout => {
+      const newLayout = assign({}, prevLayout);
+      set$1(newLayout, key, config);
+      return newLayout;
+    });
   };
   const layoutContext = {
     layout,
@@ -6402,7 +6612,6 @@ function CollapsibleEntry(props) {
       class: "bio-properties-panel-collapsible-entry-header",
       onClick: toggleOpen,
       children: [jsx("div", {
-        title: label || placeholderLabel,
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsx("button", {
@@ -6438,6 +6647,10 @@ function CollapsibleEntry(props) {
     })]
   });
 }
+
+/**
+ * @param {import('../PropertiesPanel').ListItemDefinition} props
+ */
 function ListItem(props) {
   const {
     autoFocusEntry,
@@ -6539,8 +6752,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: [jsx("div", {
-        title: props.tooltip ? null : label,
-        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -6609,6 +6820,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,
@@ -6738,6 +6956,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'
@@ -6881,6 +7109,7 @@ const FeelEditor = forwardRef((props, ref) => {
     enableGutters,
     value,
     onInput,
+    onKeyDown: onKeyDownProp = noop$4,
     onFeelToggle = noop$4,
     onLint = noop$4,
     onOpenPopup = noop$4,
@@ -6913,6 +7142,8 @@ const FeelEditor = 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;
       }
@@ -7029,6 +7260,22 @@ function FeelIcon(props) {
     children: 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,
@@ -7137,7 +7384,7 @@ function ToggleSwitchEntry(props) {
       inline: inline,
       tooltip: tooltip,
       element: element
-    }), jsx(Description$1, {
+    }, element), jsx(Description$1, {
       forId: id,
       element: element,
       value: description
@@ -7310,7 +7557,7 @@ function prefixId$6(id) {
 const noop$2 = () => {};
 
 /**
- * @typedef {'required'|'optional'|'static'} FeelType
+ * @typedef {'required'|'optional'|'optional-default-enabled'|'static'} FeelType
  */
 
 /**
@@ -7340,7 +7587,7 @@ function FeelTextfield(props) {
     element,
     label,
     hostLanguage,
-    onInput,
+    onInput: commitValue,
     onBlur,
     onError,
     placeholder,
@@ -7353,11 +7600,17 @@ 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 feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const onInput = 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 = useContext(FeelLanguageContext);
   const [focus, _setFocus] = useState(undefined);
   const {
@@ -7375,13 +7628,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;
@@ -7394,7 +7641,7 @@ function FeelTextfield(props) {
       handleInput(feelOnlyValue);
     }
   });
-  const handleLocalInput = newValue => {
+  const handleLocalInput = (newValue, useDebounce = true) => {
     if (feelActive) {
       newValue = '=' + newValue;
     }
@@ -7402,23 +7649,33 @@ function FeelTextfield(props) {
       return;
     }
     setLocalValue(newValue);
-    handleInput(newValue);
+    if (useDebounce) {
+      handleInput(newValue);
+    } else {
+      onInput(newValue);
+    }
     if (!feelActive && 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) {
@@ -7485,12 +7742,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 && isString(trimmedValue) && trimmedValue.startsWith('=')) {
+          setFocus(trimmedValue.length - 1);
+        }
+        event.preventDefault();
       }
     };
     containerRef.current.addEventListener('copy', copyHandler);
@@ -7526,11 +7797,12 @@ 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,
         onInput: handleLocalInput,
+        onKeyDown: handleOnKeyDown,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -7553,6 +7825,7 @@ function FeelTextfield(props) {
         ...props,
         popupOpen: isPopupOpen,
         onInput: handleLocalInput,
+        onKeyDown: handleOnKeyDown,
         onBlur: handleOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
@@ -7571,6 +7844,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
+    onKeyDown,
     value,
     onFocus,
     onBlur,
@@ -7606,6 +7880,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     class: "bio-properties-panel-input",
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
+    onKeyDown: onKeyDown,
     onBlur: onBlur,
     placeholder: placeholder,
     value: value || ''
@@ -7979,6 +8254,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 (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;
+}
+
+/**
+ * @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,
@@ -8144,12 +8500,13 @@ function TextArea(props) {
     id,
     label,
     debounce,
-    onInput,
+    onInput: commitValue,
     value = '',
     disabled,
     monospace,
     onFocus,
     onBlur,
+    onPaste,
     autoResize = true,
     placeholder,
     rows = autoResize ? 1 : 2,
@@ -8157,16 +8514,16 @@ function TextArea(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
+  const onInput = 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) {
@@ -8179,11 +8536,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?.();
+    }
+  };
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
@@ -8215,7 +8601,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,
@@ -8236,6 +8624,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]
@@ -8256,6 +8645,7 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     autoResize,
     tooltip
@@ -8291,6 +8681,7 @@ function TextAreaEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      onPaste: onPaste,
       rows: rows,
       debounce: debounce,
       monospace: monospace,
@@ -8324,32 +8715,57 @@ function Textfield(props) {
     disabled = false,
     id,
     label,
-    onInput,
+    onInput: commitValue,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     value = '',
     tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
+  const onInput = 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) {
@@ -8364,6 +8780,11 @@ function Textfield(props) {
     }
     setLocalValue(value);
   }, [value]);
+  const handleOnKeyDown = e => {
+    if (isCmdWithChar(e)) {
+      handleInput.flush?.();
+    }
+  };
   return jsxs("div", {
     class: "bio-properties-panel-textfield",
     children: [jsx("label", {
@@ -8386,7 +8807,9 @@ function Textfield(props) {
       class: "bio-properties-panel-input",
       onInput: handleLocalInput,
       onFocus: onFocus,
+      onKeyDown: handleOnKeyDown,
       onBlur: handleOnBlur,
+      onPaste: handleOnPaste,
       placeholder: placeholder,
       value: localValue
     })]
@@ -8421,6 +8844,7 @@ function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     tooltip
   } = props;
@@ -8456,6 +8880,7 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      onPaste: onPaste,
       placeholder: placeholder,
       value: value,
       tooltip: tooltip,
@@ -8725,6 +9150,7 @@ function Title(props) {
       class: "bio-properties-panel-popup__title",
       children: title
     }), children, showCloseButton && jsx("button", {
+      type: "button",
       title: closeButtonTooltip,
       class: "bio-properties-panel-popup__close",
       onClick: onClose,
@@ -8766,6 +9192,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;
 
@@ -13478,7 +13923,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({