@bpmn-io/properties-panel 0.12.0 → 0.13.0

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,624 @@ 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,
+        target: "_blank",
+        children: jsxRuntime.jsx(ExternalLinkIcon, {})
+      }) : null
     })]
   });
 }
 
+const DescriptionContext = preact.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 = minDash.isArray(events) ? events : [events];
+
+  if (minDash.isFunction(priority)) {
+    that = callback;
+    callback = priority;
+    priority = DEFAULT_PRIORITY$1;
+  }
+
+  if (!minDash.isNumber(priority)) {
+    throw new Error('priority must be a number');
+  }
+
+  var actualCallback = callback;
+
+  if (that) {
+    actualCallback = minDash.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 (minDash.isFunction(priority)) {
+    that = callback;
+    callback = priority;
+    priority = DEFAULT_PRIORITY$1;
+  }
+
+  if (!minDash.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 = minDash.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) {
+  minDash.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 = preact.createContext({
+  eventBus
+});
+
+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(() => {
+    eventBus.on(event, priority, callback);
+    return () => eventBus.off(event, callback);
+  }, [event, eventBus, callback, priority]);
+}
+
+const HIGH_PRIORITY = 10000;
 /**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
+ * Buffer events and re-fire during passive effect phase.
  *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ * @param {string[]} bufferedEvents
+ * @param {Object} [eventBus]
  */
 
-function usePrevious(value) {
-  const ref = hooks.useRef();
+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(() => {
-    ref.current = value;
+    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 +808,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,124 +843,101 @@ function useLayoutState(path, defaultValue) {
 }
 
 /**
- * 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
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
  *
- * @returns {string}
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
  */
 
-function useDescriptionContext(id, element) {
-  const {
-    getDescriptionForId
-  } = hooks.useContext(DescriptionContext);
-  return getDescriptionForId(id, element);
-}
-
-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"
-    })
+function usePrevious(value) {
+  const ref = hooks.useRef();
+  hooks.useEffect(() => {
+    ref.current = value;
   });
-};
+  return ref.current;
+}
 
-CreateIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
+ *
+ * @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 useShowEntryEvent(show) {
+  const {
+    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();
+      }
 
-DeleteIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
+      if (event.focus && !focus) {
+        setFocus(true);
+      }
+    }
+  }, [show]);
+  hooks.useEffect(() => {
+    if (focus && ref.current) {
+      if (minDash.isFunction(ref.current.focus)) {
+        ref.current.focus();
+      }
 
-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"
-    })]
-  });
-};
+      if (minDash.isFunction(ref.current.select)) {
+        ref.current.select();
+      }
 
-FeelRequiredIcon.defaultProps = {
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
+      setFocus(false);
+    }
+  }, [focus]);
+  useEvent('propertiesPanel.showEntry', onShowEntry);
+  return ref;
+}
 
-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"
-    })]
-  });
-};
+/**
+ * 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}
+ */
 
-FeelOptionalIcon.defaultProps = {
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
+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)) {
+      eventBus.fire('propertiesPanel.showEntry', event);
+      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);
 
@@ -300,6 +960,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,
@@ -322,15 +985,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
+          });
+        })
       })
     })]
   });
@@ -347,6 +1013,7 @@ const DEFAULT_LAYOUT = {
   open: true
 };
 const DEFAULT_DESCRIPTION = {};
+const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
 /**
  * @typedef { {
  *    component: import('preact').Component,
@@ -378,7 +1045,8 @@ const DEFAULT_DESCRIPTION = {};
  *    component?: import('preact').Component,
  *    entries: Array<EntryDefinition>,
  *    id: String,
- *    label: String
+ *    label: String,
+ *    shouldOpen?: Boolean
  * } } GroupDefinition
  *
  *  @typedef { {
@@ -415,7 +1083,8 @@ function PropertiesPanel(props) {
     layoutConfig = {},
     layoutChanged,
     descriptionConfig = {},
-    descriptionLoaded
+    descriptionLoaded,
+    eventBus
   } = props; // set-up layout context
 
   const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
@@ -456,6 +1125,13 @@ function PropertiesPanel(props) {
     description,
     getDescriptionForId
   };
+  useEventBuffer(bufferedEvents, eventBus);
+  const eventContext = {
+    eventBus
+  };
+  const propertiesPanelContext = {
+    element
+  };
 
   if (!element) {
     return jsxRuntime.jsx("div", {
@@ -464,28 +1140,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
+                });
+              })
+            })]
           })
-        })]
+        })
       })
     })
   });
@@ -625,8 +1307,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", {
@@ -653,15 +1347,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
+          });
+        })
       })
     })]
   });
@@ -695,7 +1392,7 @@ function ListItem(props) {
   });
 }
 
-const noop = () => {};
+const noop$3 = () => {};
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
@@ -712,6 +1409,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);
@@ -786,12 +1484,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",
@@ -820,23 +1521,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
+          });
+        })
       })
     })]
   });
@@ -875,13 +1580,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 = ({
@@ -890,9 +1598,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",
@@ -927,18 +1637,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,
@@ -1245,6 +1961,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,
@@ -1252,8 +1987,10 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled
+    disabled,
+    show = noop$1
   } = props;
+  const ref = useShowEntryEvent(show);
 
   const handleChange = ({
     target
@@ -1268,6 +2005,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",
@@ -1306,12 +2044,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,
@@ -1319,7 +2059,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,
@@ -1490,6 +2234,8 @@ function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
 }
 
+const noop = () => {};
+
 function Textfield(props) {
   const {
     debounce,
@@ -1498,8 +2244,10 @@ function Textfield(props) {
     label,
     onInput,
     feel = false,
-    value = ''
+    value = '',
+    show = noop
   } = props;
+  const ref = useShowEntryEvent(show);
   const handleInput = hooks.useMemo(() => {
     return debounce(({
       target
@@ -1515,6 +2263,7 @@ function Textfield(props) {
         label: label
       })]
     }), jsxRuntime.jsx("input", {
+      ref: ref,
       id: prefixId$1(id),
       type: "text",
       name: id,
@@ -1554,53 +2303,61 @@ function TextfieldEntry(props) {
     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 handleChange = newValue => {
-    const err = validate ? validate(newValue) : null;
+  const onInput = newValue => {
+    let newValidationError = 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, {
-      id: id,
-      label: label,
-      value: value,
-      onInput: handleChange,
       debounce: debounce,
       disabled: disabled,
-      feel: feel
+      feel: feel,
+      id: id,
+      label: label,
+      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
     })]
   });
 }
@@ -1725,6 +2482,8 @@ 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;
@@ -1736,6 +2495,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;
@@ -1749,7 +2509,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