@bpmn-io/properties-panel 0.24.0 → 0.25.0

package/dist/index.js

@@ -17,52 +17,50 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var FeelEditor__default = /*#__PURE__*/_interopDefaultLegacy(FeelEditor);
 
 var ArrowIcon = function ArrowIcon(props) {
-  return jsxRuntime.jsx("svg", { ...props,
+  return jsxRuntime.jsx("svg", {
+    ...props,
     children: jsxRuntime.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 jsxRuntime.jsx("svg", { ...props,
+  return jsxRuntime.jsx("svg", {
+    ...props,
     children: jsxRuntime.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 jsxRuntime.jsx("svg", { ...props,
+  return jsxRuntime.jsx("svg", {
+    ...props,
     children: jsxRuntime.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 jsxRuntime.jsx("svg", { ...props,
+  return jsxRuntime.jsx("svg", {
+    ...props,
     children: jsxRuntime.jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
@@ -71,16 +69,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 jsxRuntime.jsxs("svg", { ...props,
+  return jsxRuntime.jsxs("svg", {
+    ...props,
     children: [jsxRuntime.jsx("path", {
       d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
       fill: "currentColor"
@@ -95,15 +92,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 jsxRuntime.jsxs("svg", { ...props,
+  return jsxRuntime.jsxs("svg", {
+    ...props,
     children: [jsxRuntime.jsx("path", {
       d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
       fill: "currentColor"
@@ -115,7 +111,6 @@ var FeelOptionalIcon = function FeelOptionalIcon(props) {
     })]
   });
 };
-
 FeelOptionalIcon.defaultProps = {
   viewBox: "0 0 16 16",
   fill: "none",
@@ -220,7 +215,6 @@ const LayoutContext = preact.createContext({
  *
  * @returns {string}
  */
-
 function useDescriptionContext(id, element) {
   const {
     getDescriptionForId
@@ -241,28 +235,25 @@ function useError(id) {
  * @param {string} event
  * @param {Function} callback
  */
-
 function useEvent(event, callback, eventBus) {
   const eventContext = hooks.useContext(EventContext);
-
   if (!eventBus) {
     ({
       eventBus
     } = eventContext);
   }
+  const didMount = hooks.useRef(false);
 
-  const didMount = hooks.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
   hooks.useEffect(() => {
     if (eventBus && didMount.current) {
       eventBus.on(event, callback);
     }
-
     didMount.current = true;
     return () => {
       if (eventBus) {
@@ -273,6 +264,7 @@ function useEvent(event, callback, eventBus) {
 }
 
 const KEY_LENGTH = 6;
+
 /**
  * Create a persistent key factory for plain objects without id.
  *
@@ -292,21 +284,16 @@ const KEY_LENGTH = 6;
  * @param {any[]} dependencies
  * @returns {(element: object) => string}
  */
-
 function useKeyFactory(dependencies = []) {
   const map = hooks.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;
 }
 
@@ -325,7 +312,6 @@ function useKeyFactory(dependencies = []) {
  *
  * @returns {[ any, Function ]}
  */
-
 function useLayoutState(path, defaultValue) {
   const {
     getLayoutForKey,
@@ -333,14 +319,13 @@ function useLayoutState(path, defaultValue) {
   } = hooks.useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
   const [value, set] = hooks.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];
 }
 
@@ -366,7 +351,6 @@ function usePrevious(value) {
  *
  * @returns {import('preact').Ref}
  */
-
 function useShowEntryEvent(id) {
   const {
     onShow
@@ -376,7 +360,6 @@ function useShowEntryEvent(id) {
   const onShowEntry = hooks.useCallback(event => {
     if (event.id === id) {
       onShow();
-
       if (!focus.current) {
         focus.current = true;
       }
@@ -387,11 +370,9 @@ function useShowEntryEvent(id) {
       if (minDash.isFunction(ref.current.focus)) {
         ref.current.focus();
       }
-
       if (minDash.isFunction(ref.current.select)) {
         ref.current.select();
       }
-
       focus.current = false;
     }
   });
@@ -414,17 +395,15 @@ function useShowEntryEvent(id) {
  * @param {string} scrollContainerSelector
  * @param {setSticky} setSticky
  */
-
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   hooks.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 = minDom.query(scrollContainerSelector);
       observer = new Observer(entries => {
@@ -442,9 +421,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);
@@ -467,7 +446,6 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
  * @param {Function} callback function with changing reference
  * @returns {Function} static function reference
  */
-
 function useStaticCallback(callback) {
   const callbackRef = hooks.useRef(callback);
   callbackRef.current = callback;
@@ -485,12 +463,11 @@ function Group(props) {
   const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
-
   const toggleOpen = () => setOpen(!open);
-
   const [edited, setEdited] = hooks.useState(false);
-  const [sticky, setSticky] = hooks.useState(false); // set edited state depending on all entries
+  const [sticky, setSticky] = hooks.useState(false);
 
+  // set edited state depending on all entries
   hooks.useEffect(() => {
     const hasOneEditedEntry = entries.find(entry => {
       const {
@@ -498,19 +475,19 @@ function Group(props) {
         isEdited
       } = entry;
       const entryNode = minDom.query(`[data-entry-id="${id}"]`);
-
       if (!minDash.isFunction(isEdited) || !entryNode) {
         return false;
       }
-
       const inputNode = minDom.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 = { ...hooks.useContext(LayoutContext),
+  const propertiesPanelContext = {
+    ...hooks.useContext(LayoutContext),
     onShow
   };
   return jsxRuntime.jsxs("div", {
@@ -543,7 +520,8 @@ function Group(props) {
             component: Component,
             id
           } = entry;
-          return preact.createElement(Component, { ...entry,
+          return preact.createElement(Component, {
+            ...entry,
             element: element,
             key: id
           });
@@ -552,7 +530,6 @@ function Group(props) {
     })]
   });
 }
-
 function DataMarker() {
   return jsxRuntime.jsx("div", {
     title: "Section contains data",
@@ -591,6 +568,7 @@ const DEFAULT_LAYOUT = {
   open: true
 };
 const DEFAULT_DESCRIPTION = {};
+
 /**
  * @typedef { {
  *    component: import('preact').Component,
@@ -658,7 +636,6 @@ const DEFAULT_DESCRIPTION = {};
  * @param {Function} [props.descriptionLoaded]
  * @param {Object} [props.eventBus]
  */
-
 function PropertiesPanel(props) {
   const {
     element,
@@ -670,52 +647,46 @@ function PropertiesPanel(props) {
     descriptionConfig = {},
     descriptionLoaded,
     eventBus
-  } = props; // set-up layout context
+  } = props;
 
+  // set-up layout context
   const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
   hooks.useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
     }
   }, [layout, layoutChanged]);
-
   const getLayoutForKey = (key, defaultValue) => {
     return minDash.get(layout, key, defaultValue);
   };
-
   const setLayoutForKey = (key, config) => {
     const newLayout = minDash.assign({}, layout);
     minDash.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] = hooks.useState({});
-
   const onSetErrors = ({
     errors
   }) => setErrors(errors);
-
   useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
   const errorsContext = {
     errors
@@ -725,19 +696,21 @@ function PropertiesPanel(props) {
   };
   const propertiesPanelContext = {
     element
-  }; // empty state
+  };
 
+  // empty state
   if (placeholderProvider && !element) {
-    return jsxRuntime.jsx(Placeholder, { ...placeholderProvider.getEmpty()
+    return jsxRuntime.jsx(Placeholder, {
+      ...placeholderProvider.getEmpty()
     });
-  } // multiple state
-
+  }
 
+  // multiple state
   if (placeholderProvider && minDash.isArray(element)) {
-    return jsxRuntime.jsx(Placeholder, { ...placeholderProvider.getMultiple()
+    return jsxRuntime.jsx(Placeholder, {
+      ...placeholderProvider.getMultiple()
     });
   }
-
   return jsxRuntime.jsx(LayoutContext.Provider, {
     value: propertiesPanelContext,
     children: jsxRuntime.jsx(ErrorsContext.Provider, {
@@ -760,7 +733,8 @@ function PropertiesPanel(props) {
                     component: Component = Group,
                     id
                   } = group;
-                  return preact.createElement(Component, { ...group,
+                  return preact.createElement(Component, {
+                    ...group,
                     key: id,
                     element: element
                   });
@@ -772,16 +746,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
   };
 }
@@ -795,24 +772,19 @@ function DropdownButton(props) {
   const dropdownRef = hooks.useRef(null);
   const menuRef = hooks.useRef(null);
   const [open, setOpen] = hooks.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 jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-dropdown-button', {
@@ -830,7 +802,6 @@ function DropdownButton(props) {
     })]
   });
 }
-
 function MenuItem({
   item,
   onClick
@@ -840,7 +811,6 @@ function MenuItem({
       class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
     });
   }
-
   if (item.action) {
     return jsxRuntime.jsx("button", {
       class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
@@ -848,19 +818,17 @@ function MenuItem({
       children: item.entry
     });
   }
-
   return jsxRuntime.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) {
   hooks.useEffect(() => {
     /**
@@ -870,10 +838,8 @@ function useGlobalClick(ignoredElements, callback) {
       if (ignoredElements.some(element => element && element.contains(event.target))) {
         return;
       }
-
       callback();
     }
-
     document.addEventListener('click', listener, {
       capture: true
     });
@@ -890,7 +856,8 @@ function HeaderButton(props) {
     onClick = () => {},
     ...otherProps
   } = props;
-  return jsxRuntime.jsx("button", { ...otherProps,
+  return jsxRuntime.jsx("button", {
+    ...otherProps,
     onClick: onClick,
     class: classnames__default["default"]('bio-properties-panel-group-header-button', classname),
     children: children
@@ -907,22 +874,21 @@ function CollapsibleEntry(props) {
     remove
   } = props;
   const [open, setOpen] = hooks.useState(shouldOpen);
-
   const toggleOpen = () => setOpen(!open);
-
   const {
     onShow
   } = hooks.useContext(LayoutContext);
-  const propertiesPanelContext = { ...hooks.useContext(LayoutContext),
+  const propertiesPanelContext = {
+    ...hooks.useContext(LayoutContext),
     onShow: hooks.useCallback(() => {
       setOpen(true);
-
       if (minDash.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 jsxRuntime.jsxs("div", {
     "data-entry-id": id,
@@ -955,7 +921,8 @@ function CollapsibleEntry(props) {
             component: Component,
             id
           } = entry;
-          return preact.createElement(Component, { ...entry,
+          return preact.createElement(Component, {
+            ...entry,
             element: element,
             key: id
           });
@@ -969,13 +936,13 @@ function ListItem(props) {
   const {
     autoFocusEntry,
     autoOpen
-  } = props; // focus specified entry on auto open
+  } = props;
 
+  // focus specified entry on auto open
   hooks.useEffect(() => {
     if (autoOpen && autoFocusEntry) {
       const entry = minDom.query(`[data-entry-id="${autoFocusEntry}"]`);
       const focusableInput = minDom.query('.bio-properties-panel-input', entry);
-
       if (focusableInput) {
         if (minDash.isFunction(focusableInput.select)) {
           focusableInput.select();
@@ -987,18 +954,18 @@ function ListItem(props) {
   }, [autoOpen, autoFocusEntry]);
   return jsxRuntime.jsx("div", {
     class: "bio-properties-panel-list-item",
-    children: jsxRuntime.jsx(CollapsibleEntry, { ...props,
+    children: jsxRuntime.jsx(CollapsibleEntry, {
+      ...props,
       open: autoOpen
     })
   });
 }
 
 const noop$2 = () => {};
+
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
-
-
 function ListGroup(props) {
   const {
     add,
@@ -1018,20 +985,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
   hooks.useEffect(() => {
     if (!prevItems || !shouldSort) {
       setOrdering(createOrdering(items));
     }
-  }, [items, element]); // (1) items were added
+  }, [items, element]);
 
+  // (1) items were added
   hooks.useEffect(() => {
     if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
       let add = [];
@@ -1040,38 +1010,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
   hooks.useEffect(() => {
     if (shouldSort && open && !newItemAdded) {
       setOrdering(createOrdering(sortItems(items)));
     }
-  }, [open, shouldSort]); // (3) items were deleted
+  }, [open, shouldSort]);
 
+  // (3) items were deleted
   hooks.useEffect(() => {
     if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
       let keep = [];
@@ -1082,14 +1054,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 = { ...hooks.useContext(LayoutContext),
+  const propertiesPanelContext = {
+    ...hooks.useContext(LayoutContext),
     onShow
   };
   return jsxRuntime.jsxs("div", {
@@ -1131,17 +1103,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 preact.createElement(ListItem, { ...item,
+          return preact.createElement(ListItem, {
+            ...item,
             autoOpen: autoOpen,
             element: element,
             index: index,
@@ -1151,20 +1123,19 @@ function ListGroup(props) {
       })
     })]
   });
-} // helpers ////////////////////
+}
+
+// helpers ////////////////////
 
 /**
  * Sorts given items alphanumeric by label
  */
-
 function sortItems(items) {
   return minDash.sortBy(items, i => i.label.toLowerCase());
 }
-
 function getItem(items, id) {
   return minDash.find(items, i => i.id === id);
 }
-
 function createOrdering(items) {
   return items.map(i => i.id);
 }
@@ -1177,7 +1148,6 @@ function Description(props) {
   } = props;
   const contextDescription = useDescriptionContext(forId, element);
   const description = value || contextDescription;
-
   if (description) {
     return jsxRuntime.jsx("div", {
       class: "bio-properties-panel-description",
@@ -1197,23 +1167,19 @@ function Checkbox(props) {
     onBlur
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
-
   const handleChangeCallback = ({
     target
   }) => {
     onChange(target.checked);
   };
-
   const handleChange = e => {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   const ref = useShowEntryEvent(id);
@@ -1237,6 +1203,7 @@ function Checkbox(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1249,8 +1216,6 @@ function Checkbox(props) {
  * @param {Function} props.onBlur
  * @param {boolean} [props.disabled]
  */
-
-
 function CheckboxEntry(props) {
   const {
     element,
@@ -1288,7 +1253,9 @@ function CheckboxEntry(props) {
 }
 function isEdited$7(node) {
   return node && !!node.checked;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
@@ -1297,11 +1264,14 @@ function prefixId$7(id) {
 const useBufferedFocus = function (editor, ref) {
   const [buffer, setBuffer] = hooks.useState(undefined);
   ref.current = hooks.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]);
@@ -1312,7 +1282,6 @@ const useBufferedFocus = function (editor, ref) {
     }
   }, [editor, buffer]);
 };
-
 const CodeEditor = compat.forwardRef((props, ref) => {
   const {
     value,
@@ -1320,6 +1289,7 @@ const CodeEditor = compat.forwardRef((props, ref) => {
     onFeelToggle,
     onLint = () => {},
     disabled,
+    tooltipContainer,
     variables
   } = props;
   const inputRef = hooks.useRef();
@@ -1332,30 +1302,28 @@ const CodeEditor = compat.forwardRef((props, ref) => {
   });
   hooks.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__default["default"]({
       container: inputRef.current,
       onChange: handleInput,
       onKeyDown: onKeyDown,
       onLint: onLint,
+      tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables
     });
@@ -1365,24 +1333,26 @@ const CodeEditor = compat.forwardRef((props, ref) => {
       inputRef.current.innerHTML = '';
       setEditor(null);
     };
-  }, [variables]);
+  }, []);
   hooks.useEffect(() => {
     if (!editor) {
       return;
     }
-
     if (value === localValue) {
       return;
     }
-
     editor.setValue(value);
     setLocalValue(value);
   }, [value]);
-
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setVariables(variables);
+  }, [variables]);
   const handleClick = () => {
     ref.current.focus();
   };
-
   return jsxRuntime.jsx("div", {
     class: classnames__default["default"]('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null),
     children: jsxRuntime.jsx("div", {
@@ -1398,11 +1368,9 @@ function FeelIndicator(props) {
   const {
     active
   } = props;
-
   if (!active) {
     return null;
   }
-
   return jsxRuntime.jsx("span", {
     class: "bio-properties-panel-feel-indicator",
     children: "="
@@ -1410,13 +1378,12 @@ function FeelIndicator(props) {
 }
 
 const noop$1 = () => {};
+
 /**
  * @param {Object} props
  * @param {Object} props.label
  * @param {String} props.feel
  */
-
-
 function FeelIcon(props) {
   const {
     label,
@@ -1427,15 +1394,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 jsxRuntime.jsx("button", {
     class: classnames__default["default"]('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
@@ -1446,7 +1412,6 @@ function FeelIcon(props) {
 }
 
 const noop = () => {};
-
 function FeelTextfield(props) {
   const {
     debounce,
@@ -1458,6 +1423,7 @@ function FeelTextfield(props) {
     value = '',
     disabled = false,
     variables,
+    tooltipContainer,
     OptionalComponent = OptionalFeelInput
   } = props;
   const [localValue, _setLocalValue] = hooks.useState(value);
@@ -1466,66 +1432,54 @@ function FeelTextfield(props) {
   const feelActive = localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const [focus, _setFocus] = hooks.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 = hooks.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);
@@ -1533,40 +1487,35 @@ function FeelTextfield(props) {
   hooks.useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
-
       _setFocus(undefined);
     }
   }, [focus]);
   hooks.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
   hooks.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();
@@ -1574,7 +1523,6 @@ function FeelTextfield(props) {
         });
       }
     };
-
     containerRef.current.addEventListener('copy', copyHandler);
     containerRef.current.addEventListener('cut', copyHandler);
     containerRef.current.addEventListener('paste', pasteHandler);
@@ -1615,8 +1563,10 @@ function FeelTextfield(props) {
         onLint: handleLint,
         value: feelOnlyValue,
         variables: variables,
-        ref: editorRef
-      }) : jsxRuntime.jsx(OptionalComponent, { ...props,
+        ref: editorRef,
+        tooltipContainer: tooltipContainer
+      }) : jsxRuntime.jsx(OptionalComponent, {
+        ...props,
         onInput: handleLocalInput,
         value: localValue,
         ref: editorRef
@@ -1624,7 +1574,6 @@ function FeelTextfield(props) {
     })]
   });
 }
-
 const OptionalFeelInput = compat.forwardRef((props, ref) => {
   const {
     id,
@@ -1634,24 +1583,21 @@ const OptionalFeelInput = compat.forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = hooks.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 = hooks.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);
       }
     }
@@ -1680,17 +1626,16 @@ const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = hooks.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 = hooks.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);
     }
@@ -1710,6 +1655,7 @@ const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
     value: value || ''
   });
 });
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1722,7 +1668,6 @@ const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
  * @param {Function} props.setValue
  * @param {Function} props.validate
  */
-
 function FeelEntry(props) {
   const {
     element,
@@ -1734,6 +1679,7 @@ function FeelEntry(props) {
     label,
     getValue,
     setValue,
+    tooltipContainer,
     validate,
     show = noop,
     example,
@@ -1754,11 +1700,9 @@ function FeelEntry(props) {
   }, [value]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
-
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-
     if (newValidationError) {
       setCachedInvalidValue(newValue);
     } else {
@@ -1767,17 +1711,14 @@ function FeelEntry(props) {
         setValue(newValue);
       }
     }
-
     setValidationError(newValidationError);
   });
   const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
-
   if (previousValue === value && validationError) {
     value = cachedInvalidValue;
   }
-
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxRuntime.jsxs("div", {
@@ -1797,6 +1738,7 @@ function FeelEntry(props) {
       show: show,
       value: value,
       variables: variables,
+      tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -1808,6 +1750,7 @@ function FeelEntry(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1822,7 +1765,6 @@ function FeelEntry(props) {
  * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
-
 function FeelTextArea(props) {
   return jsxRuntime.jsx(FeelEntry, {
     class: "bio-properties-panel-feel-textarea",
@@ -1832,7 +1774,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}`;
@@ -1854,9 +1798,7 @@ function List(props) {
   } = props;
   const [open, setOpen] = hooks.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;
@@ -1867,19 +1809,17 @@ function List(props) {
       setOpen(false);
     }
   }, [open, hasItems]);
+
   /**
    * @param {MouseEvent} event
    */
-
   function addItem(event) {
     event.stopPropagation();
     onAdd();
-
     if (!open) {
       setOpen(true);
     }
   }
-
   return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
     class: classnames__default["default"]('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
@@ -1912,7 +1852,8 @@ function List(props) {
           })
         })]
       })]
-    }), hasItems && jsxRuntime.jsx(ItemsList, { ...restProps,
+    }), hasItems && jsxRuntime.jsx(ItemsList, {
+      ...restProps,
       autoFocusEntry: autoFocusEntry,
       component: component,
       element: element,
@@ -1924,7 +1865,6 @@ function List(props) {
     })]
   });
 }
-
 function ItemsList(props) {
   const {
     autoFocusEntry,
@@ -1942,11 +1882,13 @@ function ItemsList(props) {
   hooks.useEffect(() => {
     if (newItem && autoFocusEntry) {
       // (0) select the parent entry (containing all list items)
-      const entry = minDom.query(`[data-entry-id="${id}"]`); // (1) select the first input or a custom element to be focussed
+      const entry = minDom.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 = minDom.query(selector, entry); // (2) set focus
+      const focusableInput = minDom.query(selector, entry);
 
+      // (2) set focus
       if (focusableInput) {
         if (minDash.isFunction(focusableInput.select)) {
           focusableInput.select();
@@ -1962,7 +1904,8 @@ function ItemsList(props) {
       const key = getKey(item);
       return jsxRuntime.jsxs("li", {
         class: "bio-properties-panel-list-entry-item",
-        children: [jsxRuntime.jsx(Component, { ...restProps,
+        children: [jsxRuntime.jsx(Component, {
+          ...restProps,
           element: element,
           id: id,
           index: index,
@@ -1979,6 +1922,7 @@ function ItemsList(props) {
     })
   });
 }
+
 /**
  * Place new items in the beginning of the list and sort the rest with provided function.
  *
@@ -1988,41 +1932,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 = hooks.useRef(currentItems.slice()); // (1) Reset and optionally sort.
+  const itemsRef = hooks.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)) : [];
 }
 
@@ -2047,23 +1986,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);
   };
-
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxRuntime.jsxs("div", {
@@ -2090,6 +2025,7 @@ function NumberField(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Boolean} props.debounce
@@ -2106,8 +2042,6 @@ function NumberField(props) {
  * @param {Function} props.onBlur
  * @param {String} props.step
  */
-
-
 function NumberFieldEntry(props) {
   const {
     debounce,
@@ -2149,7 +2083,9 @@ function NumberFieldEntry(props) {
 }
 function isEdited$5(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
@@ -2168,23 +2104,19 @@ function Select(props) {
   } = props;
   const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = hooks.useState(value);
-
   const handleChangeCallback = ({
     target
   }) => {
     onChange(target.value);
   };
-
   const handleChange = e => {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxRuntime.jsxs("div", {
@@ -2213,6 +2145,7 @@ function Select(props) {
     })]
   });
 }
+
 /**
  * @param {object} props
  * @param {object} props.element
@@ -2226,8 +2159,6 @@ function Select(props) {
  * @param {Function} props.getOptions
  * @param {boolean} [props.disabled]
  */
-
-
 function SelectEntry(props) {
   const {
     element,
@@ -2268,7 +2199,9 @@ function SelectEntry(props) {
 }
 function isEdited$4(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
@@ -2292,17 +2225,14 @@ function Simple(props) {
       target
     }) => setValue(target.value.length ? target.value : undefined));
   }, [setValue, debounce]);
-
   const handleInput = e => {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxRuntime.jsx("div", {
@@ -2325,7 +2255,9 @@ function Simple(props) {
 }
 function isEdited$3(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
@@ -2351,17 +2283,14 @@ function TextArea(props) {
       target
     }) => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
-
   const handleInput = e => {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxRuntime.jsxs("div", {
@@ -2385,6 +2314,7 @@ function TextArea(props) {
     })]
   });
 }
+
 /**
  * @param {object} props
  * @param {object} props.element
@@ -2400,8 +2330,6 @@ function TextArea(props) {
  * @param {boolean} props.monospace
  * @param {boolean} [props.disabled]
  */
-
-
 function TextAreaEntry(props) {
   const {
     element,
@@ -2445,7 +2373,9 @@ function TextAreaEntry(props) {
 }
 function isEdited$2(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
@@ -2469,17 +2399,14 @@ function Textfield(props) {
       target
     }) => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
-
   const handleInput = e => {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxRuntime.jsxs("div", {
@@ -2504,6 +2431,7 @@ function Textfield(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -2518,8 +2446,6 @@ function Textfield(props) {
  * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
-
-
 function TextfieldEntry(props) {
   const {
     element,
@@ -2545,27 +2471,21 @@ function TextfieldEntry(props) {
       setLocalError(newValidationError);
     }
   }, [value]);
-
   const onInput = newValue => {
     let newValidationError = null;
-
     if (minDash.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 jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -2591,7 +2511,9 @@ function TextfieldEntry(props) {
 }
 function isEdited$1(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$1(id) {
   return `bio-properties-panel-${id}`;
@@ -2608,21 +2530,17 @@ function ToggleSwitch(props) {
     onBlur
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
-
   const handleInputCallback = async () => {
     onInput(!value);
   };
-
   const handleInput = e => {
     handleInputCallback();
     setLocalValue(e.target.value);
   };
-
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
-
     setLocalValue(value);
   }, [value]);
   return jsxRuntime.jsxs("div", {
@@ -2654,6 +2572,7 @@ function ToggleSwitch(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -2666,8 +2585,6 @@ function ToggleSwitch(props) {
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
-
-
 function ToggleSwitchEntry(props) {
   const {
     element,
@@ -2701,7 +2618,9 @@ function ToggleSwitchEntry(props) {
 }
 function isEdited(node) {
   return node && !!node.checked;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId(id) {
   return `bio-properties-panel-${id}`;