@bpmn-io/properties-panel 3.33.2 → 3.34.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { useContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from '../preact/hooks';
+import { useContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } 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';
@@ -153,6 +153,20 @@ OpenPopupIcon.defaultProps = {
   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,
@@ -180,11 +194,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]
@@ -277,6 +289,26 @@ function useTooltipContext(id, element) {
   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,
@@ -293,35 +325,77 @@ 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 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]);
   const handleMouseLeave = ({
     relatedTarget
   }) => {
@@ -329,23 +403,32 @@ 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 = () => {
     return jsxs("div", {
@@ -356,6 +439,7 @@ function Tooltip(props) {
       style: position || getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
+      onMouseEnter: handleTooltipMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [jsx("div", {
         class: "bio-properties-panel-tooltip-content",
@@ -369,7 +453,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,
@@ -685,6 +769,9 @@ function useElementVisible(element) {
   return visible;
 }
 
+/**
+ * @param {import('../PropertiesPanel').GroupDefinition} props
+ */
 function Group(props) {
   const {
     element,
@@ -739,8 +826,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,
@@ -1093,6 +1178,13 @@ function useUpdateLayoutEffect(effect, deps) {
   }, deps);
 }
 
+/**
+ *
+ * @param {object} props
+ * @param {string} [props.class]
+ * @param {import('preact').Component[]} [props.menuItems]
+ * @returns
+ */
 function DropdownButton(props) {
   const {
     class: className,
@@ -1250,7 +1342,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", {
@@ -1287,6 +1378,9 @@ function CollapsibleEntry(props) {
   });
 }
 
+/**
+ * @param {import('../PropertiesPanel').ListItemDefinition} props
+ */
 function ListItem(props) {
   const {
     autoFocusEntry,
@@ -1389,8 +1483,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,
@@ -1460,6 +1552,12 @@ function getNewItemIds(newItems, oldItems) {
   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(props) {
   const {
     element,
@@ -1591,6 +1689,15 @@ 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'
@@ -1736,6 +1843,7 @@ const FeelEditor = forwardRef((props, ref) => {
     enableGutters,
     value,
     onInput,
+    onKeyDown: onKeyDownProp = noop$4,
     onFeelToggle = noop$4,
     onLint = noop$4,
     onOpenPopup = noop$4,
@@ -1768,6 +1876,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;
       }
@@ -1887,6 +1997,22 @@ function FeelIcon(props) {
   });
 }
 
+/**
+ * @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,
@@ -2254,7 +2380,7 @@ function FeelTextfield(props) {
       handleInput(feelOnlyValue);
     }
   });
-  const handleLocalInput = newValue => {
+  const handleLocalInput = (newValue, useDebounce = true) => {
     if (feelActive) {
       newValue = '=' + newValue;
     }
@@ -2262,23 +2388,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) {
@@ -2345,12 +2481,23 @@ 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);
+        event.preventDefault();
       }
     };
     containerRef.current.addEventListener('copy', copyHandler);
@@ -2391,6 +2538,7 @@ function FeelTextfield(props) {
       }), feelActive ? jsx(FeelEditor, {
         name: id,
         onInput: handleLocalInput,
+        onKeyDown: handleOnKeyDown,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -2413,6 +2561,7 @@ function FeelTextfield(props) {
         ...props,
         popupOpen: isPopupOpen,
         onInput: handleLocalInput,
+        onKeyDown: handleOnKeyDown,
         onBlur: handleOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
@@ -2431,6 +2580,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
+    onKeyDown,
     value,
     onFocus,
     onBlur,
@@ -2466,6 +2616,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 || ''
@@ -3060,6 +3211,22 @@ function prefixIdLabel(id) {
   return `bio-properties-panel-feelers-${id}-label`;
 }
 
+/**
+ * Entry for handling lists represented as nested entries.
+ *
+ * @template Item
+ * @param {object} props
+ * @param {string} props.id
+ * @param {*} props.element
+ * @param {Function} props.onAdd
+ * @param {import('preact').Component} props.component
+ * @param {string} [props.label='<empty>']
+ * @param {Function} [props.onRemove]
+ * @param {Item[]} [props.items]
+ * @param {boolean} [props.open]
+ * @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input
+ * @returns
+ */
 function List(props) {
   const {
     id,
@@ -3107,7 +3274,6 @@ function List(props) {
       class: classnames('bio-properties-panel-list-entry-header', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsx("div", {
-        title: label,
         class: classnames('bio-properties-panel-list-entry-header-title', open && 'open'),
         children: label
       }), jsxs("div", {
@@ -3212,6 +3378,24 @@ function useNewItems(items = [], shouldReset) {
   return previousItems ? items.filter(item => !previousItems.includes(item)) : [];
 }
 
+/**
+ * @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,
@@ -3366,6 +3550,17 @@ function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
 
+/**
+ * @param {Object} props
+ * @param {Function} props.debounce
+ * @param {Boolean} [props.disabled]
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {Function} [props.onBlur]
+ * @param {Function} [props.onFocus]
+ * @param {Function} props.setValue
+ */
 function Simple(props) {
   const {
     debounce,
@@ -3438,6 +3633,7 @@ function TextArea(props) {
     monospace,
     onFocus,
     onBlur,
+    onPaste,
     autoResize = true,
     placeholder,
     rows = autoResize ? 1 : 2,
@@ -3467,11 +3663,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);
   }, []);
@@ -3503,7 +3728,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,
@@ -3524,6 +3751,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]
@@ -3544,6 +3772,7 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     autoResize,
     tooltip
@@ -3579,6 +3808,7 @@ function TextAreaEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      onPaste: onPaste,
       rows: rows,
       debounce: debounce,
       monospace: monospace,
@@ -3616,6 +3846,7 @@ function Textfield(props) {
     onInput: commitValue,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     value = '',
     tooltip
@@ -3635,11 +3866,35 @@ function Textfield(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 (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) {
       return;
@@ -3653,6 +3908,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", {
@@ -3675,7 +3935,9 @@ function Textfield(props) {
       class: "bio-properties-panel-input",
       onInput: handleLocalInput,
       onFocus: onFocus,
+      onKeyDown: handleOnKeyDown,
       onBlur: handleOnBlur,
+      onPaste: handleOnPaste,
       placeholder: placeholder,
       value: localValue
     })]
@@ -3710,6 +3972,7 @@ function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    onPaste,
     placeholder,
     tooltip
   } = props;
@@ -3745,6 +4008,7 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      onPaste: onPaste,
       placeholder: placeholder,
       value: value,
       tooltip: tooltip,
@@ -3777,7 +4041,7 @@ const DEFAULT_DEBOUNCE_TIME = 600;
  * - If `debounceDelay` is `false`, the function executes immediately without debouncing.
  * - If a number is provided, the function execution is delayed by the given time in milliseconds.
  *
- * @param { Boolean | Number } [debounceDelay=300]
+ * @param { Boolean | Number } [debounceDelay=600]
  *
  * @example
  * const debounce = debounceInput();
@@ -4097,6 +4361,24 @@ function cancel(event) {
   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;