@bpmn-io/properties-panel 2.2.1 → 3.1.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { useContext, useRef, useEffect, useMemo, useCallback, useState, useLayoutEffect } from '../preact/hooks';
 import { isFunction, isArray, get, assign, set, sortBy, find, isString, isNumber, debounce } from 'min-dash';
-import { forwardRef } from '../preact/compat';
+import { useState as useState$1, useEffect as useEffect$1, forwardRef } from '../preact/compat';
 import { jsx, jsxs } from '../preact/jsx-runtime';
 import classnames from 'classnames';
 import { query } from 'min-dom';
@@ -141,19 +141,19 @@ const ErrorsContext = createContext({
   errors: {}
 });
 
-/**
- * @typedef {Function} <propertiesPanel.showEntry> callback
- *
- * @example
- *
- * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
- *   // ...
- * });
- *
- * @param {Object} context
- * @param {boolean} [context.focus]
- *
- * @returns void
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
  */
 const EventContext = createContext({
   eventBus: null
@@ -166,20 +166,20 @@ const LayoutContext = createContext({
   setLayoutForKey: () => {}
 });
 
-/**
- * Accesses the global DescriptionContext and returns a description for a given id and element.
- *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const description = useDescriptionContext('input1', element);
- * }
- * ```
- *
- * @param {string} id
- * @param {object} element
- *
- * @returns {string}
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
  */
 function useDescriptionContext(id, element) {
   const {
@@ -194,12 +194,18 @@ function useError(id) {
   } = useContext(ErrorsContext);
   return errors[id];
 }
+function useErrors() {
+  const {
+    errors
+  } = useContext(ErrorsContext);
+  return errors;
+}
 
-/**
- * Subscribe to an event immediately. Update subscription after inputs changed.
- *
- * @param {string} event
- * @param {Function} callback
+/**
+ * Subscribe to an event immediately. Update subscription after inputs changed.
+ *
+ * @param {string} event
+ * @param {Function} callback
  */
 function useEvent(event, callback, eventBus) {
   const eventContext = useContext(EventContext);
@@ -231,24 +237,24 @@ function useEvent(event, callback, eventBus) {
 
 const KEY_LENGTH = 6;
 
-/**
- * Create a persistent key factory for plain objects without id.
- *
- * @example
- * ```jsx
- * function List({ objects }) {
- *   const getKey = useKeyFactory();
- *   return (<ol>{
- *     objects.map(obj => {
- *       const key = getKey(obj);
- *       return <li key={key}>obj.name</li>
- *     })
- *   }</ol>);
- * }
- * ```
- *
- * @param {any[]} dependencies
- * @returns {(element: object) => string}
+/**
+ * Create a persistent key factory for plain objects without id.
+ *
+ * @example
+ * ```jsx
+ * function List({ objects }) {
+ *   const getKey = useKeyFactory();
+ *   return (<ol>{
+ *     objects.map(obj => {
+ *       const key = getKey(obj);
+ *       return <li key={key}>obj.name</li>
+ *     })
+ *   }</ol>);
+ * }
+ * ```
+ *
+ * @param {any[]} dependencies
+ * @returns {(element: object) => string}
  */
 function useKeyFactory(dependencies = []) {
   const map = useMemo(() => new Map(), dependencies);
@@ -263,20 +269,20 @@ function useKeyFactory(dependencies = []) {
   return getKey;
 }
 
-/**
- * Creates a state that persists in the global LayoutContext.
- *
- * @example
- * ```jsx
- * function Group(props) {
- *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
- * }
- * ```
- *
- * @param {(string|number)[]} path
- * @param {any} [defaultValue]
- *
- * @returns {[ any, Function ]}
+/**
+ * Creates a state that persists in the global LayoutContext.
+ *
+ * @example
+ * ```jsx
+ * function Group(props) {
+ *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+ * }
+ * ```
+ *
+ * @param {(string|number)[]} path
+ * @param {any} [defaultValue]
+ *
+ * @returns {[ any, Function ]}
  */
 function useLayoutState(path, defaultValue) {
   const {
@@ -290,11 +296,11 @@ function useLayoutState(path, defaultValue) {
   return [layoutForKey, setState];
 }
 
-/**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
- *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+/**
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
+ *
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
  */
 
 function usePrevious(value) {
@@ -305,12 +311,12 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/**
- * Subscribe to `propertiesPanel.showEntry`.
- *
- * @param {string} id
- *
- * @returns {import('preact').Ref}
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
+ *
+ * @param {string} id
+ *
+ * @returns {import('preact').Ref}
  */
 function useShowEntryEvent(id) {
   const {
@@ -341,20 +347,20 @@ function useShowEntryEvent(id) {
   return ref;
 }
 
-/**
- * @callback setSticky
- * @param {boolean} value
+/**
+ * @callback setSticky
+ * @param {boolean} value
  */
 
-/**
- * Use IntersectionObserver to identify when DOM element is in sticky mode.
- * If sticky is observered setSticky(true) will be called.
- * If sticky mode is left, setSticky(false) will be called.
- *
- *
- * @param {Object} ref
- * @param {string} scrollContainerSelector
- * @param {setSticky} setSticky
+/**
+ * Use IntersectionObserver to identify when DOM element is in sticky mode.
+ * If sticky is observered setSticky(true) will be called.
+ * If sticky mode is left, setSticky(false) will be called.
+ *
+ *
+ * @param {Object} ref
+ * @param {string} scrollContainerSelector
+ * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   const [scrollContainer, setScrollContainer] = useState(query(scrollContainerSelector));
@@ -408,19 +414,19 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
   }, [ref.current, scrollContainer, setSticky]);
 }
 
-/**
- * Creates a static function reference with changing body.
- * This is necessary when external libraries require a callback function
- * that has references to state variables.
- *
- * Usage:
- * const callback = useStaticCallback((val) => {val === currentState});
- *
- * The `callback` reference is static and can be safely used in external
- * libraries or as a prop that does not cause rerendering of children.
- *
- * @param {Function} callback function with changing reference
- * @returns {Function} static function reference
+/**
+ * Creates a static function reference with changing body.
+ * This is necessary when external libraries require a callback function
+ * that has references to state variables.
+ *
+ * Usage:
+ * const callback = useStaticCallback((val) => {val === currentState});
+ *
+ * The `callback` reference is static and can be safely used in external
+ * libraries or as a prop that does not cause rerendering of children.
+ *
+ * @param {Function} callback function with changing reference
+ * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
   const callbackRef = useRef(callback);
@@ -460,6 +466,10 @@ function Group(props) {
     setEdited(hasOneEditedEntry);
   }, [entries]);
 
+  // set error state depending on all entries
+  const allErrors = useErrors();
+  const hasErrors = entries.some(entry => allErrors[entry.id]);
+
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
   const propertiesPanelContext = {
@@ -479,7 +489,10 @@ function Group(props) {
         children: label
       }), jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
-        children: [edited && jsx(DataMarker, {}), jsx("button", {
+        children: [jsx(DataMarker, {
+          edited: edited,
+          hasErrors: hasErrors
+        }), jsx("button", {
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
@@ -506,20 +519,33 @@ function Group(props) {
     })]
   });
 }
-function DataMarker() {
-  return jsx("div", {
-    title: "Section contains data",
-    class: "bio-properties-panel-dot"
-  });
+function DataMarker(props) {
+  const {
+    edited,
+    hasErrors
+  } = props;
+  if (hasErrors) {
+    return jsx("div", {
+      title: "Section contains an error",
+      class: "bio-properties-panel-dot bio-properties-panel-dot--error"
+    });
+  }
+  if (edited) {
+    return jsx("div", {
+      title: "Section contains data",
+      class: "bio-properties-panel-dot"
+    });
+  }
+  return null;
 }
 
-/**
- * @typedef { {
- *  text: (element: object) => string,
- *  icon?: (element: Object) => import('preact').Component
- * } } PlaceholderDefinition
- *
- * @param { PlaceholderDefinition } props
+/**
+ * @typedef { {
+ *  text: (element: object) => string,
+ *  icon?: (element: Object) => import('preact').Component
+ * } } PlaceholderDefinition
+ *
+ * @param { PlaceholderDefinition } props
  */
 function Placeholder(props) {
   const {
@@ -543,72 +569,72 @@ function Placeholder(props) {
 const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
 
-/**
- * @typedef { {
- *    component: import('preact').Component,
- *    id: String,
- *    isEdited?: Function
- * } } EntryDefinition
- *
- * @typedef { {
- *    autoFocusEntry: String,
- *    autoOpen?: Boolean,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    remove: (event: MouseEvent) => void
- * } } ListItemDefinition
- *
- * @typedef { {
- *    add: (event: MouseEvent) => void,
- *    component: import('preact').Component,
- *    element: Object,
- *    id: String,
- *    items: Array<ListItemDefinition>,
- *    label: String,
- *    shouldSort?: Boolean,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @typedef { {
- *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
- *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
- * } } PlaceholderProvider
- *
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldSort?: Boolean,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
  */
 
-/**
- * A basic properties panel component. Describes *how* content will be rendered, accepts
- * data from implementor to describe *what* will be rendered.
- *
- * @param {Object} props
- * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {PlaceholderProvider} [props.placeholderProvider]
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
- * @param {Object} [props.layoutConfig]
- * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
- * @param {Function} [props.descriptionLoaded]
- * @param {Object} [props.eventBus]
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
   const {
@@ -747,11 +773,11 @@ function createDescriptionContext(overrides = {}) {
 
 // hooks //////////////////
 
-/**
- * This hook behaves like useLayoutEffect, but does not trigger on the first render.
- *
- * @param {Function} effect
- * @param {Array} deps
+/**
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
  */
 function useUpdateLayoutEffect(effect, deps) {
   const isMounted = useRef(false);
@@ -825,15 +851,15 @@ function MenuItem({
   });
 }
 
-/**
- *
- * @param {Array<null | Element>} ignoredElements
- * @param {Function} callback
+/**
+ *
+ * @param {Array<null | Element>} ignoredElements
+ * @param {Function} callback
  */
 function useGlobalClick(ignoredElements, callback) {
   useEffect(() => {
-    /**
-     * @param {MouseEvent} event
+    /**
+     * @param {MouseEvent} event
      */
     function listener(event) {
       if (ignoredElements.some(element => element && element.contains(event.target))) {
@@ -964,8 +990,8 @@ function ListItem(props) {
 
 const noop$3 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -1078,6 +1104,18 @@ function ListGroup(props) {
     setAddTriggered(true);
     add(e);
   };
+  const allErrors = useErrors();
+  const hasError = items.some(item => {
+    if (allErrors[item.id]) {
+      return true;
+    }
+    if (!item.entries) {
+      return;
+    }
+
+    // also check if the error is nested, e.g. for name-value entries
+    return item.entries.some(entry => allErrors[entry.id]);
+  });
   return jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
@@ -1101,7 +1139,7 @@ function ListGroup(props) {
           }) : null]
         }) : null, hasItems ? jsx("div", {
           title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-          class: "bio-properties-panel-list-badge",
+          class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsx("button", {
           title: "Toggle section",
@@ -1142,8 +1180,8 @@ function ListGroup(props) {
 
 // helpers ////////////////////
 
-/**
- * Sorts given items alphanumeric by label
+/**
+ * Sorts given items alphanumeric by label
  */
 function sortItems(items) {
   return sortBy(items, i => i.label.toLowerCase());
@@ -1171,6 +1209,121 @@ function Description(props) {
   }
 }
 
+function TooltipWrapper(props) {
+  if (!props.value) {
+    return props.children;
+  }
+  return jsx(Tooltip, {
+    ...props
+  });
+}
+function Tooltip(props) {
+  const {
+    value,
+    labelId
+  } = props;
+  const [visible, setShow] = useState$1(false);
+  let timeout = null;
+  const wrapperRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const showTooltip = async event => {
+    const show = () => !visible && setShow(true);
+    if (event instanceof MouseEvent) {
+      timeout = setTimeout(show, 200);
+    } else {
+      show();
+    }
+  };
+  const hideTooltip = () => setShow(false);
+  const hideTooltipViaEscape = e => {
+    e.code === 'Escape' && hideTooltip();
+  };
+  const isTooltipHovered = ({
+    x,
+    y
+  }) => {
+    const tooltip = tooltipRef.current;
+    const wrapper = wrapperRef.current;
+    return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+  };
+  useEffect$1(() => {
+    const {
+      current
+    } = wrapperRef;
+    if (!current) {
+      return;
+    }
+    const hideHoveredTooltip = e => {
+      const isFocused = document.activeElement === wrapperRef.current || document.activeElement.closest('.bio-properties-panel-tooltip');
+      if (visible && !isTooltipHovered({
+        x: e.x,
+        y: e.y
+      }) && !isFocused) {
+        hideTooltip();
+      }
+    };
+    const hideFocusedTooltip = e => {
+      const {
+        relatedTarget
+      } = e;
+      const isTooltipChild = el => el && !!el.closest('.bio-properties-panel-tooltip');
+      if (visible && !isHovered(wrapperRef.current) && !isTooltipChild(relatedTarget)) {
+        hideTooltip();
+      }
+    };
+    document.addEventListener('focusout', hideFocusedTooltip);
+    document.addEventListener('mousemove', hideHoveredTooltip);
+    return () => {
+      document.removeEventListener('mousemove', hideHoveredTooltip);
+      document.removeEventListener('focusout', hideFocusedTooltip);
+    };
+  }, [wrapperRef.current, visible]);
+  return jsxs("div", {
+    class: "bio-properties-panel-tooltip-wrapper",
+    tabIndex: "0",
+    ref: wrapperRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: () => clearTimeout(timeout),
+    onFocus: showTooltip,
+    onKeyDown: hideTooltipViaEscape,
+    children: [props.children, visible ? jsxs("div", {
+      class: "bio-properties-panel-tooltip",
+      role: "tooltip",
+      id: "bio-properties-panel-tooltip",
+      "aria-labelledby": labelId,
+      style: getTooltipPosition(wrapperRef.current),
+      ref: tooltipRef,
+      onClick: e => e.stopPropagation(),
+      children: [jsx("div", {
+        class: "bio-properties-panel-tooltip-content",
+        children: value
+      }), jsx("div", {
+        class: "bio-properties-panel-tooltip-arrow"
+      })]
+    }) : null]
+  });
+}
+
+// helper
+function inBounds(x, y, bounds) {
+  const {
+    top,
+    right,
+    bottom,
+    left
+  } = bounds;
+  return x >= left && x <= right && y >= top && y <= bottom;
+}
+function getTooltipPosition(refElement) {
+  const refPosition = refElement.getBoundingClientRect();
+  const right = `calc(100% - ${refPosition.x}px)`;
+  const top = `${refPosition.top - 10}px`;
+  return `right: ${right}; top: ${top};`;
+}
+function isHovered(element) {
+  return element.matches(':hover');
+}
+
 function Checkbox(props) {
   const {
     id,
@@ -1179,7 +1332,8 @@ function Checkbox(props) {
     disabled,
     value = false,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const handleChangeCallback = ({
@@ -1214,22 +1368,27 @@ function Checkbox(props) {
     }), jsx("label", {
       for: prefixId$7(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        labelId: prefixId$7(id),
+        children: label
+      })
     })]
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {boolean} [props.disabled]
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ * @param {boolean} [props.disabled]
  */
 function CheckboxEntry(props) {
   const {
@@ -1241,7 +1400,8 @@ function CheckboxEntry(props) {
     setValue,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -1255,7 +1415,8 @@ function CheckboxEntry(props) {
       onChange: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value
+      value: value,
+      tooltip: tooltip
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -1400,10 +1561,10 @@ const CodeEditor = forwardRef((props, ref) => {
   useEffect(() => {
     let editor;
 
-    /* Trigger FEEL toggle when
-     *
-     * - `backspace` is pressed
-     * - AND the cursor is at the beginning of the input
+    /* Trigger FEEL toggle when
+     *
+     * - `backspace` is pressed
+     * - AND the cursor is at the beginning of the input
      */
     const onKeyDown = e => {
       if (e.key !== 'Backspace' || !editor) {
@@ -1476,10 +1637,10 @@ function FeelIndicator(props) {
 
 const noop$2 = () => {};
 
-/**
- * @param {Object} props
- * @param {Object} props.label
- * @param {String} props.feel
+/**
+ * @param {Object} props
+ * @param {Object} props.label
+ * @param {String} props.feel
  */
 function FeelIcon(props) {
   const {
@@ -1517,7 +1678,8 @@ function ToggleSwitch(props) {
     inline,
     onFocus,
     onBlur,
-    inputRef
+    inputRef,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = async () => {
@@ -1540,7 +1702,11 @@ function ToggleSwitch(props) {
     children: [jsx("label", {
       class: "bio-properties-panel-label",
       for: prefixId$6(id),
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        labelId: prefixId$6(id),
+        children: label
+      })
     }), jsxs("div", {
       class: "bio-properties-panel-field-wrapper",
       children: [jsxs("label", {
@@ -1566,18 +1732,19 @@ function ToggleSwitch(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {String} props.switcherLabel
- * @param {Boolean} props.inline
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Boolean} props.inline
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  */
 function ToggleSwitchEntry(props) {
   const {
@@ -1590,7 +1757,8 @@ function ToggleSwitchEntry(props) {
     getValue,
     setValue,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const value = getValue(element);
   return jsxs("div", {
@@ -1604,7 +1772,8 @@ function ToggleSwitchEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       switcherLabel: switcherLabel,
-      inline: inline
+      inline: inline,
+      tooltip: tooltip
     }), jsx(Description, {
       forId: id,
       element: element,
@@ -1686,22 +1855,22 @@ function NumberField(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
  */
 function NumberFieldEntry(props) {
   const {
@@ -1720,11 +1889,9 @@ function NumberFieldEntry(props) {
     onBlur,
     validate
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -1736,16 +1903,9 @@ function NumberFieldEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -1795,7 +1955,8 @@ function FeelTextfield(props) {
     disabled = false,
     variables,
     tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    OptionalComponent = OptionalFeelInput,
+    tooltip
   } = props;
   const [localValue, _setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
@@ -1911,7 +2072,11 @@ function FeelTextfield(props) {
       for: prefixId$4(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
-      children: [label, jsx(FeelIcon, {
+      children: [jsx(TooltipWrapper, {
+        value: tooltip,
+        labelId: prefixId$4(id),
+        children: label
+      }), jsx(FeelIcon, {
         label: label,
         feel: feel,
         onClick: handleFeelToggle,
@@ -2153,24 +2318,25 @@ const OptionalFeelCheckbox = forwardRef((props, ref) => {
   });
 });
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  */
 function FeelEntry(props) {
   const {
@@ -2191,13 +2357,12 @@ function FeelEntry(props) {
     example,
     variables,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -2209,22 +2374,16 @@ function FeelEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxs("div", {
@@ -2249,7 +2408,8 @@ function FeelEntry(props) {
       value: value,
       variables: variables,
       tooltipContainer: tooltipContainer,
-      OptionalComponent: props.OptionalComponent
+      OptionalComponent: props.OptionalComponent,
+      tooltip: tooltip
     }), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -2261,27 +2421,27 @@ function FeelEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.max
- * @param {String} props.min
- * @param {String} props.step
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelNumberEntry(props) {
   return jsx(FeelEntry, {
@@ -2291,24 +2451,24 @@ function FeelNumberEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelTextAreaEntry(props) {
   return jsx(FeelEntry, {
@@ -2318,24 +2478,24 @@ function FeelTextAreaEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelToggleSwitchEntry(props) {
   return jsx(FeelEntry, {
@@ -2345,24 +2505,24 @@ function FeelToggleSwitchEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelCheckboxEntry(props) {
   return jsx(FeelEntry, {
@@ -2372,26 +2532,26 @@ function FeelCheckboxEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.hostLanguage
- * @param {Boolean} props.singleLine
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.hostLanguage
+ * @param {Boolean} props.singleLine
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelTemplatingEntry(props) {
   return jsx(FeelEntry, {
@@ -2418,19 +2578,19 @@ function prefixId$4(id) {
 
 const noop = () => {};
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
  */
 function TemplatingEntry(props) {
   const {
@@ -2446,11 +2606,9 @@ function TemplatingEntry(props) {
     validate,
     show = noop
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -2462,22 +2620,16 @@ function TemplatingEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxs("div", {
@@ -2617,8 +2769,8 @@ function List(props) {
     }
   }, [open, hasItems]);
 
-  /**
-   * @param {MouseEvent} event
+  /**
+   * @param {MouseEvent} event
    */
   function addItem(event) {
     event.stopPropagation();
@@ -2730,14 +2882,14 @@ function ItemsList(props) {
   });
 }
 
-/**
- * Place new items in the beginning of the list and sort the rest with provided function.
- *
- * @template Item
- * @param {Item[]} currentItems
- * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
- * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
- * @returns {Item[]}
+/**
+ * Place new items in the beginning of the list and sort the rest with provided function.
+ *
+ * @template Item
+ * @param {Item[]} currentItems
+ * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
+ * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
+ * @returns {Item[]}
  */
 function useSortedItems(currentItems, compareFn, shouldReset = false) {
   const itemsRef = useRef(currentItems.slice());
@@ -2781,7 +2933,8 @@ function Select(props) {
     value = '',
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = useState(value);
@@ -2805,7 +2958,11 @@ function Select(props) {
     children: [jsx("label", {
       for: prefixId$3(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        labelId: prefixId$3(id),
+        children: label
+      })
     }), jsx("select", {
       ref: ref,
       id: prefixId$3(id),
@@ -2837,19 +2994,20 @@ function Select(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} [props.description]
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.getOptions
- * @param {boolean} [props.disabled]
- * @param {Function} [props.validate]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
+ * @param {Function} [props.validate]
+ * @param {string|import('preact').Component} props.tooltip
  */
 function SelectEntry(props) {
   const {
@@ -2863,14 +3021,13 @@ function SelectEntry(props) {
     disabled,
     onFocus,
     onBlur,
-    validate
+    validate,
+    tooltip
   } = props;
   const options = getOptions(element);
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -2882,16 +3039,9 @@ function SelectEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -2904,7 +3054,8 @@ function SelectEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       options: options,
-      disabled: disabled
+      disabled: disabled,
+      tooltip: tooltip
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -3000,7 +3151,8 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
-    rows = autoResize ? 1 : 2
+    rows = autoResize ? 1 : 2,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
@@ -3028,7 +3180,11 @@ function TextArea(props) {
     children: [jsx("label", {
       for: prefixId$1(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        labelId: prefixId$1(id),
+        children: label
+      })
     }), jsx("textarea", {
       ref: ref,
       id: prefixId$1(id),
@@ -3046,21 +3202,21 @@ function TextArea(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} props.description
- * @param {boolean} props.debounce
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {number} props.rows
- * @param {boolean} props.monospace
- * @param {Function} [props.validate]
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {Function} [props.validate]
+ * @param {boolean} [props.disabled]
  */
 function TextAreaEntry(props) {
   const {
@@ -3077,13 +3233,12 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
-    autoResize
+    autoResize,
+    tooltip
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -3095,16 +3250,9 @@ function TextAreaEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -3120,7 +3268,8 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled,
-      autoResize: autoResize
+      autoResize: autoResize,
+      tooltip: tooltip
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -3150,10 +3299,12 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
-    value = ''
+    value = '',
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
+  const labelRef = useRef(null);
   const handleInputCallback = useMemo(() => {
     return debounce(({
       target
@@ -3174,7 +3325,12 @@ function Textfield(props) {
     children: [jsx("label", {
       for: prefixId(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        refElement: labelRef,
+        labelId: prefixId(id),
+        children: label
+      })
     }), jsx("input", {
       ref: ref,
       id: prefixId(id),
@@ -3192,19 +3348,20 @@ function Textfield(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ * @param {Function} props.validate
  */
 function TextfieldEntry(props) {
   const {
@@ -3218,13 +3375,12 @@ function TextfieldEntry(props) {
     setValue,
     validate,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -3236,16 +3392,9 @@ function TextfieldEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -3258,7 +3407,8 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value
+      value: value,
+      tooltip: tooltip
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -3296,5 +3446,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$5 as isFeelEntryEdited, isEdited$6 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$5 as isFeelEntryEdited, isEdited$6 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
 //# sourceMappingURL=index.esm.js.map