@bpmn-io/properties-panel 0.23.0 → 0.24.1

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",
@@ -1183,26 +1153,24 @@ function Checkbox(props) {
     label,
     onChange,
     disabled,
-    value = false
+    value = false,
+    onFocus,
+    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);
@@ -1212,6 +1180,8 @@ function Checkbox(props) {
       ref: ref,
       id: prefixId$7(id),
       name: id,
+      onFocus: onFocus,
+      onBlur: onBlur,
       type: "checkbox",
       class: "bio-properties-panel-input",
       onChange: handleChange,
@@ -1224,6 +1194,7 @@ function Checkbox(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1232,10 +1203,10 @@ function Checkbox(props) {
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {boolean} [props.disabled]
  */
-
-
 function CheckboxEntry(props) {
   const {
     element,
@@ -1244,7 +1215,9 @@ function CheckboxEntry(props) {
     label,
     getValue,
     setValue,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -1256,6 +1229,8 @@ function CheckboxEntry(props) {
       id: id,
       label: label,
       onChange: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: value
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -1269,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}`;
@@ -1278,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]);
@@ -1293,7 +1273,6 @@ const useBufferedFocus = function (editor, ref) {
     }
   }, [editor, buffer]);
 };
-
 const CodeEditor = forwardRef((props, ref) => {
   const {
     value,
@@ -1313,25 +1292,22 @@ 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,
@@ -1346,24 +1322,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", {
@@ -1379,11 +1357,9 @@ function FeelIndicator(props) {
   const {
     active
   } = props;
-
   if (!active) {
     return null;
   }
-
   return jsx("span", {
     class: "bio-properties-panel-feel-indicator",
     children: "="
@@ -1391,13 +1367,12 @@ function FeelIndicator(props) {
 }
 
 const noop$1 = () => {};
+
 /**
  * @param {Object} props
  * @param {Object} props.label
  * @param {String} props.feel
  */
-
-
 function FeelIcon(props) {
   const {
     label,
@@ -1408,15 +1383,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,
@@ -1427,7 +1401,6 @@ function FeelIcon(props) {
 }
 
 const noop = () => {};
-
 function FeelTextfield(props) {
   const {
     debounce,
@@ -1438,6 +1411,7 @@ function FeelTextfield(props) {
     feel,
     value = '',
     disabled = false,
+    variables,
     OptionalComponent = OptionalFeelInput
   } = props;
   const [localValue, _setLocalValue] = useState(value);
@@ -1446,66 +1420,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 carret 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);
@@ -1513,40 +1475,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();
@@ -1554,7 +1511,6 @@ function FeelTextfield(props) {
         });
       }
     };
-
     containerRef.current.addEventListener('copy', copyHandler);
     containerRef.current.addEventListener('cut', copyHandler);
     containerRef.current.addEventListener('paste', pasteHandler);
@@ -1594,9 +1550,10 @@ function FeelTextfield(props) {
         },
         onLint: handleLint,
         value: feelOnlyValue,
-        variables: props.variables,
+        variables: variables,
         ref: editorRef
-      }) : jsx(OptionalComponent, { ...props,
+      }) : jsx(OptionalComponent, {
+        ...props,
         onInput: handleLocalInput,
         value: localValue,
         ref: editorRef
@@ -1604,32 +1561,30 @@ function FeelTextfield(props) {
     })]
   });
 }
-
 const OptionalFeelInput = forwardRef((props, ref) => {
   const {
     id,
     disabled,
     onInput,
-    value
+    value,
+    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);
       }
     }
@@ -1644,8 +1599,8 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     disabled: disabled,
     class: "bio-properties-panel-input",
     onInput: e => onInput(e.target.value),
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
+    onFocus: onFocus,
+    onBlur: onBlur,
     value: value || ''
   });
 });
@@ -1654,19 +1609,20 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
-    value
+    value,
+    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);
     }
@@ -1681,11 +1637,12 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     disabled: disabled,
     class: "bio-properties-panel-input",
     onInput: e => onInput(e.target.value),
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
+    onFocus: onFocus,
+    onBlur: onBlur,
     value: value || ''
   });
 });
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1698,7 +1655,6 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
  * @param {Function} props.setValue
  * @param {Function} props.validate
  */
-
 function FeelEntry(props) {
   const {
     element,
@@ -1711,7 +1667,11 @@ function FeelEntry(props) {
     getValue,
     setValue,
     validate,
-    show = noop
+    show = noop,
+    example,
+    variables,
+    onFocus,
+    onBlur
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
@@ -1726,11 +1686,9 @@ function FeelEntry(props) {
   }, [value]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
-
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-
     if (newValidationError) {
       setCachedInvalidValue(newValue);
     } else {
@@ -1739,19 +1697,16 @@ 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 = temporaryError || validationError || localError;
+  const error = localError || temporaryError || validationError;
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -1763,10 +1718,12 @@ function FeelEntry(props) {
       label: label,
       onInput: onInput,
       onError: onError,
-      example: props.example,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      example: example,
       show: show,
       value: value,
-      variables: props.variables,
+      variables: variables,
       OptionalComponent: props.OptionalComponent
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -1778,6 +1735,7 @@ function FeelEntry(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1788,9 +1746,10 @@ function FeelEntry(props) {
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
-
 function FeelTextArea(props) {
   return jsx(FeelEntry, {
     class: "bio-properties-panel-feel-textarea",
@@ -1800,7 +1759,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}`;
@@ -1822,9 +1783,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;
@@ -1835,19 +1794,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' : ''),
@@ -1880,7 +1837,8 @@ function List(props) {
           })
         })]
       })]
-    }), hasItems && jsx(ItemsList, { ...restProps,
+    }), hasItems && jsx(ItemsList, {
+      ...restProps,
       autoFocusEntry: autoFocusEntry,
       component: component,
       element: element,
@@ -1892,7 +1850,6 @@ function List(props) {
     })]
   });
 }
-
 function ItemsList(props) {
   const {
     autoFocusEntry,
@@ -1910,11 +1867,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();
@@ -1930,7 +1889,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,
@@ -1947,6 +1907,7 @@ function ItemsList(props) {
     })
   });
 }
+
 /**
  * Place new items in the beginning of the list and sort the rest with provided function.
  *
@@ -1956,41 +1917,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)) : [];
 }
 
@@ -2004,7 +1960,9 @@ function NumberField(props) {
     min,
     onInput,
     step,
-    value = ''
+    value = '',
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = useMemo(() => {
@@ -2013,23 +1971,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", {
@@ -2049,11 +2003,14 @@ function NumberField(props) {
       max: max,
       min: min,
       onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
       step: step,
       value: localValue
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Boolean} props.debounce
@@ -2066,10 +2023,10 @@ function NumberField(props) {
  * @param {String} props.max
  * @param {String} props.min
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {String} props.step
  */
-
-
 function NumberFieldEntry(props) {
   const {
     debounce,
@@ -2082,7 +2039,9 @@ function NumberFieldEntry(props) {
     max,
     min,
     setValue,
-    step
+    step,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   return jsxs("div", {
@@ -2094,6 +2053,8 @@ function NumberFieldEntry(props) {
       id: id,
       label: label,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       max: max,
       min: min,
       step: step,
@@ -2107,7 +2068,9 @@ function NumberFieldEntry(props) {
 }
 function isEdited$5(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
@@ -2120,27 +2083,25 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = 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", {
@@ -2155,6 +2116,8 @@ function Select(props) {
       name: id,
       class: "bio-properties-panel-input",
       onInput: handleChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: localValue,
       disabled: disabled,
       children: options.map((option, idx) => {
@@ -2167,6 +2130,7 @@ function Select(props) {
     })]
   });
 }
+
 /**
  * @param {object} props
  * @param {object} props.element
@@ -2175,11 +2139,11 @@ function Select(props) {
  * @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]
  */
-
-
 function SelectEntry(props) {
   const {
     element,
@@ -2189,7 +2153,9 @@ function SelectEntry(props) {
     getValue,
     setValue,
     getOptions,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const options = getOptions(element);
@@ -2202,6 +2168,8 @@ function SelectEntry(props) {
       label: label,
       value: value,
       onChange: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       options: options,
       disabled: disabled
     }, element), error && jsx("div", {
@@ -2216,7 +2184,9 @@ function SelectEntry(props) {
 }
 function isEdited$4(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
@@ -2240,17 +2210,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", {
@@ -2273,7 +2240,9 @@ function Simple(props) {
 }
 function isEdited$3(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
@@ -2288,7 +2257,9 @@ function TextArea(props) {
     onInput,
     value = '',
     disabled,
-    monospace
+    monospace,
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
@@ -2297,17 +2268,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", {
@@ -2323,14 +2291,15 @@ function TextArea(props) {
       spellCheck: "false",
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
       onInput: handleInput,
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
+      onFocus: onFocus,
+      onBlur: onBlur,
       rows: rows,
       value: localValue,
       disabled: disabled
     })]
   });
 }
+
 /**
  * @param {object} props
  * @param {object} props.element
@@ -2340,12 +2309,12 @@ function TextArea(props) {
  * @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 {boolean} [props.disabled]
  */
-
-
 function TextAreaEntry(props) {
   const {
     element,
@@ -2357,7 +2326,9 @@ function TextAreaEntry(props) {
     setValue,
     rows,
     monospace,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -2369,6 +2340,8 @@ function TextAreaEntry(props) {
       label: label,
       value: value,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       rows: rows,
       debounce: debounce,
       monospace: monospace,
@@ -2385,7 +2358,9 @@ function TextAreaEntry(props) {
 }
 function isEdited$2(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
@@ -2398,6 +2373,8 @@ function Textfield(props) {
     id,
     label,
     onInput,
+    onFocus,
+    onBlur,
     value = ''
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
@@ -2407,17 +2384,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", {
@@ -2436,12 +2410,13 @@ function Textfield(props) {
       disabled: disabled,
       class: "bio-properties-panel-input",
       onInput: handleInput,
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: localValue
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -2452,10 +2427,10 @@ function Textfield(props) {
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
-
-
 function TextfieldEntry(props) {
   const {
     element,
@@ -2466,7 +2441,9 @@ function TextfieldEntry(props) {
     label,
     getValue,
     setValue,
-    validate
+    validate,
+    onFocus,
+    onBlur
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
@@ -2479,27 +2456,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' : ''),
@@ -2510,6 +2481,8 @@ function TextfieldEntry(props) {
       id: id,
       label: label,
       onInput: onInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: value
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -2523,7 +2496,9 @@ function TextfieldEntry(props) {
 }
 function isEdited$1(node) {
   return node && !!node.value;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId$1(id) {
   return `bio-properties-panel-${id}`;
@@ -2535,24 +2510,22 @@ function ToggleSwitch(props) {
     label,
     onInput,
     value,
-    switcherLabel
+    switcherLabel,
+    onFocus,
+    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", {
@@ -2569,9 +2542,11 @@ function ToggleSwitch(props) {
           id: prefixId(id),
           class: "bio-properties-panel-input",
           type: "checkbox",
+          onFocus: onFocus,
+          onBlur: onBlur,
           name: id,
           onInput: handleInput,
-          checked: localValue
+          checked: !!localValue
         }), jsx("span", {
           class: "bio-properties-panel-toggle-switch__slider"
         })]
@@ -2582,6 +2557,7 @@ function ToggleSwitch(props) {
     })]
   });
 }
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -2591,9 +2567,9 @@ function ToggleSwitch(props) {
  * @param {String} props.switcherLabel
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
-
-
 function ToggleSwitchEntry(props) {
   const {
     element,
@@ -2602,7 +2578,9 @@ function ToggleSwitchEntry(props) {
     label,
     switcherLabel,
     getValue,
-    setValue
+    setValue,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   return jsxs("div", {
@@ -2613,6 +2591,8 @@ function ToggleSwitchEntry(props) {
       label: label,
       value: value,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       switcherLabel: switcherLabel
     }), jsx(Description, {
       forId: id,
@@ -2623,7 +2603,9 @@ function ToggleSwitchEntry(props) {
 }
 function isEdited(node) {
   return node && !!node.checked;
-} // helpers /////////////////
+}
+
+// helpers /////////////////
 
 function prefixId(id) {
   return `bio-properties-panel-${id}`;