@bpmn-io/properties-panel 0.24.0 → 0.25.0

package/dist/index.esm.js

@@ -8,52 +8,50 @@ import { createContext, createElement } from '../preact';
 import FeelEditor from '@bpmn-io/feel-editor';
 
 var ArrowIcon = function ArrowIcon(props) {
-  return jsx("svg", { ...props,
+  return jsx("svg", {
+    ...props,
     children: jsx("path", {
       fillRule: "evenodd",
       d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z"
     })
   });
 };
-
 ArrowIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16"
 };
-
 var CreateIcon = function CreateIcon(props) {
-  return jsx("svg", { ...props,
+  return jsx("svg", {
+    ...props,
     children: jsx("path", {
       fillRule: "evenodd",
       d: "M9 13V9h4a1 1 0 0 0 0-2H9V3a1 1 0 1 0-2 0v4H3a1 1 0 1 0 0 2h4v4a1 1 0 0 0 2 0Z"
     })
   });
 };
-
 CreateIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16"
 };
-
 var DeleteIcon = function DeleteIcon(props) {
-  return jsx("svg", { ...props,
+  return jsx("svg", {
+    ...props,
     children: jsx("path", {
       fillRule: "evenodd",
       d: "M12 6v7c0 1.1-.4 1.55-1.5 1.55h-5C4.4 14.55 4 14.1 4 13V6h8Zm-1.5 1.5h-5v4.3c0 .66.5 1.2 1.111 1.2H9.39c.611 0 1.111-.54 1.111-1.2V7.5ZM13 3h-2l-1-1H6L5 3H3v1.5h10V3Z"
     })
   });
 };
-
 DeleteIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16"
 };
-
 var ExternalLinkIcon = function ExternalLinkIcon(props) {
-  return jsx("svg", { ...props,
+  return jsx("svg", {
+    ...props,
     children: jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
@@ -62,16 +60,15 @@ var ExternalLinkIcon = function ExternalLinkIcon(props) {
     })
   });
 };
-
 ExternalLinkIcon.defaultProps = {
   width: "16",
   height: "16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-
 var FeelRequiredIcon = function FeelRequiredIcon(props) {
-  return jsxs("svg", { ...props,
+  return jsxs("svg", {
+    ...props,
     children: [jsx("path", {
       d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
       fill: "currentColor"
@@ -86,15 +83,14 @@ var FeelRequiredIcon = function FeelRequiredIcon(props) {
     })]
   });
 };
-
 FeelRequiredIcon.defaultProps = {
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-
 var FeelOptionalIcon = function FeelOptionalIcon(props) {
-  return jsxs("svg", { ...props,
+  return jsxs("svg", {
+    ...props,
     children: [jsx("path", {
       d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
       fill: "currentColor"
@@ -106,7 +102,6 @@ var FeelOptionalIcon = function FeelOptionalIcon(props) {
     })]
   });
 };
-
 FeelOptionalIcon.defaultProps = {
   viewBox: "0 0 16 16",
   fill: "none",
@@ -211,7 +206,6 @@ const LayoutContext = createContext({
  *
  * @returns {string}
  */
-
 function useDescriptionContext(id, element) {
   const {
     getDescriptionForId
@@ -232,28 +226,25 @@ function useError(id) {
  * @param {string} event
  * @param {Function} callback
  */
-
 function useEvent(event, callback, eventBus) {
   const eventContext = useContext(EventContext);
-
   if (!eventBus) {
     ({
       eventBus
     } = eventContext);
   }
+  const didMount = useRef(false);
 
-  const didMount = useRef(false); // (1) subscribe immediately
-
+  // (1) subscribe immediately
   if (eventBus && !didMount.current) {
     eventBus.on(event, callback);
-  } // (2) update subscription after inputs changed
-
+  }
 
+  // (2) update subscription after inputs changed
   useEffect(() => {
     if (eventBus && didMount.current) {
       eventBus.on(event, callback);
     }
-
     didMount.current = true;
     return () => {
       if (eventBus) {
@@ -264,6 +255,7 @@ function useEvent(event, callback, eventBus) {
 }
 
 const KEY_LENGTH = 6;
+
 /**
  * Create a persistent key factory for plain objects without id.
  *
@@ -283,21 +275,16 @@ const KEY_LENGTH = 6;
  * @param {any[]} dependencies
  * @returns {(element: object) => string}
  */
-
 function useKeyFactory(dependencies = []) {
   const map = useMemo(() => new Map(), dependencies);
-
   const getKey = el => {
     let key = map.get(el);
-
     if (!key) {
       key = Math.random().toString().slice(-KEY_LENGTH);
       map.set(el, key);
     }
-
     return key;
   };
-
   return getKey;
 }
 
@@ -316,7 +303,6 @@ function useKeyFactory(dependencies = []) {
  *
  * @returns {[ any, Function ]}
  */
-
 function useLayoutState(path, defaultValue) {
   const {
     getLayoutForKey,
@@ -324,14 +310,13 @@ function useLayoutState(path, defaultValue) {
   } = useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
   const [value, set] = useState(layoutForKey);
-
   const setState = newValue => {
     // (1) set component state
-    set(newValue); // (2) set context
+    set(newValue);
 
+    // (2) set context
     setLayoutForKey(path, newValue);
   };
-
   return [value, setState];
 }
 
@@ -357,7 +342,6 @@ function usePrevious(value) {
  *
  * @returns {import('preact').Ref}
  */
-
 function useShowEntryEvent(id) {
   const {
     onShow
@@ -367,7 +351,6 @@ function useShowEntryEvent(id) {
   const onShowEntry = useCallback(event => {
     if (event.id === id) {
       onShow();
-
       if (!focus.current) {
         focus.current = true;
       }
@@ -378,11 +361,9 @@ function useShowEntryEvent(id) {
       if (isFunction(ref.current.focus)) {
         ref.current.focus();
       }
-
       if (isFunction(ref.current.select)) {
         ref.current.select();
       }
-
       focus.current = false;
     }
   });
@@ -405,17 +386,15 @@ function useShowEntryEvent(id) {
  * @param {string} scrollContainerSelector
  * @param {setSticky} setSticky
  */
-
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   useEffect(() => {
-    const Observer = IntersectionObserver; // return early if IntersectionObserver is not available
+    const Observer = IntersectionObserver;
 
+    // return early if IntersectionObserver is not available
     if (!Observer) {
       return;
     }
-
     let observer;
-
     if (ref.current) {
       const scrollContainer = query(scrollContainerSelector);
       observer = new Observer(entries => {
@@ -433,9 +412,9 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
         threshold: [1]
       });
       observer.observe(ref.current);
-    } // Unobserve if unmounted
-
+    }
 
+    // Unobserve if unmounted
     return () => {
       if (ref.current && observer) {
         observer.unobserve(ref.current);
@@ -458,7 +437,6 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
  * @param {Function} callback function with changing reference
  * @returns {Function} static function reference
  */
-
 function useStaticCallback(callback) {
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
@@ -476,12 +454,11 @@ function Group(props) {
   const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
-
   const toggleOpen = () => setOpen(!open);
-
   const [edited, setEdited] = useState(false);
-  const [sticky, setSticky] = useState(false); // set edited state depending on all entries
+  const [sticky, setSticky] = useState(false);
 
+  // set edited state depending on all entries
   useEffect(() => {
     const hasOneEditedEntry = entries.find(entry => {
       const {
@@ -489,19 +466,19 @@ function Group(props) {
         isEdited
       } = entry;
       const entryNode = query(`[data-entry-id="${id}"]`);
-
       if (!isFunction(isEdited) || !entryNode) {
         return false;
       }
-
       const inputNode = query('.bio-properties-panel-input', entryNode);
       return isEdited(inputNode);
     });
     setEdited(hasOneEditedEntry);
-  }, [entries]); // set css class when group is sticky to top
+  }, [entries]);
 
+  // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
-  const propertiesPanelContext = { ...useContext(LayoutContext),
+  const propertiesPanelContext = {
+    ...useContext(LayoutContext),
     onShow
   };
   return jsxs("div", {
@@ -534,7 +511,8 @@ function Group(props) {
             component: Component,
             id
           } = entry;
-          return createElement(Component, { ...entry,
+          return createElement(Component, {
+            ...entry,
             element: element,
             key: id
           });
@@ -543,7 +521,6 @@ function Group(props) {
     })]
   });
 }
-
 function DataMarker() {
   return jsx("div", {
     title: "Section contains data",
@@ -582,6 +559,7 @@ const DEFAULT_LAYOUT = {
   open: true
 };
 const DEFAULT_DESCRIPTION = {};
+
 /**
  * @typedef { {
  *    component: import('preact').Component,
@@ -649,7 +627,6 @@ const DEFAULT_DESCRIPTION = {};
  * @param {Function} [props.descriptionLoaded]
  * @param {Object} [props.eventBus]
  */
-
 function PropertiesPanel(props) {
   const {
     element,
@@ -661,52 +638,46 @@ function PropertiesPanel(props) {
     descriptionConfig = {},
     descriptionLoaded,
     eventBus
-  } = props; // set-up layout context
+  } = props;
 
+  // set-up layout context
   const [layout, setLayout] = useState(createLayout(layoutConfig));
   useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
     }
   }, [layout, layoutChanged]);
-
   const getLayoutForKey = (key, defaultValue) => {
     return get(layout, key, defaultValue);
   };
-
   const setLayoutForKey = (key, config) => {
     const newLayout = assign({}, layout);
     set(newLayout, key, config);
     setLayout(newLayout);
   };
-
   const layoutContext = {
     layout,
     setLayout,
     getLayoutForKey,
     setLayoutForKey
-  }; // set-up description context
+  };
 
+  // set-up description context
   const description = createDescriptionContext(descriptionConfig);
-
   if (typeof descriptionLoaded === 'function') {
     descriptionLoaded(description);
   }
-
   const getDescriptionForId = (id, element) => {
     return description[id] && description[id](element);
   };
-
   const descriptionContext = {
     description,
     getDescriptionForId
   };
   const [errors, setErrors] = useState({});
-
   const onSetErrors = ({
     errors
   }) => setErrors(errors);
-
   useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
   const errorsContext = {
     errors
@@ -716,19 +687,21 @@ function PropertiesPanel(props) {
   };
   const propertiesPanelContext = {
     element
-  }; // empty state
+  };
 
+  // empty state
   if (placeholderProvider && !element) {
-    return jsx(Placeholder, { ...placeholderProvider.getEmpty()
+    return jsx(Placeholder, {
+      ...placeholderProvider.getEmpty()
     });
-  } // multiple state
-
+  }
 
+  // multiple state
   if (placeholderProvider && isArray(element)) {
-    return jsx(Placeholder, { ...placeholderProvider.getMultiple()
+    return jsx(Placeholder, {
+      ...placeholderProvider.getMultiple()
     });
   }
-
   return jsx(LayoutContext.Provider, {
     value: propertiesPanelContext,
     children: jsx(ErrorsContext.Provider, {
@@ -751,7 +724,8 @@ function PropertiesPanel(props) {
                     component: Component = Group,
                     id
                   } = group;
-                  return createElement(Component, { ...group,
+                  return createElement(Component, {
+                    ...group,
                     key: id,
                     element: element
                   });
@@ -763,16 +737,19 @@ function PropertiesPanel(props) {
       })
     })
   });
-} // helpers //////////////////
+}
+
+// helpers //////////////////
 
 function createLayout(overrides) {
-  return { ...DEFAULT_LAYOUT,
+  return {
+    ...DEFAULT_LAYOUT,
     ...overrides
   };
 }
-
 function createDescriptionContext(overrides) {
-  return { ...DEFAULT_DESCRIPTION,
+  return {
+    ...DEFAULT_DESCRIPTION,
     ...overrides
   };
 }
@@ -786,24 +763,19 @@ function DropdownButton(props) {
   const dropdownRef = useRef(null);
   const menuRef = useRef(null);
   const [open, setOpen] = useState(false);
-
   const close = () => setOpen(false);
-
   function onDropdownToggle(event) {
     if (menuRef.current && menuRef.current.contains(event.target)) {
       return;
     }
-
     event.stopPropagation();
     setOpen(open => !open);
   }
-
   function onActionClick(event, action) {
     event.stopPropagation();
     close();
     action();
   }
-
   useGlobalClick([dropdownRef.current], () => close());
   return jsxs("div", {
     class: classnames('bio-properties-panel-dropdown-button', {
@@ -821,7 +793,6 @@ function DropdownButton(props) {
     })]
   });
 }
-
 function MenuItem({
   item,
   onClick
@@ -831,7 +802,6 @@ function MenuItem({
       class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
     });
   }
-
   if (item.action) {
     return jsx("button", {
       class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
@@ -839,19 +809,17 @@ function MenuItem({
       children: item.entry
     });
   }
-
   return jsx("div", {
     class: "bio-properties-panel-dropdown-button__menu-item",
     children: item.entry
   });
 }
+
 /**
  *
  * @param {Array<null | Element>} ignoredElements
  * @param {Function} callback
  */
-
-
 function useGlobalClick(ignoredElements, callback) {
   useEffect(() => {
     /**
@@ -861,10 +829,8 @@ function useGlobalClick(ignoredElements, callback) {
       if (ignoredElements.some(element => element && element.contains(event.target))) {
         return;
       }
-
       callback();
     }
-
     document.addEventListener('click', listener, {
       capture: true
     });
@@ -881,7 +847,8 @@ function HeaderButton(props) {
     onClick = () => {},
     ...otherProps
   } = props;
-  return jsx("button", { ...otherProps,
+  return jsx("button", {
+    ...otherProps,
     onClick: onClick,
     class: classnames('bio-properties-panel-group-header-button', classname),
     children: children
@@ -898,22 +865,21 @@ function CollapsibleEntry(props) {
     remove
   } = props;
   const [open, setOpen] = useState(shouldOpen);
-
   const toggleOpen = () => setOpen(!open);
-
   const {
     onShow
   } = useContext(LayoutContext);
-  const propertiesPanelContext = { ...useContext(LayoutContext),
+  const propertiesPanelContext = {
+    ...useContext(LayoutContext),
     onShow: useCallback(() => {
       setOpen(true);
-
       if (isFunction(onShow)) {
         onShow();
       }
     }, [onShow, setOpen])
-  }; // todo(pinussilvestrus): translate once we have a translate mechanism for the core
+  };
 
+  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
   const placeholderLabel = '<empty>';
   return jsxs("div", {
     "data-entry-id": id,
@@ -946,7 +912,8 @@ function CollapsibleEntry(props) {
             component: Component,
             id
           } = entry;
-          return createElement(Component, { ...entry,
+          return createElement(Component, {
+            ...entry,
             element: element,
             key: id
           });
@@ -960,13 +927,13 @@ function ListItem(props) {
   const {
     autoFocusEntry,
     autoOpen
-  } = props; // focus specified entry on auto open
+  } = props;
 
+  // focus specified entry on auto open
   useEffect(() => {
     if (autoOpen && autoFocusEntry) {
       const entry = query(`[data-entry-id="${autoFocusEntry}"]`);
       const focusableInput = query('.bio-properties-panel-input', entry);
-
       if (focusableInput) {
         if (isFunction(focusableInput.select)) {
           focusableInput.select();
@@ -978,18 +945,18 @@ function ListItem(props) {
   }, [autoOpen, autoFocusEntry]);
   return jsx("div", {
     class: "bio-properties-panel-list-item",
-    children: jsx(CollapsibleEntry, { ...props,
+    children: jsx(CollapsibleEntry, {
+      ...props,
       open: autoOpen
     })
   });
 }
 
 const noop$2 = () => {};
+
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
-
-
 function ListGroup(props) {
   const {
     add,
@@ -1009,20 +976,23 @@ function ListGroup(props) {
   const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
-  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen); // reset initial ordering when element changes (before first render)
+  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);
 
+  // reset initial ordering when element changes (before first render)
   if (elementChanged) {
     setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
-  } // keep ordering in sync to items - and open changes
-  // (0) set initial ordering from given items
+  }
 
+  // keep ordering in sync to items - and open changes
 
+  // (0) set initial ordering from given items
   useEffect(() => {
     if (!prevItems || !shouldSort) {
       setOrdering(createOrdering(items));
     }
-  }, [items, element]); // (1) items were added
+  }, [items, element]);
 
+  // (1) items were added
   useEffect(() => {
     if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
       let add = [];
@@ -1031,38 +1001,40 @@ function ListGroup(props) {
           add.push(item.id);
         }
       });
-      let newOrdering = ordering; // open if not open and configured
+      let newOrdering = ordering;
 
+      // open if not open and configured
       if (!open && shouldOpen) {
-        toggleOpen(); // if I opened and I should sort, then sort items
+        toggleOpen();
 
+        // if I opened and I should sort, then sort items
         if (shouldSort) {
           newOrdering = createOrdering(sortItems(items));
         }
-      } // add new items on top or bottom depending on sorting behavior
-
+      }
 
+      // add new items on top or bottom depending on sorting behavior
       newOrdering = newOrdering.filter(item => !add.includes(item));
-
       if (shouldSort) {
         newOrdering.unshift(...add);
       } else {
         newOrdering.push(...add);
       }
-
       setOrdering(newOrdering);
       setNewItemAdded(true);
     } else {
       setNewItemAdded(false);
     }
-  }, [items, open, shouldHandleEffects]); // (2) sort items on open if shouldSort is set
+  }, [items, open, shouldHandleEffects]);
 
+  // (2) sort items on open if shouldSort is set
   useEffect(() => {
     if (shouldSort && open && !newItemAdded) {
       setOrdering(createOrdering(sortItems(items)));
     }
-  }, [open, shouldSort]); // (3) items were deleted
+  }, [open, shouldSort]);
 
+  // (3) items were deleted
   useEffect(() => {
     if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
       let keep = [];
@@ -1073,14 +1045,14 @@ function ListGroup(props) {
       });
       setOrdering(keep);
     }
-  }, [items, shouldHandleEffects]); // set css class when group is sticky to top
+  }, [items, shouldHandleEffects]);
 
+  // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
-
   const toggleOpen = () => setOpen(!open);
-
   const hasItems = !!items.length;
-  const propertiesPanelContext = { ...useContext(LayoutContext),
+  const propertiesPanelContext = {
+    ...useContext(LayoutContext),
     onShow
   };
   return jsxs("div", {
@@ -1122,17 +1094,17 @@ function ListGroup(props) {
         value: propertiesPanelContext,
         children: ordering.map((o, index) => {
           const item = getItem(items, o);
-
           if (!item) {
             return;
           }
-
           const {
             id
-          } = item; // if item was added, open first or last item based on ordering
+          } = item;
 
+          // if item was added, open first or last item based on ordering
           const autoOpen = newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1);
-          return createElement(ListItem, { ...item,
+          return createElement(ListItem, {
+            ...item,
             autoOpen: autoOpen,
             element: element,
             index: index,
@@ -1142,20 +1114,19 @@ function ListGroup(props) {
       })
     })]
   });
-} // helpers ////////////////////
+}
+
+// helpers ////////////////////
 
 /**
  * Sorts given items alphanumeric by label
  */
-
 function sortItems(items) {
   return sortBy(items, i => i.label.toLowerCase());
 }
-
 function getItem(items, id) {
   return find(items, i => i.id === id);
 }
-
 function createOrdering(items) {
   return items.map(i => i.id);
 }
@@ -1168,7 +1139,6 @@ function Description(props) {
   } = props;
   const contextDescription = useDescriptionContext(forId, element);
   const description = value || contextDescription;
-
   if (description) {
     return jsx("div", {
       class: "bio-properties-panel-description",
@@ -1188,23 +1158,19 @@ function Checkbox(props) {
     onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
-
   const handleChangeCallback = ({
     target
   }) => {
     onChange(target.checked);
   };
-
   const handleChange = e => {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   const ref = useShowEntryEvent(id);
@@ -1228,6 +1194,7 @@ function Checkbox(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1240,8 +1207,6 @@ function Checkbox(props) {
  * @param {Function} props.onBlur
  * @param {boolean} [props.disabled]
  */
-
-
 function CheckboxEntry(props) {
   const {
     element,
@@ -1279,7 +1244,9 @@ function CheckboxEntry(props) {
 }
 function isEdited$7(node) {
   return node && !!node.checked;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
@@ -1288,11 +1255,14 @@ function prefixId$7(id) {
 const useBufferedFocus = function (editor, ref) {
   const [buffer, setBuffer] = useState(undefined);
   ref.current = useMemo(() => ({
-    focus: argument => {
+    focus: offset => {
       if (editor) {
-        editor.focus(argument);
+        editor.focus(offset);
       } else {
-        setBuffer(argument);
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
       }
     }
   }), [editor]);
@@ -1303,7 +1273,6 @@ const useBufferedFocus = function (editor, ref) {
     }
   }, [editor, buffer]);
 };
-
 const CodeEditor = forwardRef((props, ref) => {
   const {
     value,
@@ -1311,6 +1280,7 @@ const CodeEditor = forwardRef((props, ref) => {
     onFeelToggle,
     onLint = () => {},
     disabled,
+    tooltipContainer,
     variables
   } = props;
   const inputRef = useRef();
@@ -1323,30 +1293,28 @@ 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
      */
-
     const onKeyDown = e => {
       if (e.key !== 'Backspace' || !editor) {
         return;
       }
-
       const selection = editor.getSelection();
       const range = selection.ranges[selection.mainIndex];
-
       if (range.from === 0 && range.to === 0) {
         onFeelToggle();
       }
     };
-
     editor = new FeelEditor({
       container: inputRef.current,
       onChange: handleInput,
       onKeyDown: onKeyDown,
       onLint: onLint,
+      tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables
     });
@@ -1356,24 +1324,26 @@ const CodeEditor = forwardRef((props, ref) => {
       inputRef.current.innerHTML = '';
       setEditor(null);
     };
-  }, [variables]);
+  }, []);
   useEffect(() => {
     if (!editor) {
       return;
     }
-
     if (value === localValue) {
       return;
     }
-
     editor.setValue(value);
     setLocalValue(value);
   }, [value]);
-
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setVariables(variables);
+  }, [variables]);
   const handleClick = () => {
     ref.current.focus();
   };
-
   return jsx("div", {
     class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null),
     children: jsx("div", {
@@ -1389,11 +1359,9 @@ function FeelIndicator(props) {
   const {
     active
   } = props;
-
   if (!active) {
     return null;
   }
-
   return jsx("span", {
     class: "bio-properties-panel-feel-indicator",
     children: "="
@@ -1401,13 +1369,12 @@ function FeelIndicator(props) {
 }
 
 const noop$1 = () => {};
+
 /**
  * @param {Object} props
  * @param {Object} props.label
  * @param {String} props.feel
  */
-
-
 function FeelIcon(props) {
   const {
     label,
@@ -1418,15 +1385,14 @@ function FeelIcon(props) {
   } = props;
   const feelRequiredLabel = ' must be a FEEL expression';
   const feelOptionalLabel = ' can optionally be a FEEL expression';
-
   const handleClick = e => {
-    onClick(e); // when pointer event was created from keyboard, keep focus on button
+    onClick(e);
 
+    // when pointer event was created from keyboard, keep focus on button
     if (!e.pointerType) {
       e.stopPropagation();
     }
   };
-
   return jsx("button", {
     class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
@@ -1437,7 +1403,6 @@ function FeelIcon(props) {
 }
 
 const noop = () => {};
-
 function FeelTextfield(props) {
   const {
     debounce,
@@ -1449,6 +1414,7 @@ function FeelTextfield(props) {
     value = '',
     disabled = false,
     variables,
+    tooltipContainer,
     OptionalComponent = OptionalFeelInput
   } = props;
   const [localValue, _setLocalValue] = useState(value);
@@ -1457,66 +1423,54 @@ function FeelTextfield(props) {
   const feelActive = localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const [focus, _setFocus] = useState(undefined);
-
   const setFocus = (offset = 0) => {
-    const hasFocus = containerRef.current.contains(document.activeElement); // Keep caret position if it is already focused, otherwise focus at the end
+    const hasFocus = containerRef.current.contains(document.activeElement);
 
+    // Keep caret position if it is already focused, otherwise focus at the end
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
-
     _setFocus(position + offset);
   };
-
   const handleInputCallback = useMemo(() => {
     return debounce(newValue => {
       onInput(newValue);
     });
   }, [onInput, debounce]);
-
   const setLocalValue = newValue => {
     _setLocalValue(newValue);
-
     if (!newValue || newValue === '=') {
       handleInputCallback(undefined);
     } else {
       handleInputCallback(newValue);
     }
   };
-
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
       return;
     }
-
     if (!feelActive) {
       setLocalValue('=' + localValue);
     } else {
       setLocalValue(feelOnlyValue);
     }
   });
-
   const handleLocalInput = newValue => {
     if (feelActive) {
       newValue = '=' + newValue;
     }
-
     if (newValue === localValue) {
       return;
     }
-
     setLocalValue(newValue);
-
     if (!feelActive && newValue.startsWith('=')) {
       // focus is behind `=` sign that will be removed
       setFocus(-1);
     }
   };
-
   const handleLint = useStaticCallback(lint => {
     if (!(lint && lint.length)) {
       onError(undefined);
       return;
     }
-
     const error = lint[0];
     const message = `${error.source}: ${error.message}`;
     onError(message);
@@ -1524,40 +1478,35 @@ function FeelTextfield(props) {
   useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
-
       _setFocus(undefined);
     }
   }, [focus]);
   useEffect(() => {
     if (value === localValue) {
       return;
-    } // External value change removed content => keep FEEL configuration
-
+    }
 
+    // External value change removed content => keep FEEL configuration
     if (!value) {
       setLocalValue(feelActive ? '=' : '');
       return;
     }
-
     setLocalValue(value);
-  }, [value]); // copy-paste integration
+  }, [value]);
 
+  // copy-paste integration
   useEffect(() => {
     const copyHandler = event => {
       if (!feelActive) {
         return;
       }
-
       event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
     };
-
     const pasteHandler = event => {
       if (feelActive) {
         return;
       }
-
       const data = event.clipboardData.getData('application/FEEL');
-
       if (data) {
         setTimeout(() => {
           handleFeelToggle();
@@ -1565,7 +1514,6 @@ function FeelTextfield(props) {
         });
       }
     };
-
     containerRef.current.addEventListener('copy', copyHandler);
     containerRef.current.addEventListener('cut', copyHandler);
     containerRef.current.addEventListener('paste', pasteHandler);
@@ -1606,8 +1554,10 @@ function FeelTextfield(props) {
         onLint: handleLint,
         value: feelOnlyValue,
         variables: variables,
-        ref: editorRef
-      }) : jsx(OptionalComponent, { ...props,
+        ref: editorRef,
+        tooltipContainer: tooltipContainer
+      }) : jsx(OptionalComponent, {
+        ...props,
         onInput: handleLocalInput,
         value: localValue,
         ref: editorRef
@@ -1615,7 +1565,6 @@ function FeelTextfield(props) {
     })]
   });
 }
-
 const OptionalFeelInput = forwardRef((props, ref) => {
   const {
     id,
@@ -1625,24 +1574,21 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef(); // To be consistent with the FEEL editor, set focus at start of input
-  // this ensures clean editing experience when switching with the keyboard
+  const inputRef = useRef();
 
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
   ref.current = {
     focus: position => {
       const input = inputRef.current;
-
       if (!input) {
         return;
       }
-
       input.focus();
-
       if (typeof position === 'number') {
         if (position > value.length) {
           position = value.length;
         }
-
         input.setSelectionRange(position, position);
       }
     }
@@ -1671,17 +1617,16 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef(); // To be consistent with the FEEL editor, set focus at start of input
-  // this ensures clean editing experience when switching with the keyboard
+  const inputRef = useRef();
 
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
   ref.current = {
     focus: () => {
       const input = inputRef.current;
-
       if (!input) {
         return;
       }
-
       input.focus();
       input.setSelectionRange(0, 0);
     }
@@ -1701,6 +1646,7 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     value: value || ''
   });
 });
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1713,7 +1659,6 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
  * @param {Function} props.setValue
  * @param {Function} props.validate
  */
-
 function FeelEntry(props) {
   const {
     element,
@@ -1725,6 +1670,7 @@ function FeelEntry(props) {
     label,
     getValue,
     setValue,
+    tooltipContainer,
     validate,
     show = noop,
     example,
@@ -1745,11 +1691,9 @@ function FeelEntry(props) {
   }, [value]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
-
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-
     if (newValidationError) {
       setCachedInvalidValue(newValue);
     } else {
@@ -1758,17 +1702,14 @@ function FeelEntry(props) {
         setValue(newValue);
       }
     }
-
     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", {
@@ -1788,6 +1729,7 @@ function FeelEntry(props) {
       show: show,
       value: value,
       variables: variables,
+      tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -1799,6 +1741,7 @@ function FeelEntry(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1813,7 +1756,6 @@ function FeelEntry(props) {
  * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
-
 function FeelTextArea(props) {
   return jsx(FeelEntry, {
     class: "bio-properties-panel-feel-textarea",
@@ -1823,7 +1765,9 @@ function FeelTextArea(props) {
 }
 function isEdited$6(node) {
   return node && (!!node.value || node.classList.contains('edited'));
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
@@ -1845,9 +1789,7 @@ function List(props) {
   } = props;
   const [open, setOpen] = useState(!!shouldOpen);
   const hasItems = !!items.length;
-
   const toggleOpen = () => hasItems && setOpen(!open);
-
   const opening = !usePrevious(open) && open;
   const elementChanged = usePrevious(element) !== element;
   const shouldReset = opening || elementChanged;
@@ -1858,19 +1800,17 @@ function List(props) {
       setOpen(false);
     }
   }, [open, hasItems]);
+
   /**
    * @param {MouseEvent} event
    */
-
   function addItem(event) {
     event.stopPropagation();
     onAdd();
-
     if (!open) {
       setOpen(true);
     }
   }
-
   return jsxs("div", {
     "data-entry-id": id,
     class: classnames('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
@@ -1903,7 +1843,8 @@ function List(props) {
           })
         })]
       })]
-    }), hasItems && jsx(ItemsList, { ...restProps,
+    }), hasItems && jsx(ItemsList, {
+      ...restProps,
       autoFocusEntry: autoFocusEntry,
       component: component,
       element: element,
@@ -1915,7 +1856,6 @@ function List(props) {
     })]
   });
 }
-
 function ItemsList(props) {
   const {
     autoFocusEntry,
@@ -1933,11 +1873,13 @@ function ItemsList(props) {
   useEffect(() => {
     if (newItem && autoFocusEntry) {
       // (0) select the parent entry (containing all list items)
-      const entry = query(`[data-entry-id="${id}"]`); // (1) select the first input or a custom element to be focussed
+      const entry = query(`[data-entry-id="${id}"]`);
 
+      // (1) select the first input or a custom element to be focussed
       const selector = typeof autoFocusEntry === 'boolean' ? '.bio-properties-panel-input' : autoFocusEntry;
-      const focusableInput = query(selector, entry); // (2) set focus
+      const focusableInput = query(selector, entry);
 
+      // (2) set focus
       if (focusableInput) {
         if (isFunction(focusableInput.select)) {
           focusableInput.select();
@@ -1953,7 +1895,8 @@ function ItemsList(props) {
       const key = getKey(item);
       return jsxs("li", {
         class: "bio-properties-panel-list-entry-item",
-        children: [jsx(Component, { ...restProps,
+        children: [jsx(Component, {
+          ...restProps,
           element: element,
           id: id,
           index: index,
@@ -1970,6 +1913,7 @@ function ItemsList(props) {
     })
   });
 }
+
 /**
  * Place new items in the beginning of the list and sort the rest with provided function.
  *
@@ -1979,41 +1923,36 @@ function ItemsList(props) {
  * @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()); // (1) Reset and optionally sort.
+  const itemsRef = useRef(currentItems.slice());
 
+  // (1) Reset and optionally sort.
   if (shouldReset) {
     itemsRef.current = currentItems.slice();
-
     if (compareFn) {
       itemsRef.current.sort(compareFn);
     }
   } else {
-    const items = itemsRef.current; // (2) Add new item to the list.
+    const items = itemsRef.current;
 
+    // (2) Add new item to the list.
     for (const item of currentItems) {
       if (!items.includes(item)) {
         // Unshift or push depending on whether we have a compareFn
         compareFn ? items.unshift(item) : items.push(item);
       }
-    } // (3) Filter out removed items.
-
+    }
 
+    // (3) Filter out removed items.
     itemsRef.current = items.filter(item => currentItems.includes(item));
   }
-
   return itemsRef.current;
 }
-
 function useNewItems(items = [], shouldReset) {
   const previousItems = usePrevious(items.slice()) || [];
-
   if (shouldReset) {
     return [];
   }
-
   return previousItems ? items.filter(item => !previousItems.includes(item)) : [];
 }
 
@@ -2038,23 +1977,19 @@ function NumberField(props) {
         validity,
         value
       } = event.target;
-
       if (validity.valid) {
         onInput(value ? parseFloat(value) : undefined);
       }
     });
   }, [onInput, debounce]);
-
   const handleInput = e => {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxs("div", {
@@ -2081,6 +2016,7 @@ function NumberField(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Boolean} props.debounce
@@ -2097,8 +2033,6 @@ function NumberField(props) {
  * @param {Function} props.onBlur
  * @param {String} props.step
  */
-
-
 function NumberFieldEntry(props) {
   const {
     debounce,
@@ -2140,7 +2074,9 @@ function NumberFieldEntry(props) {
 }
 function isEdited$5(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
@@ -2159,23 +2095,19 @@ function Select(props) {
   } = props;
   const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = useState(value);
-
   const handleChangeCallback = ({
     target
   }) => {
     onChange(target.value);
   };
-
   const handleChange = e => {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxs("div", {
@@ -2204,6 +2136,7 @@ function Select(props) {
     })]
   });
 }
+
 /**
  * @param {object} props
  * @param {object} props.element
@@ -2217,8 +2150,6 @@ function Select(props) {
  * @param {Function} props.getOptions
  * @param {boolean} [props.disabled]
  */
-
-
 function SelectEntry(props) {
   const {
     element,
@@ -2259,7 +2190,9 @@ function SelectEntry(props) {
 }
 function isEdited$4(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
@@ -2283,17 +2216,14 @@ function Simple(props) {
       target
     }) => setValue(target.value.length ? target.value : undefined));
   }, [setValue, debounce]);
-
   const handleInput = e => {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsx("div", {
@@ -2316,7 +2246,9 @@ function Simple(props) {
 }
 function isEdited$3(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
@@ -2342,17 +2274,14 @@ function TextArea(props) {
       target
     }) => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
-
   const handleInput = e => {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxs("div", {
@@ -2376,6 +2305,7 @@ function TextArea(props) {
     })]
   });
 }
+
 /**
  * @param {object} props
  * @param {object} props.element
@@ -2391,8 +2321,6 @@ function TextArea(props) {
  * @param {boolean} props.monospace
  * @param {boolean} [props.disabled]
  */
-
-
 function TextAreaEntry(props) {
   const {
     element,
@@ -2436,7 +2364,9 @@ function TextAreaEntry(props) {
 }
 function isEdited$2(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
@@ -2460,17 +2390,14 @@ function Textfield(props) {
       target
     }) => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
-
   const handleInput = e => {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxs("div", {
@@ -2495,6 +2422,7 @@ function Textfield(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -2509,8 +2437,6 @@ function Textfield(props) {
  * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
-
-
 function TextfieldEntry(props) {
   const {
     element,
@@ -2536,27 +2462,21 @@ function TextfieldEntry(props) {
       setLocalError(newValidationError);
     }
   }, [value]);
-
   const onInput = newValue => {
     let newValidationError = null;
-
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-
     if (newValidationError) {
       setCachedInvalidValue(newValue);
     } else {
       setValue(newValue);
     }
-
     setLocalError(newValidationError);
   };
-
   if (previousValue === value && localError) {
     value = cachedInvalidValue;
   }
-
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -2582,7 +2502,9 @@ function TextfieldEntry(props) {
 }
 function isEdited$1(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$1(id) {
   return `bio-properties-panel-${id}`;
@@ -2599,21 +2521,17 @@ function ToggleSwitch(props) {
     onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
-
   const handleInputCallback = async () => {
     onInput(!value);
   };
-
   const handleInput = e => {
     handleInputCallback();
     setLocalValue(e.target.value);
   };
-
   useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxs("div", {
@@ -2645,6 +2563,7 @@ function ToggleSwitch(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -2657,8 +2576,6 @@ function ToggleSwitch(props) {
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
-
-
 function ToggleSwitchEntry(props) {
   const {
     element,
@@ -2692,7 +2609,9 @@ function ToggleSwitchEntry(props) {
 }
 function isEdited(node) {
   return node && !!node.checked;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId(id) {
   return `bio-properties-panel-${id}`;