@bpmn-io/properties-panel 0.11.0 → 0.13.1

package/dist/index.js

@@ -5,36 +5,135 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var hooks = require('../preact/hooks');
 var minDash = require('min-dash');
 var classnames = require('classnames');
+require('../preact/compat');
 var jsxRuntime = require('../preact/jsx-runtime');
 var minDom = require('min-dom');
 var preact = require('../preact');
-require('../preact/compat');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-/**
- * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
- */
+var ArrowIcon = function ArrowIcon(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,
+    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,
+    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,
+    children: jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274zM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2z",
+      fill: "#818798"
+    })
+  });
+};
+
+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,
+    children: [jsxRuntime.jsx("path", {
+      d: "M5.8 7.06V5.95h4.307v1.11H5.8zm0 3.071v-1.11h4.307v1.11H5.8z",
+      fill: "#505562"
+    }), jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268z",
+      fill: "#505562"
+    }), jsxRuntime.jsx("path", {
+      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304z",
+      fill: "#505562"
+    })]
+  });
+};
+
+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,
+    children: [jsxRuntime.jsx("path", {
+      d: "M5.845 7.04V5.93h4.307v1.11H5.845zm0 3.07V9h4.307v1.11H5.845z",
+      fill: "#505562"
+    }), jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z",
+      fill: "#505562"
+    })]
+  });
+};
+
+FeelOptionalIcon.defaultProps = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 
-/**
- * @param {Object} props
- * @param {Object} props.element,
- * @param {HeaderProvider} props.headerProvider
- */
 function Header(props) {
   const {
     element,
     headerProvider
   } = props;
   const {
+    getElementIcon,
+    getDocumentationRef,
     getElementLabel,
-    getTypeLabel,
-    getElementIcon
+    getTypeLabel
   } = headerProvider;
   const label = getElementLabel(element);
   const type = getTypeLabel(element);
+  const documentationRef = getDocumentationRef && getDocumentationRef(element);
   const ElementIcon = getElementIcon(element);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-header",
@@ -51,28 +150,154 @@ function Header(props) {
         title: type,
         class: "bio-properties-panel-header-type",
         children: type
-      }), getElementLabel(element) ? jsxRuntime.jsx("div", {
+      }), label ? jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-header-label",
         children: label
       }) : null]
+    }), jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-header-actions",
+      children: documentationRef ? jsxRuntime.jsx("a", {
+        rel: "noopener",
+        class: "bio-properties-panel-header-link",
+        href: documentationRef,
+        title: "Open documentation",
+        target: "_blank",
+        children: jsxRuntime.jsx(ExternalLinkIcon, {})
+      }) : null
     })]
   });
 }
 
+const DescriptionContext = preact.createContext({
+  description: {},
+  getDescriptionForId: () => {}
+});
+
 /**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
+ * @typedef {Function} <propertiesPanel.showEntry> callback
  *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
  */
+const EventContext = preact.createContext({
+  eventBus: null
+});
 
-function usePrevious(value) {
-  const ref = hooks.useRef();
+const LayoutContext = preact.createContext({
+  layout: {},
+  setLayout: () => {},
+  getLayoutForKey: () => {},
+  setLayoutForKey: () => {}
+});
+
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {djs.model.Base} element
+ *
+ * @returns {string}
+ */
+
+function useDescriptionContext(id, element) {
+  const {
+    getDescriptionForId
+  } = hooks.useContext(DescriptionContext);
+  return getDescriptionForId(id, element);
+}
+
+const DEFAULT_PRIORITY = 1000;
+/**
+ * Subscribe to an event.
+ *
+ * @param {string} event
+ * @param {Function} callback
+ * @param {number} [priority]
+ *
+ * @returns {import('preact').Ref}
+ */
+
+function useEvent(event, callback, priority = DEFAULT_PRIORITY) {
+  const {
+    eventBus
+  } = hooks.useContext(EventContext);
   hooks.useEffect(() => {
-    ref.current = value;
+    if (!eventBus) {
+      return;
+    }
+
+    eventBus.on(event, priority, callback);
+    return () => eventBus.off(event, callback);
+  }, [callback, event, eventBus, priority]);
+}
+
+const HIGH_PRIORITY = 10000;
+/**
+ * Buffer events and re-fire during passive effect phase.
+ *
+ * @param {string[]} bufferedEvents
+ * @param {Object} [eventBus]
+ */
+
+function useEventBuffer(bufferedEvents, eventBus) {
+  const buffer = hooks.useRef([]),
+        buffering = hooks.useRef(true);
+
+  const createCallback = event => data => {
+    if (buffering.current === true) {
+      buffer.current.unshift([event, data]);
+    }
+  }; // (1) buffer events
+
+
+  hooks.useEffect(() => {
+    if (!eventBus) {
+      return;
+    }
+
+    const listeners = bufferedEvents.map(event => {
+      return [event, createCallback(event)];
+    });
+    listeners.forEach(([event, callback]) => {
+      eventBus.on(event, HIGH_PRIORITY, callback);
+    });
+    return () => {
+      listeners.forEach(([event, callback]) => {
+        eventBus.off(event, callback);
+      });
+    };
+  }, [bufferedEvents, eventBus]); // (2) re-fire events
+
+  hooks.useEffect(() => {
+    if (!eventBus) {
+      return;
+    }
+
+    buffering.current = false;
+
+    while (buffer.current.length) {
+      const [event, data] = buffer.current.pop();
+      eventBus.fire(event, data);
+    }
+
+    buffering.current = true;
   });
-  return ref.current;
 }
 
 const KEY_LENGTH = 6;
@@ -113,18 +338,6 @@ function useKeyFactory(dependencies = []) {
   return getKey;
 }
 
-const DescriptionContext = preact.createContext({
-  description: {},
-  getDescriptionForId: () => {}
-});
-
-const LayoutContext = preact.createContext({
-  layout: {},
-  setLayout: () => {},
-  getLayoutForKey: () => {},
-  setLayoutForKey: () => {}
-});
-
 /**
  * Creates a state that persists in the global LayoutContext.
  *
@@ -160,81 +373,104 @@ function useLayoutState(path, defaultValue) {
 }
 
 /**
- * Accesses the global DescriptionContext and returns a description for a given id and element.
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
  *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const description = useDescriptionContext('input1', element);
- * }
- * ```
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ */
+
+function usePrevious(value) {
+  const ref = hooks.useRef();
+  hooks.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
  *
- * @param {string} id
- * @param {djs.model.Base} element
+ * @param {Function} show
  *
- * @returns {string}
+ * @returns {import('preact').Ref}
  */
 
-function useDescriptionContext(id, element) {
+function useShowEntryEvent(show) {
   const {
-    getDescriptionForId
-  } = hooks.useContext(DescriptionContext);
-  return getDescriptionForId(id, element);
-}
+    onShow
+  } = hooks.useContext(LayoutContext);
+  const ref = hooks.useRef();
+  const [focus, setFocus] = hooks.useState(false);
+  const onShowEntry = hooks.useCallback(event => {
+    if (show(event)) {
+      if (minDash.isFunction(onShow)) {
+        onShow();
+      }
 
-var ArrowIcon = function ArrowIcon(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"
-    })
-  });
-};
+      if (event.focus && !focus) {
+        setFocus(true);
+      }
+    }
+  }, [show]);
+  hooks.useEffect(() => {
+    if (focus && ref.current) {
+      if (minDash.isFunction(ref.current.focus)) {
+        ref.current.focus();
+      }
 
-ArrowIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+      if (minDash.isFunction(ref.current.select)) {
+        ref.current.select();
+      }
 
-var CreateIcon = function CreateIcon(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"
-    })
-  });
-};
+      setFocus(false);
+    }
+  }, [focus]);
+  useEvent('propertiesPanel.showEntry', onShowEntry);
+  return ref;
+}
 
-CreateIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+/**
+ * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
+ * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
+ * visible. Unset error on `propertiesPanel.updated`.
+ *
+ * @param {Function} show
+ *
+ * @returns {import('preact').Ref}
+ */
 
-var DeleteIcon = function DeleteIcon(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"
-    })
-  });
-};
+function useShowErrorEvent(show) {
+  const {
+    eventBus
+  } = hooks.useContext(EventContext);
+  const [temporaryError, setTemporaryError] = hooks.useState(null);
+  const onPropertiesPanelUpdated = hooks.useCallback(() => setTemporaryError(null), []);
+  useEvent('propertiesPanel.updated', onPropertiesPanelUpdated);
+  const onShowError = hooks.useCallback(event => {
+    setTemporaryError(null);
+
+    if (show(event)) {
+      if (eventBus) {
+        eventBus.fire('propertiesPanel.showEntry', event);
+      }
 
-DeleteIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+      setTemporaryError(event.message);
+    }
+  }, [show]);
+  useEvent('propertiesPanel.showError', onShowError);
+  return temporaryError;
+}
 
 function Group(props) {
   const {
     element,
     entries = [],
     id,
-    label
+    label,
+    shouldOpen = false
   } = props;
-  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
+  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
 
   const toggleOpen = () => setOpen(!open);
 
@@ -257,6 +493,9 @@ function Group(props) {
     });
     setEdited(hasOneEditedEntry);
   }, [entries]);
+  const propertiesPanelContext = { ...hooks.useContext(LayoutContext),
+    onShow
+  };
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
@@ -279,15 +518,18 @@ function Group(props) {
       })]
     }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-group-entries', open ? 'open' : ''),
-      children: entries.map(entry => {
-        const {
-          component: Component,
-          id
-        } = entry;
-        return preact.createElement(Component, { ...entry,
-          key: id,
-          element: element
-        });
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return preact.createElement(Component, { ...entry,
+            element: element,
+            key: id
+          });
+        })
       })
     })]
   });
@@ -304,6 +546,7 @@ const DEFAULT_LAYOUT = {
   open: true
 };
 const DEFAULT_DESCRIPTION = {};
+const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
 /**
  * @typedef { {
  *    component: import('preact').Component,
@@ -335,7 +578,8 @@ const DEFAULT_DESCRIPTION = {};
  *    component?: import('preact').Component,
  *    entries: Array<EntryDefinition>,
  *    id: String,
- *    label: String
+ *    label: String,
+ *    shouldOpen?: Boolean
  * } } GroupDefinition
  *
  *  @typedef { {
@@ -362,6 +606,7 @@ const DEFAULT_DESCRIPTION = {};
  * @param {Function} [props.layoutChanged]
  * @param {DescriptionConfig} [props.descriptionConfig]
  * @param {Function} [props.descriptionLoaded]
+ * @param {Object} [props.eventBus]
  */
 
 function PropertiesPanel(props) {
@@ -372,7 +617,8 @@ function PropertiesPanel(props) {
     layoutConfig = {},
     layoutChanged,
     descriptionConfig = {},
-    descriptionLoaded
+    descriptionLoaded,
+    eventBus
   } = props; // set-up layout context
 
   const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
@@ -413,6 +659,13 @@ function PropertiesPanel(props) {
     description,
     getDescriptionForId
   };
+  useEventBuffer(bufferedEvents, eventBus);
+  const eventContext = {
+    eventBus
+  };
+  const propertiesPanelContext = {
+    element
+  };
 
   if (!element) {
     return jsxRuntime.jsx("div", {
@@ -421,28 +674,34 @@ function PropertiesPanel(props) {
     });
   }
 
-  return jsxRuntime.jsx(DescriptionContext.Provider, {
-    value: descriptionContext,
-    children: jsxRuntime.jsx(LayoutContext.Provider, {
-      value: layoutContext,
-      children: jsxRuntime.jsxs("div", {
-        class: classnames__default["default"]('bio-properties-panel', layout.open ? 'open' : ''),
-        children: [jsxRuntime.jsx(Header, {
-          element: element,
-          headerProvider: headerProvider
-        }), jsxRuntime.jsx("div", {
-          class: "bio-properties-panel-scroll-container",
-          children: groups.map(group => {
-            const {
-              component: Component = Group,
-              id
-            } = group;
-            return preact.createElement(Component, { ...group,
-              key: id,
-              element: element
-            });
+  return jsxRuntime.jsx(LayoutContext.Provider, {
+    value: propertiesPanelContext,
+    children: jsxRuntime.jsx(DescriptionContext.Provider, {
+      value: descriptionContext,
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
+        value: layoutContext,
+        children: jsxRuntime.jsx(EventContext.Provider, {
+          value: eventContext,
+          children: jsxRuntime.jsxs("div", {
+            class: classnames__default["default"]('bio-properties-panel', layout.open ? 'open' : ''),
+            children: [jsxRuntime.jsx(Header, {
+              element: element,
+              headerProvider: headerProvider
+            }), jsxRuntime.jsx("div", {
+              class: "bio-properties-panel-scroll-container",
+              children: groups.map(group => {
+                const {
+                  component: Component = Group,
+                  id
+                } = group;
+                return preact.createElement(Component, { ...group,
+                  key: id,
+                  element: element
+                });
+              })
+            })]
           })
-        })]
+        })
       })
     })
   });
@@ -582,8 +841,20 @@ function CollapsibleEntry(props) {
   } = props;
   const [open, setOpen] = hooks.useState(shouldOpen);
 
-  const toggleOpen = () => setOpen(!open); // todo(pinussilvestrus): translate once we have a translate mechanism for the core
+  const toggleOpen = () => setOpen(!open);
 
+  const {
+    onShow
+  } = 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
 
   const placeholderLabel = '<empty>';
   return jsxRuntime.jsxs("div", {
@@ -610,15 +881,18 @@ function CollapsibleEntry(props) {
       }) : null]
     }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
-      children: entries.map(entry => {
-        const {
-          component: Component,
-          id
-        } = entry;
-        return preact.createElement(Component, { ...entry,
-          key: id,
-          element: element
-        });
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return preact.createElement(Component, { ...entry,
+            element: element,
+            key: id
+          });
+        })
       })
     })]
   });
@@ -652,7 +926,7 @@ function ListItem(props) {
   });
 }
 
-const noop = () => {};
+const noop$3 = () => {};
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
@@ -669,6 +943,7 @@ function ListGroup(props) {
     shouldSort = true
   } = props;
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
   const [ordering, setOrdering] = hooks.useState([]);
   const [newItemAdded, setNewItemAdded] = hooks.useState(false);
   const prevItems = usePrevious(items);
@@ -743,12 +1018,15 @@ function ListGroup(props) {
   const toggleOpen = () => setOpen(!open);
 
   const hasItems = !!items.length;
+  const propertiesPanelContext = { ...hooks.useContext(LayoutContext),
+    onShow
+  };
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
     children: [jsxRuntime.jsxs("div", {
       class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : ''),
-      onClick: hasItems ? toggleOpen : noop,
+      onClick: hasItems ? toggleOpen : noop$3,
       children: [jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -777,23 +1055,27 @@ function ListGroup(props) {
       })]
     }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-list', open && hasItems ? 'open' : ''),
-      children: ordering.map((o, index) => {
-        const item = getItem(items, o);
-
-        if (!item) {
-          return;
-        }
-
-        const {
-          id
-        } = item;
-        return preact.createElement(ListItem, { ...item,
-          element: element,
-          index: index,
-          key: id // if item was added, open first or last item based on ordering
-          ,
-          autoOpen: newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1)
-        });
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
+        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
+
+          const autoOpen = newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1);
+          return preact.createElement(ListItem, { ...item,
+            autoOpen: autoOpen,
+            element: element,
+            index: index,
+            key: id
+          });
+        })
       })
     })]
   });
@@ -832,13 +1114,16 @@ function Description(props) {
   }
 }
 
+const noop$2 = () => {};
+
 function Checkbox(props) {
   const {
     id,
     label,
     onChange,
     disabled,
-    value = false
+    value = false,
+    show = noop$2
   } = props;
 
   const handleChange = ({
@@ -847,9 +1132,11 @@ function Checkbox(props) {
     onChange(target.checked);
   };
 
+  const ref = useShowEntryEvent(show);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-checkbox",
     children: [jsxRuntime.jsx("input", {
+      ref: ref,
       id: prefixId$6(id),
       name: id,
       type: "checkbox",
@@ -884,18 +1171,24 @@ function CheckboxEntry(props) {
     label,
     getValue,
     setValue,
-    disabled
+    disabled,
+    show = noop$2
   } = props;
   const value = getValue(element);
+  const error = useShowErrorEvent(show);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Checkbox, {
+      disabled: disabled,
       id: id,
       label: label,
       onChange: setValue,
-      value: value,
-      disabled: disabled
+      show: show,
+      value: value
+    }), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
@@ -1202,6 +1495,25 @@ function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
 }
 
+const noop$1 = () => {};
+/**
+ * @typedef { { value: string, label: string, disabled: boolean } } Option
+ */
+
+/**
+ * Provides basic select input.
+ *
+ * @param {object} props
+ * @param {string} props.id
+ * @param {string[]} props.path
+ * @param {string} props.label
+ * @param {Function} props.onChange
+ * @param {Array<Option>} [props.options]
+ * @param {string} props.value
+ * @param {boolean} [props.disabled]
+ */
+
+
 function Select(props) {
   const {
     id,
@@ -1209,8 +1521,10 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled
+    disabled,
+    show = noop$1
   } = props;
+  const ref = useShowEntryEvent(show);
 
   const handleChange = ({
     target
@@ -1225,6 +1539,7 @@ function Select(props) {
       class: "bio-properties-panel-label",
       children: label
     }), jsxRuntime.jsx("select", {
+      ref: ref,
       id: prefixId$4(id),
       name: id,
       class: "bio-properties-panel-input",
@@ -1263,12 +1578,14 @@ function SelectEntry(props) {
     getValue,
     setValue,
     getOptions,
-    disabled
+    disabled,
+    show = noop$1
   } = props;
   const value = getValue(element);
   const options = getOptions(element);
+  const error = useShowErrorEvent(show);
   return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-entry",
+    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Select, {
       id: id,
@@ -1276,7 +1593,11 @@ function SelectEntry(props) {
       value: value,
       onChange: setValue,
       options: options,
-      disabled: disabled
+      disabled: disabled,
+      show: show
+    }), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
@@ -1335,12 +1656,27 @@ function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
 }
 
+function FeelIcon(props) {
+  const {
+    label,
+    feel = false
+  } = props;
+  const feelRequiredLabel = ' must be a FEEL expression';
+  const feelOptionalLabel = ' can optionally be a FEEL expression';
+  return jsxRuntime.jsx("i", {
+    class: "bio-properties-panel-feel-icon",
+    title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
+    children: feel === 'required' ? jsxRuntime.jsx(FeelRequiredIcon, {}) : jsxRuntime.jsx(FeelOptionalIcon, {})
+  });
+}
+
 function TextArea(props) {
   const {
     id,
     label,
     rows = 2,
     debounce,
+    feel,
     onInput,
     value = '',
     disabled,
@@ -1353,10 +1689,13 @@ function TextArea(props) {
   }, [onInput, debounce]);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-textarea",
-    children: [jsxRuntime.jsx("label", {
+    children: [jsxRuntime.jsxs("label", {
       for: prefixId$2(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: [label, feel && jsxRuntime.jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
     }), jsxRuntime.jsx("textarea", {
       id: prefixId$2(id),
       name: id,
@@ -1392,6 +1731,7 @@ function TextAreaEntry(props) {
     id,
     description,
     debounce,
+    feel,
     label,
     getValue,
     setValue,
@@ -1411,6 +1751,7 @@ function TextAreaEntry(props) {
       rows: rows,
       debounce: debounce,
       monospace: monospace,
+      feel: feel,
       disabled: disabled
     }), jsxRuntime.jsx(Description, {
       forId: id,
@@ -1427,6 +1768,8 @@ function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
 }
 
+const noop = () => {};
+
 function Textfield(props) {
   const {
     debounce,
@@ -1434,8 +1777,11 @@ function Textfield(props) {
     id,
     label,
     onInput,
-    value = ''
+    feel = false,
+    value = '',
+    show = noop
   } = props;
+  const ref = useShowEntryEvent(show);
   const handleInput = hooks.useMemo(() => {
     return debounce(({
       target
@@ -1443,11 +1789,15 @@ function Textfield(props) {
   }, [onInput, debounce]);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-textfield",
-    children: [jsxRuntime.jsx("label", {
+    children: [jsxRuntime.jsxs("label", {
       for: prefixId$1(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: [label, feel && jsxRuntime.jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
     }), jsxRuntime.jsx("input", {
+      ref: ref,
       id: prefixId$1(id),
       type: "text",
       name: id,
@@ -1483,55 +1833,65 @@ function TextfieldEntry(props) {
     description,
     debounce,
     disabled,
+    feel,
     label,
     getValue,
     setValue,
-    validate
+    validate,
+    show = noop
   } = props;
-  const [error, setError] = hooks.useState(null);
-  const [invalidValueCache, setInvalidValueCache] = hooks.useState(null);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
+  const [validationError, setValidationError] = hooks.useState(null);
   let value = getValue(element);
-  const prevValue = usePrevious(value); // validate again when value prop changed
-
+  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
-    const err = validate ? validate(value) : null;
-    setError(err);
-  }, [value]); // validate on change
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+
+  const onInput = newValue => {
+    let newValidationError = null;
 
-  const handleChange = newValue => {
-    const err = validate ? validate(newValue) : null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
 
-    if (err) {
-      setInvalidValueCache(newValue);
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
     } else {
       setValue(newValue);
     }
 
-    setError(err);
-  }; // keep showing invalid value on errors, although it was not set
-
+    setValidationError(newValidationError);
+  };
 
-  if (prevValue === value && error) {
-    value = invalidValueCache;
+  if (previousValue === value && validationError) {
+    value = cachedInvalidValue;
   }
 
+  const temporaryError = useShowErrorEvent(show);
+  const error = temporaryError || validationError;
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Textfield, {
+      debounce: debounce,
+      disabled: disabled,
+      feel: feel,
       id: id,
       label: label,
-      value: value,
-      onInput: handleChange,
-      debounce: debounce,
-      disabled: disabled
+      onInput: onInput,
+      show: show,
+      value: value
+    }), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
-    }), error && jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
     })]
   });
 }
@@ -1656,6 +2016,10 @@ exports.DeleteIcon = DeleteIcon;
 exports.DescriptionContext = DescriptionContext;
 exports.DescriptionEntry = Description;
 exports.DropdownButton = DropdownButton;
+exports.EventContext = EventContext;
+exports.ExternalLinkIcon = ExternalLinkIcon;
+exports.FeelOptionalIcon = FeelOptionalIcon;
+exports.FeelRequiredIcon = FeelRequiredIcon;
 exports.Group = Group;
 exports.Header = Header;
 exports.HeaderButton = HeaderButton;
@@ -1665,6 +2029,7 @@ exports.ListGroup = ListGroup;
 exports.ListItem = ListItem;
 exports.NumberFieldEntry = NumberFieldEntry;
 exports.PropertiesPanel = PropertiesPanel;
+exports.PropertiesPanelContext = LayoutContext;
 exports.SelectEntry = SelectEntry;
 exports.SimpleEntry = Simple;
 exports.TextAreaEntry = TextAreaEntry;
@@ -1678,7 +2043,11 @@ exports.isTextAreaEntryEdited = isEdited$2;
 exports.isTextFieldEntryEdited = isEdited$1;
 exports.isToggleSwitchEntryEdited = isEdited;
 exports.useDescriptionContext = useDescriptionContext;
+exports.useEvent = useEvent;
+exports.useEventBuffer = useEventBuffer;
 exports.useKeyFactory = useKeyFactory;
 exports.useLayoutState = useLayoutState;
 exports.usePrevious = usePrevious;
+exports.useShowEntryEvent = useShowEntryEvent;
+exports.useShowErrorEvent = useShowErrorEvent;
 //# sourceMappingURL=index.js.map