@bpmn-io/properties-panel 0.10.2 → 0.13.0

package/dist/index.esm.js

@@ -1,32 +1,131 @@
-import { useRef, useEffect, useMemo, useContext, useState } from '../preact/hooks';
-import { isFunction, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
+import { useContext, useEffect, useRef, useMemo, useState, useCallback } from '../preact/hooks';
+import { isArray, isFunction, isNumber, bind, assign, get, set, sortBy, find, debounce } from 'min-dash';
 import classnames from 'classnames';
-import { jsxs, jsx } from '../preact/jsx-runtime';
-import { query } from 'min-dom';
-import { createContext } from '../preact';
 import '../preact/compat';
+import { jsx, jsxs } from '../preact/jsx-runtime';
+import { query } from 'min-dom';
+import { createContext, createElement } from '../preact';
 
-/**
- * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
- */
+var ArrowIcon = function ArrowIcon(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,
+    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,
+    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,
+    children: 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 jsxs("svg", { ...props,
+    children: [jsx("path", {
+      d: "M5.8 7.06V5.95h4.307v1.11H5.8zm0 3.071v-1.11h4.307v1.11H5.8z",
+      fill: "#505562"
+    }), 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"
+    }), 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 jsxs("svg", { ...props,
+    children: [jsx("path", {
+      d: "M5.845 7.04V5.93h4.307v1.11H5.845zm0 3.07V9h4.307v1.11H5.845z",
+      fill: "#505562"
+    }), 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 jsxs("div", {
     class: "bio-properties-panel-header",
@@ -43,28 +142,624 @@ function Header(props) {
         title: type,
         class: "bio-properties-panel-header-type",
         children: type
-      }), getElementLabel(element) ? jsx("div", {
+      }), label ? jsx("div", {
         title: label,
         class: "bio-properties-panel-header-label",
         children: label
       }) : null]
+    }), jsx("div", {
+      class: "bio-properties-panel-header-actions",
+      children: documentationRef ? jsx("a", {
+        rel: "noopener",
+        class: "bio-properties-panel-header-link",
+        href: documentationRef,
+        target: "_blank",
+        children: jsx(ExternalLinkIcon, {})
+      }) : null
     })]
   });
 }
 
+const DescriptionContext = createContext({
+  description: {},
+  getDescriptionForId: () => {}
+});
+
+var FN_REF = '__fn';
+var DEFAULT_PRIORITY$1 = 1000;
+var slice = Array.prototype.slice;
+/**
+ * A general purpose event bus.
+ *
+ * This component is used to communicate across a diagram instance.
+ * Other parts of a diagram can use it to listen to and broadcast events.
+ *
+ *
+ * ## Registering for Events
+ *
+ * The event bus provides the {@link EventBus#on} and {@link EventBus#once}
+ * methods to register for events. {@link EventBus#off} can be used to
+ * remove event registrations. Listeners receive an instance of {@link Event}
+ * as the first argument. It allows them to hook into the event execution.
+ *
+ * ```javascript
+ *
+ * // listen for event
+ * eventBus.on('foo', function(event) {
+ *
+ *   // access event type
+ *   event.type; // 'foo'
+ *
+ *   // stop propagation to other listeners
+ *   event.stopPropagation();
+ *
+ *   // prevent event default
+ *   event.preventDefault();
+ * });
+ *
+ * // listen for event with custom payload
+ * eventBus.on('bar', function(event, payload) {
+ *   console.log(payload);
+ * });
+ *
+ * // listen for event returning value
+ * eventBus.on('foobar', function(event) {
+ *
+ *   // stop event propagation + prevent default
+ *   return false;
+ *
+ *   // stop event propagation + return custom result
+ *   return {
+ *     complex: 'listening result'
+ *   };
+ * });
+ *
+ *
+ * // listen with custom priority (default=1000, higher is better)
+ * eventBus.on('priorityfoo', 1500, function(event) {
+ *   console.log('invoked first!');
+ * });
+ *
+ *
+ * // listen for event and pass the context (`this`)
+ * eventBus.on('foobar', function(event) {
+ *   this.foo();
+ * }, this);
+ * ```
+ *
+ *
+ * ## Emitting Events
+ *
+ * Events can be emitted via the event bus using {@link EventBus#fire}.
+ *
+ * ```javascript
+ *
+ * // false indicates that the default action
+ * // was prevented by listeners
+ * if (eventBus.fire('foo') === false) {
+ *   console.log('default has been prevented!');
+ * };
+ *
+ *
+ * // custom args + return value listener
+ * eventBus.on('sum', function(event, a, b) {
+ *   return a + b;
+ * });
+ *
+ * // you can pass custom arguments + retrieve result values.
+ * var sum = eventBus.fire('sum', 1, 2);
+ * console.log(sum); // 3
+ * ```
+ */
+
+function EventBus() {
+  this._listeners = {}; // cleanup on destroy on lowest priority to allow
+  // message passing until the bitter end
+
+  this.on('diagram.destroy', 1, this._destroy, this);
+}
+/**
+ * Register an event listener for events with the given name.
+ *
+ * The callback will be invoked with `event, ...additionalArguments`
+ * that have been passed to {@link EventBus#fire}.
+ *
+ * Returning false from a listener will prevent the events default action
+ * (if any is specified). To stop an event from being processed further in
+ * other listeners execute {@link Event#stopPropagation}.
+ *
+ * Returning anything but `undefined` from a listener will stop the listener propagation.
+ *
+ * @param {string|Array<string>} events
+ * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
+ * @param {Function} callback
+ * @param {Object} [that] Pass context (`this`) to the callback
+ */
+
+EventBus.prototype.on = function (events, priority, callback, that) {
+  events = isArray(events) ? events : [events];
+
+  if (isFunction(priority)) {
+    that = callback;
+    callback = priority;
+    priority = DEFAULT_PRIORITY$1;
+  }
+
+  if (!isNumber(priority)) {
+    throw new Error('priority must be a number');
+  }
+
+  var actualCallback = callback;
+
+  if (that) {
+    actualCallback = bind(callback, that); // make sure we remember and are able to remove
+    // bound callbacks via {@link #off} using the original
+    // callback
+
+    actualCallback[FN_REF] = callback[FN_REF] || callback;
+  }
+
+  var self = this;
+  events.forEach(function (e) {
+    self._addListener(e, {
+      priority: priority,
+      callback: actualCallback,
+      next: null
+    });
+  });
+};
+/**
+ * Register an event listener that is executed only once.
+ *
+ * @param {string} event the event name to register for
+ * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
+ * @param {Function} callback the callback to execute
+ * @param {Object} [that] Pass context (`this`) to the callback
+ */
+
+
+EventBus.prototype.once = function (event, priority, callback, that) {
+  var self = this;
+
+  if (isFunction(priority)) {
+    that = callback;
+    callback = priority;
+    priority = DEFAULT_PRIORITY$1;
+  }
+
+  if (!isNumber(priority)) {
+    throw new Error('priority must be a number');
+  }
+
+  function wrappedCallback() {
+    wrappedCallback.__isTomb = true;
+    var result = callback.apply(that, arguments);
+    self.off(event, wrappedCallback);
+    return result;
+  } // make sure we remember and are able to remove
+  // bound callbacks via {@link #off} using the original
+  // callback
+
+
+  wrappedCallback[FN_REF] = callback;
+  this.on(event, priority, wrappedCallback);
+};
+/**
+ * Removes event listeners by event and callback.
+ *
+ * If no callback is given, all listeners for a given event name are being removed.
+ *
+ * @param {string|Array<string>} events
+ * @param {Function} [callback]
+ */
+
+
+EventBus.prototype.off = function (events, callback) {
+  events = isArray(events) ? events : [events];
+  var self = this;
+  events.forEach(function (event) {
+    self._removeListener(event, callback);
+  });
+};
+/**
+ * Create an EventBus event.
+ *
+ * @param {Object} data
+ *
+ * @return {Object} event, recognized by the eventBus
+ */
+
+
+EventBus.prototype.createEvent = function (data) {
+  var event = new InternalEvent();
+  event.init(data);
+  return event;
+};
+/**
+ * Fires a named event.
+ *
+ * @example
+ *
+ * // fire event by name
+ * events.fire('foo');
+ *
+ * // fire event object with nested type
+ * var event = { type: 'foo' };
+ * events.fire(event);
+ *
+ * // fire event with explicit type
+ * var event = { x: 10, y: 20 };
+ * events.fire('element.moved', event);
+ *
+ * // pass additional arguments to the event
+ * events.on('foo', function(event, bar) {
+ *   alert(bar);
+ * });
+ *
+ * events.fire({ type: 'foo' }, 'I am bar!');
+ *
+ * @param {string} [name] the optional event name
+ * @param {Object} [event] the event object
+ * @param {...Object} additional arguments to be passed to the callback functions
+ *
+ * @return {boolean} the events return value, if specified or false if the
+ *                   default action was prevented by listeners
+ */
+
+
+EventBus.prototype.fire = function (type, data) {
+  var event, firstListener, returnValue, args;
+  args = slice.call(arguments);
+
+  if (typeof type === 'object') {
+    data = type;
+    type = data.type;
+  }
+
+  if (!type) {
+    throw new Error('no event type specified');
+  }
+
+  firstListener = this._listeners[type];
+
+  if (!firstListener) {
+    return;
+  } // we make sure we fire instances of our home made
+  // events here. We wrap them only once, though
+
+
+  if (data instanceof InternalEvent) {
+    // we are fine, we alread have an event
+    event = data;
+  } else {
+    event = this.createEvent(data);
+  } // ensure we pass the event as the first parameter
+
+
+  args[0] = event; // original event type (in case we delegate)
+
+  var originalType = event.type; // update event type before delegation
+
+  if (type !== originalType) {
+    event.type = type;
+  }
+
+  try {
+    returnValue = this._invokeListeners(event, args, firstListener);
+  } finally {
+    // reset event type after delegation
+    if (type !== originalType) {
+      event.type = originalType;
+    }
+  } // set the return value to false if the event default
+  // got prevented and no other return value exists
+
+
+  if (returnValue === undefined && event.defaultPrevented) {
+    returnValue = false;
+  }
+
+  return returnValue;
+};
+
+EventBus.prototype.handleError = function (error) {
+  return this.fire('error', {
+    error: error
+  }) === false;
+};
+
+EventBus.prototype._destroy = function () {
+  this._listeners = {};
+};
+
+EventBus.prototype._invokeListeners = function (event, args, listener) {
+  var returnValue;
+
+  while (listener) {
+    // handle stopped propagation
+    if (event.cancelBubble) {
+      break;
+    }
+
+    returnValue = this._invokeListener(event, args, listener);
+    listener = listener.next;
+  }
+
+  return returnValue;
+};
+
+EventBus.prototype._invokeListener = function (event, args, listener) {
+  var returnValue;
+
+  if (listener.callback.__isTomb) {
+    return returnValue;
+  }
+
+  try {
+    // returning false prevents the default action
+    returnValue = invokeFunction(listener.callback, args); // stop propagation on return value
+
+    if (returnValue !== undefined) {
+      event.returnValue = returnValue;
+      event.stopPropagation();
+    } // prevent default on return false
+
+
+    if (returnValue === false) {
+      event.preventDefault();
+    }
+  } catch (error) {
+    if (!this.handleError(error)) {
+      console.error('unhandled error in event listener', error);
+      throw error;
+    }
+  }
+
+  return returnValue;
+};
+/*
+ * Add new listener with a certain priority to the list
+ * of listeners (for the given event).
+ *
+ * The semantics of listener registration / listener execution are
+ * first register, first serve: New listeners will always be inserted
+ * after existing listeners with the same priority.
+ *
+ * Example: Inserting two listeners with priority 1000 and 1300
+ *
+ *    * before: [ 1500, 1500, 1000, 1000 ]
+ *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
+ *
+ * @param {string} event
+ * @param {Object} listener { priority, callback }
+ */
+
+
+EventBus.prototype._addListener = function (event, newListener) {
+  var listener = this._getListeners(event),
+      previousListener; // no prior listeners
+
+
+  if (!listener) {
+    this._setListeners(event, newListener);
+
+    return;
+  } // ensure we order listeners by priority from
+  // 0 (high) to n > 0 (low)
+
+
+  while (listener) {
+    if (listener.priority < newListener.priority) {
+      newListener.next = listener;
+
+      if (previousListener) {
+        previousListener.next = newListener;
+      } else {
+        this._setListeners(event, newListener);
+      }
+
+      return;
+    }
+
+    previousListener = listener;
+    listener = listener.next;
+  } // add new listener to back
+
+
+  previousListener.next = newListener;
+};
+
+EventBus.prototype._getListeners = function (name) {
+  return this._listeners[name];
+};
+
+EventBus.prototype._setListeners = function (name, listener) {
+  this._listeners[name] = listener;
+};
+
+EventBus.prototype._removeListener = function (event, callback) {
+  var listener = this._getListeners(event),
+      nextListener,
+      previousListener,
+      listenerCallback;
+
+  if (!callback) {
+    // clear listeners
+    this._setListeners(event, null);
+
+    return;
+  }
+
+  while (listener) {
+    nextListener = listener.next;
+    listenerCallback = listener.callback;
+
+    if (listenerCallback === callback || listenerCallback[FN_REF] === callback) {
+      if (previousListener) {
+        previousListener.next = nextListener;
+      } else {
+        // new first listener
+        this._setListeners(event, nextListener);
+      }
+    }
+
+    previousListener = listener;
+    listener = nextListener;
+  }
+};
+/**
+ * A event that is emitted via the event bus.
+ */
+
+
+function InternalEvent() {}
+
+InternalEvent.prototype.stopPropagation = function () {
+  this.cancelBubble = true;
+};
+
+InternalEvent.prototype.preventDefault = function () {
+  this.defaultPrevented = true;
+};
+
+InternalEvent.prototype.init = function (data) {
+  assign(this, data || {});
+};
+/**
+ * Invoke function. Be fast...
+ *
+ * @param {Function} fn
+ * @param {Array<Object>} args
+ *
+ * @return {Any}
+ */
+
+
+function invokeFunction(fn, args) {
+  return fn.apply(null, args);
+}
+
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
+ */
+const eventBus = new EventBus();
+const EventContext = createContext({
+  eventBus
+});
+
+const LayoutContext = 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
+  } = useContext(DescriptionContext);
+  return getDescriptionForId(id, element);
+}
+
+const DEFAULT_PRIORITY = 1000;
 /**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
+ * Subscribe to an event.
  *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ * @param {string} event
+ * @param {Function} callback
+ * @param {number} [priority]
+ *
+ * @returns {import('preact').Ref}
  */
 
-function usePrevious(value) {
-  const ref = useRef();
+function useEvent(event, callback, priority = DEFAULT_PRIORITY) {
+  const {
+    eventBus
+  } = useContext(EventContext);
   useEffect(() => {
-    ref.current = value;
+    eventBus.on(event, priority, callback);
+    return () => eventBus.off(event, callback);
+  }, [event, eventBus, callback, 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 = useRef([]),
+        buffering = useRef(true);
+
+  const createCallback = event => data => {
+    if (buffering.current === true) {
+      buffer.current.unshift([event, data]);
+    }
+  }; // (1) buffer events
+
+
+  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
+
+  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;
@@ -105,18 +800,6 @@ function useKeyFactory(dependencies = []) {
   return getKey;
 }
 
-const DescriptionContext = createContext({
-  description: {},
-  getDescriptionForId: () => {}
-});
-
-const LayoutContext = createContext({
-  layout: {},
-  setLayout: () => {},
-  getLayoutForKey: () => {},
-  setLayoutForKey: () => {}
-});
-
 /**
  * Creates a state that persists in the global LayoutContext.
  *
@@ -152,80 +835,101 @@ 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 = useRef();
+  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
-  } = useContext(DescriptionContext);
-  return getDescriptionForId(id, element);
-}
-
-var ArrowIcon = function ArrowIcon(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"
-    })
-  });
-};
+    onShow
+  } = useContext(LayoutContext);
+  const ref = useRef();
+  const [focus, setFocus] = useState(false);
+  const onShowEntry = useCallback(event => {
+    if (show(event)) {
+      if (isFunction(onShow)) {
+        onShow();
+      }
 
-ArrowIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+      if (event.focus && !focus) {
+        setFocus(true);
+      }
+    }
+  }, [show]);
+  useEffect(() => {
+    if (focus && ref.current) {
+      if (isFunction(ref.current.focus)) {
+        ref.current.focus();
+      }
 
-var CreateIcon = function CreateIcon(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"
-    })
-  });
-};
+      if (isFunction(ref.current.select)) {
+        ref.current.select();
+      }
 
-CreateIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+      setFocus(false);
+    }
+  }, [focus]);
+  useEvent('propertiesPanel.showEntry', onShowEntry);
+  return ref;
+}
 
-var DeleteIcon = function DeleteIcon(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"
-    })
-  });
-};
+/**
+ * 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}
+ */
 
-DeleteIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+function useShowErrorEvent(show) {
+  const {
+    eventBus
+  } = useContext(EventContext);
+  const [temporaryError, setTemporaryError] = useState(null);
+  const onPropertiesPanelUpdated = useCallback(() => setTemporaryError(null), []);
+  useEvent('propertiesPanel.updated', onPropertiesPanelUpdated);
+  const onShowError = useCallback(event => {
+    setTemporaryError(null);
+
+    if (show(event)) {
+      eventBus.fire('propertiesPanel.showEntry', event);
+      setTemporaryError(event.message);
+    }
+  }, [show]);
+  useEvent('propertiesPanel.showError', onShowError);
+  return temporaryError;
+}
 
 function Group(props) {
   const {
-    id,
+    element,
     entries = [],
-    label
+    id,
+    label,
+    shouldOpen = false
   } = props;
-  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
+  const onShow = useCallback(() => setOpen(true), [setOpen]);
 
   const toggleOpen = () => setOpen(!open);
 
@@ -248,6 +952,9 @@ function Group(props) {
     });
     setEdited(hasOneEditedEntry);
   }, [entries]);
+  const propertiesPanelContext = { ...useContext(LayoutContext),
+    onShow
+  };
   return jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
@@ -270,7 +977,19 @@ function Group(props) {
       })]
     }), jsx("div", {
       class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
-      children: entries.map(e => e.component)
+      children: jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return createElement(Component, { ...entry,
+            element: element,
+            key: id
+          });
+        })
+      })
     })]
   });
 }
@@ -286,9 +1005,10 @@ const DEFAULT_LAYOUT = {
   open: true
 };
 const DEFAULT_DESCRIPTION = {};
+const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
 /**
  * @typedef { {
- *    component: import('preact').ComponentChild,
+ *    component: import('preact').Component,
  *    id: String,
  *    isEdited?: Function
  * } } EntryDefinition
@@ -317,7 +1037,8 @@ const DEFAULT_DESCRIPTION = {};
  *    component?: import('preact').Component,
  *    entries: Array<EntryDefinition>,
  *    id: String,
- *    label: String
+ *    label: String,
+ *    shouldOpen?: Boolean
  * } } GroupDefinition
  *
  *  @typedef { {
@@ -354,7 +1075,8 @@ function PropertiesPanel(props) {
     layoutConfig = {},
     layoutChanged,
     descriptionConfig = {},
-    descriptionLoaded
+    descriptionLoaded,
+    eventBus
   } = props; // set-up layout context
 
   const [layout, setLayout] = useState(createLayout(layoutConfig));
@@ -395,6 +1117,13 @@ function PropertiesPanel(props) {
     description,
     getDescriptionForId
   };
+  useEventBuffer(bufferedEvents, eventBus);
+  const eventContext = {
+    eventBus
+  };
+  const propertiesPanelContext = {
+    element
+  };
 
   if (!element) {
     return jsx("div", {
@@ -403,28 +1132,34 @@ function PropertiesPanel(props) {
     });
   }
 
-  return jsx(DescriptionContext.Provider, {
-    value: descriptionContext,
-    children: jsx(LayoutContext.Provider, {
-      value: layoutContext,
-      children: jsxs("div", {
-        class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
-        children: [jsx(Header, {
-          element: element,
-          headerProvider: headerProvider
-        }), jsx("div", {
-          class: "bio-properties-panel-scroll-container",
-          children: groups.map(group => {
-            const {
-              component: GroupComponent = Group,
-              id
-            } = group;
-            return jsx(GroupComponent, {
+  return jsx(LayoutContext.Provider, {
+    value: propertiesPanelContext,
+    children: jsx(DescriptionContext.Provider, {
+      value: descriptionContext,
+      children: jsx(LayoutContext.Provider, {
+        value: layoutContext,
+        children: jsx(EventContext.Provider, {
+          value: eventContext,
+          children: jsxs("div", {
+            class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+            children: [jsx(Header, {
               element: element,
-              ...group
-            }, id);
+              headerProvider: headerProvider
+            }), jsx("div", {
+              class: "bio-properties-panel-scroll-container",
+              children: groups.map(group => {
+                const {
+                  component: Component = Group,
+                  id
+                } = group;
+                return createElement(Component, { ...group,
+                  key: id,
+                  element: element
+                });
+              })
+            })]
           })
-        })]
+        })
       })
     })
   });
@@ -555,16 +1290,29 @@ function HeaderButton(props) {
 
 function CollapsibleEntry(props) {
   const {
-    id,
+    element,
     entries = [],
+    id,
     label,
-    remove,
-    open: shouldOpen
+    open: shouldOpen,
+    remove
   } = props;
   const [open, setOpen] = useState(shouldOpen);
 
-  const toggleOpen = () => setOpen(!open); // todo(pinussilvestrus): translate once we have a translate mechanism for the core
+  const toggleOpen = () => setOpen(!open);
+
+  const {
+    onShow
+  } = 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
 
   const placeholderLabel = '<empty>';
   return jsxs("div", {
@@ -591,15 +1339,27 @@ function CollapsibleEntry(props) {
       }) : null]
     }), jsx("div", {
       class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
-      children: entries.map(e => e.component)
+      children: jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return createElement(Component, { ...entry,
+            element: element,
+            key: id
+          });
+        })
+      })
     })]
   });
 }
 
 function ListItem(props) {
   const {
-    autoOpen,
-    autoFocusEntry
+    autoFocusEntry,
+    autoOpen
   } = props; // focus specified entry on auto open
 
   useEffect(() => {
@@ -624,7 +1384,7 @@ function ListItem(props) {
   });
 }
 
-const noop = () => {};
+const noop$3 = () => {};
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
@@ -632,15 +1392,16 @@ const noop = () => {};
 
 function ListGroup(props) {
   const {
+    add,
     element,
     id,
     items,
     label,
-    add,
-    shouldSort = true,
-    shouldOpen = true
+    shouldOpen = true,
+    shouldSort = true
   } = props;
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const onShow = useCallback(() => setOpen(true), [setOpen]);
   const [ordering, setOrdering] = useState([]);
   const [newItemAdded, setNewItemAdded] = useState(false);
   const prevItems = usePrevious(items);
@@ -715,12 +1476,15 @@ function ListGroup(props) {
   const toggleOpen = () => setOpen(!open);
 
   const hasItems = !!items.length;
+  const propertiesPanelContext = { ...useContext(LayoutContext),
+    onShow
+  };
   return jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
     children: [jsxs("div", {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : ''),
-      onClick: hasItems ? toggleOpen : noop,
+      onClick: hasItems ? toggleOpen : noop$3,
       children: [jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -749,18 +1513,27 @@ function ListGroup(props) {
       })]
     }), jsx("div", {
       class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
-      children: ordering.map((o, index) => {
-        const item = getItem(items, o);
-
-        if (!item) {
-          return;
-        }
-
-        return jsx(ListItem, {
-          // if item was added, open first or last item based on ordering
-          autoOpen: newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1),
-          ...item
-        }, item.id);
+      children: 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 createElement(ListItem, { ...item,
+            autoOpen: autoOpen,
+            element: element,
+            index: index,
+            key: id
+          });
+        })
       })
     })]
   });
@@ -799,13 +1572,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 = ({
@@ -814,9 +1590,11 @@ function Checkbox(props) {
     onChange(target.checked);
   };
 
+  const ref = useShowEntryEvent(show);
   return jsxs("div", {
     class: "bio-properties-panel-checkbox",
     children: [jsx("input", {
+      ref: ref,
       id: prefixId$6(id),
       name: id,
       type: "checkbox",
@@ -851,18 +1629,24 @@ function CheckboxEntry(props) {
     label,
     getValue,
     setValue,
-    disabled
+    disabled,
+    show = noop$2
   } = props;
   const value = getValue(element);
+  const error = useShowErrorEvent(show);
   return jsxs("div", {
     class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
     "data-entry-id": id,
     children: [jsx(Checkbox, {
+      disabled: disabled,
       id: id,
       label: label,
       onChange: setValue,
-      value: value,
-      disabled: disabled
+      show: show,
+      value: value
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsx(Description, {
       forId: id,
       element: element,
@@ -883,7 +1667,7 @@ function List(props) {
     id,
     element,
     items = [],
-    renderItem,
+    component,
     label = '<empty>',
     open: shouldOpen,
     onAdd,
@@ -953,12 +1737,13 @@ function List(props) {
       })]
     }), hasItems && jsx(ItemsList, {
       autoFocusEntry: autoFocusEntry,
+      component: component,
+      element: element,
       id: id,
-      open: open,
       items: sortedItems,
       newItems: newItems,
       onRemove: onRemove,
-      renderItem: renderItem
+      open: open
     })]
   });
 }
@@ -966,12 +1751,13 @@ function List(props) {
 function ItemsList(props) {
   const {
     autoFocusEntry,
+    component: Component,
+    element,
     id,
     items,
     newItems,
-    open,
     onRemove,
-    renderItem
+    open
   } = props;
   const getKey = useKeyFactory();
   const newItem = newItems[0];
@@ -998,7 +1784,13 @@ function ItemsList(props) {
       const key = getKey(item);
       return jsxs("li", {
         class: "bio-properties-panel-list-entry-item",
-        children: [renderItem(item, index, item === newItem), onRemove && jsx("button", {
+        children: [jsx(Component, {
+          element: element,
+          id: id,
+          index: index,
+          item: item,
+          open: item === newItem
+        }), onRemove && jsx("button", {
           type: "button",
           title: "Delete item",
           class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
@@ -1161,6 +1953,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,
@@ -1168,8 +1979,10 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled
+    disabled,
+    show = noop$1
   } = props;
+  const ref = useShowEntryEvent(show);
 
   const handleChange = ({
     target
@@ -1184,6 +1997,7 @@ function Select(props) {
       class: "bio-properties-panel-label",
       children: label
     }), jsx("select", {
+      ref: ref,
       id: prefixId$4(id),
       name: id,
       class: "bio-properties-panel-input",
@@ -1222,12 +2036,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 jsxs("div", {
-    class: "bio-properties-panel-entry",
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsx(Select, {
       id: id,
@@ -1235,7 +2051,11 @@ function SelectEntry(props) {
       value: value,
       onChange: setValue,
       options: options,
-      disabled: disabled
+      disabled: disabled,
+      show: show
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsx(Description, {
       forId: id,
       element: element,
@@ -1294,12 +2114,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 jsx("i", {
+    class: "bio-properties-panel-feel-icon",
+    title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
+    children: feel === 'required' ? jsx(FeelRequiredIcon, {}) : jsx(FeelOptionalIcon, {})
+  });
+}
+
 function TextArea(props) {
   const {
     id,
     label,
     rows = 2,
     debounce,
+    feel,
     onInput,
     value = '',
     disabled,
@@ -1312,10 +2147,13 @@ function TextArea(props) {
   }, [onInput, debounce]);
   return jsxs("div", {
     class: "bio-properties-panel-textarea",
-    children: [jsx("label", {
+    children: [jsxs("label", {
       for: prefixId$2(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: [label, feel && jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
     }), jsx("textarea", {
       id: prefixId$2(id),
       name: id,
@@ -1351,6 +2189,7 @@ function TextAreaEntry(props) {
     id,
     description,
     debounce,
+    feel,
     label,
     getValue,
     setValue,
@@ -1370,6 +2209,7 @@ function TextAreaEntry(props) {
       rows: rows,
       debounce: debounce,
       monospace: monospace,
+      feel: feel,
       disabled: disabled
     }), jsx(Description, {
       forId: id,
@@ -1386,6 +2226,8 @@ function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
 }
 
+const noop = () => {};
+
 function Textfield(props) {
   const {
     debounce,
@@ -1393,8 +2235,11 @@ function Textfield(props) {
     id,
     label,
     onInput,
-    value = ''
+    feel = false,
+    value = '',
+    show = noop
   } = props;
+  const ref = useShowEntryEvent(show);
   const handleInput = useMemo(() => {
     return debounce(({
       target
@@ -1402,11 +2247,15 @@ function Textfield(props) {
   }, [onInput, debounce]);
   return jsxs("div", {
     class: "bio-properties-panel-textfield",
-    children: [jsx("label", {
+    children: [jsxs("label", {
       for: prefixId$1(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: [label, feel && jsx(FeelIcon, {
+        feel: feel,
+        label: label
+      })]
     }), jsx("input", {
+      ref: ref,
       id: prefixId$1(id),
       type: "text",
       name: id,
@@ -1442,55 +2291,65 @@ function TextfieldEntry(props) {
     description,
     debounce,
     disabled,
+    feel,
     label,
     getValue,
     setValue,
-    validate
+    validate,
+    show = noop
   } = props;
-  const [error, setError] = useState(null);
-  const [invalidValueCache, setInvalidValueCache] = useState(null);
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const [validationError, setValidationError] = useState(null);
   let value = getValue(element);
-  const prevValue = usePrevious(value); // validate again when value prop changed
-
+  const previousValue = usePrevious(value);
   useEffect(() => {
-    const err = validate ? validate(value) : null;
-    setError(err);
-  }, [value]); // validate on change
+    if (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 (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 jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [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 && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsx(Description, {
       forId: id,
       element: element,
       value: description
-    }), error && jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
     })]
   });
 }
@@ -1606,5 +2465,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, PropertiesPanel, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useKeyFactory, useLayoutState, usePrevious };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, EventContext, ExternalLinkIcon, FeelOptionalIcon, FeelRequiredIcon, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useEvent, useEventBuffer, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useShowErrorEvent };
 //# sourceMappingURL=index.esm.js.map