@bpmn-io/properties-panel 0.8.0 → 0.10.1

package/dist/index.esm.js

@@ -0,0 +1,1609 @@
+import { useRef, useEffect, useMemo, useContext, useState } from '../preact/hooks';
+import { isFunction, get, assign, set, sortBy, find, isNumber, 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';
+
+/**
+ * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
+ */
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element,
+ * @param {HeaderProvider} props.headerProvider
+ */
+function Header(props) {
+  const {
+    element,
+    headerProvider
+  } = props;
+  const {
+    getElementLabel,
+    getTypeLabel,
+    getElementIcon
+  } = headerProvider;
+  const label = getElementLabel(element);
+  const type = getTypeLabel(element);
+  const ElementIcon = getElementIcon(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-header",
+    children: [jsx("div", {
+      class: "bio-properties-panel-header-icon",
+      children: ElementIcon && jsx(ElementIcon, {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32"
+      })
+    }), jsxs("div", {
+      class: "bio-properties-panel-header-labels",
+      children: [jsx("div", {
+        title: type,
+        class: "bio-properties-panel-header-type",
+        children: type
+      }), getElementLabel(element) ? jsx("div", {
+        title: label,
+        class: "bio-properties-panel-header-label",
+        children: label
+      }) : null]
+    })]
+  });
+}
+
+/**
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
+ *
+ * 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;
+}
+
+const KEY_LENGTH = 6;
+/**
+ * Create a persistent key factory for plain objects without id.
+ *
+ * @example
+ * ```jsx
+ * function List({ objects }) {
+ *   const getKey = useKeyFactory();
+ *   return (<ol>{
+ *     objects.map(obj => {
+ *       const key = getKey(obj);
+ *       return <li key={key}>obj.name</li>
+ *     })
+ *   }</ol>);
+ * }
+ * ```
+ *
+ * @param {any[]} dependencies
+ * @returns {(element: object) => string}
+ */
+
+function useKeyFactory(dependencies = []) {
+  const map = useMemo(() => new Map(), dependencies);
+
+  const getKey = el => {
+    let key = map.get(el);
+
+    if (!key) {
+      key = Math.random().toString().slice(-KEY_LENGTH);
+      map.set(el, key);
+    }
+
+    return key;
+  };
+
+  return getKey;
+}
+
+const DescriptionContext = createContext({
+  description: {},
+  getDescriptionForId: () => {}
+});
+
+const LayoutContext = createContext({
+  layout: {},
+  setLayout: () => {},
+  getLayoutForKey: () => {},
+  setLayoutForKey: () => {}
+});
+
+/**
+ * Creates a state that persists in the global LayoutContext.
+ *
+ * @example
+ * ```jsx
+ * function Group(props) {
+ *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+ * }
+ * ```
+ *
+ * @param {(string|number)[]} path
+ * @param {any} [defaultValue]
+ *
+ * @returns {[ any, Function ]}
+ */
+
+function useLayoutState(path, defaultValue) {
+  const {
+    getLayoutForKey,
+    setLayoutForKey
+  } = useContext(LayoutContext);
+  const layoutForKey = getLayoutForKey(path, defaultValue);
+  const [value, set] = useState(layoutForKey);
+
+  const setState = newValue => {
+    // (1) set component state
+    set(newValue); // (2) set context
+
+    setLayoutForKey(path, newValue);
+  };
+
+  return [value, setState];
+}
+
+/**
+ * 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);
+}
+
+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"
+};
+
+function Group(props) {
+  const {
+    id,
+    entries = [],
+    label
+  } = props;
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+
+  const toggleOpen = () => setOpen(!open);
+
+  const [edited, setEdited] = useState(false); // set edited state depending on all entries
+
+  useEffect(() => {
+    const hasOneEditedEntry = entries.find(entry => {
+      const {
+        id,
+        isEdited
+      } = entry;
+      const entryNode = query(`[data-entry-id="${id}"]`);
+
+      if (!isFunction(isEdited) || !entryNode) {
+        return false;
+      }
+
+      const inputNode = query('.bio-properties-panel-input', entryNode);
+      return isEdited(inputNode);
+    });
+    setEdited(hasOneEditedEntry);
+  }, [entries]);
+  return jsxs("div", {
+    class: "bio-properties-panel-group",
+    "data-group-id": 'group-' + id,
+    children: [jsxs("div", {
+      class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : ''),
+      onClick: toggleOpen,
+      children: [jsx("div", {
+        title: label,
+        class: "bio-properties-panel-group-header-title",
+        children: label
+      }), jsxs("div", {
+        class: "bio-properties-panel-group-header-buttons",
+        children: [edited && jsx(DataMarker, {}), jsx("button", {
+          title: "Toggle section",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+          children: jsx(ArrowIcon, {
+            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+          })
+        })]
+      })]
+    }), jsx("div", {
+      class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
+      children: entries.map(e => e.component)
+    })]
+  });
+}
+
+function DataMarker() {
+  return jsx("div", {
+    title: "Section contains data",
+    class: "bio-properties-panel-dot"
+  });
+}
+
+const DEFAULT_LAYOUT = {
+  open: true
+};
+const DEFAULT_DESCRIPTION = {};
+/**
+ * @typedef { {
+ *    component: import('preact').ComponentChild,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldSort?: Boolean,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {djs.model.base} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ */
+
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ */
+
+function PropertiesPanel(props) {
+  const {
+    element,
+    headerProvider,
+    groups,
+    layoutConfig = {},
+    layoutChanged,
+    descriptionConfig = {},
+    descriptionLoaded
+  } = props; // set-up layout context
+
+  const [layout, setLayout] = useState(createLayout(layoutConfig));
+  useEffect(() => {
+    if (typeof layoutChanged === 'function') {
+      layoutChanged(layout);
+    }
+  }, [layout, layoutChanged]);
+
+  const getLayoutForKey = (key, defaultValue) => {
+    return get(layout, key, defaultValue);
+  };
+
+  const setLayoutForKey = (key, config) => {
+    const newLayout = assign({}, layout);
+    set(newLayout, key, config);
+    setLayout(newLayout);
+  };
+
+  const layoutContext = {
+    layout,
+    setLayout,
+    getLayoutForKey,
+    setLayoutForKey
+  }; // set-up description context
+
+  const description = createDescriptionContext(descriptionConfig);
+
+  if (typeof descriptionLoaded === 'function') {
+    descriptionLoaded(description);
+  }
+
+  const getDescriptionForId = (id, element) => {
+    return description[id] && description[id](element);
+  };
+
+  const descriptionContext = {
+    description,
+    getDescriptionForId
+  };
+
+  if (!element) {
+    return jsx("div", {
+      class: "bio-properties-panel-placeholder",
+      children: "Select an element to edit its properties."
+    });
+  }
+
+  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, {
+              element: element,
+              ...group
+            }, id);
+          })
+        })]
+      })
+    })
+  });
+} // helpers //////////////////
+
+function createLayout(overrides) {
+  return { ...DEFAULT_LAYOUT,
+    ...overrides
+  };
+}
+
+function createDescriptionContext(overrides) {
+  return { ...DEFAULT_DESCRIPTION,
+    ...overrides
+  };
+}
+
+function DropdownButton(props) {
+  const {
+    class: className,
+    children,
+    menuItems = []
+  } = props;
+  const dropdownRef = useRef(null);
+  const menuRef = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  const close = () => setOpen(false);
+
+  function onDropdownToggle(event) {
+    if (menuRef.current && menuRef.current.contains(event.target)) {
+      return;
+    }
+
+    event.stopPropagation();
+    setOpen(open => !open);
+  }
+
+  function onActionClick(event, action) {
+    event.stopPropagation();
+    close();
+    action();
+  }
+
+  useGlobalClick([dropdownRef.current], () => close());
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-dropdown-button', {
+      open
+    }, className),
+    onClick: onDropdownToggle,
+    ref: dropdownRef,
+    children: [children, jsx("div", {
+      class: "bio-properties-panel-dropdown-button__menu",
+      ref: menuRef,
+      children: menuItems.map((item, index) => jsx(MenuItem, {
+        onClick: onActionClick,
+        item: item
+      }, index))
+    })]
+  });
+}
+
+function MenuItem({
+  item,
+  onClick
+}) {
+  if (item.separator) {
+    return jsx("div", {
+      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
+    });
+  }
+
+  if (item.action) {
+    return jsx("button", {
+      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
+      onClick: event => onClick(event, item.action),
+      children: item.entry
+    });
+  }
+
+  return jsx("div", {
+    class: "bio-properties-panel-dropdown-button__menu-item",
+    children: item.entry
+  });
+}
+/**
+ *
+ * @param {Array<null | Element>} ignoredElements
+ * @param {Function} callback
+ */
+
+
+function useGlobalClick(ignoredElements, callback) {
+  useEffect(() => {
+    /**
+     * @param {MouseEvent} event
+     */
+    function listener(event) {
+      if (ignoredElements.some(element => element && element.contains(event.target))) {
+        return;
+      }
+
+      callback();
+    }
+
+    document.addEventListener('click', listener, {
+      capture: true
+    });
+    return () => document.removeEventListener('click', listener, {
+      capture: true
+    });
+  }, [...ignoredElements, callback]);
+}
+
+function HeaderButton(props) {
+  const {
+    children = null,
+    class: classname,
+    onClick = () => {},
+    ...otherProps
+  } = props;
+  return jsx("button", { ...otherProps,
+    onClick: onClick,
+    class: classnames('bio-properties-panel-group-header-button', classname),
+    children: children
+  });
+}
+
+function CollapsibleEntry(props) {
+  const {
+    id,
+    entries = [],
+    label,
+    remove,
+    open: shouldOpen
+  } = props;
+  const [open, setOpen] = useState(shouldOpen);
+
+  const toggleOpen = () => setOpen(!open); // todo(pinussilvestrus): translate once we have a translate mechanism for the core
+
+
+  const placeholderLabel = '<empty>';
+  return jsxs("div", {
+    "data-entry-id": id,
+    class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
+    children: [jsxs("div", {
+      class: "bio-properties-panel-collapsible-entry-header",
+      onClick: toggleOpen,
+      children: [jsx("div", {
+        title: label || placeholderLabel,
+        class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
+        children: label || placeholderLabel
+      }), jsx("button", {
+        title: "Toggle list item",
+        class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
+        children: jsx(ArrowIcon, {
+          class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+        })
+      }), remove ? jsx("button", {
+        title: "Delete item",
+        class: "bio-properties-panel-remove-entry",
+        onClick: remove,
+        children: jsx(DeleteIcon, {})
+      }) : null]
+    }), jsx("div", {
+      class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
+      children: entries.map(e => e.component)
+    })]
+  });
+}
+
+function ListItem(props) {
+  const {
+    autoOpen,
+    autoFocusEntry
+  } = props; // focus specified entry on auto open
+
+  useEffect(() => {
+    if (autoOpen && autoFocusEntry) {
+      const entry = query(`[data-entry-id="${autoFocusEntry}"]`);
+      const focusableInput = query('.bio-properties-panel-input', entry);
+
+      if (focusableInput) {
+        if (isFunction(focusableInput.select)) {
+          focusableInput.select();
+        } else if (isFunction(focusableInput.focus)) {
+          focusableInput.focus();
+        }
+      }
+    }
+  }, [autoOpen, autoFocusEntry]);
+  return jsx("div", {
+    class: "bio-properties-panel-list-item",
+    children: jsx(CollapsibleEntry, { ...props,
+      open: autoOpen
+    })
+  });
+}
+
+const noop = () => {};
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
+ */
+
+
+function ListGroup(props) {
+  const {
+    element,
+    id,
+    items,
+    label,
+    add,
+    shouldSort = true,
+    shouldOpen = true
+  } = props;
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [ordering, setOrdering] = useState([]);
+  const [newItemAdded, setNewItemAdded] = useState(false);
+  const prevItems = usePrevious(items);
+  const prevElement = usePrevious(element);
+  const elementChanged = element !== prevElement;
+  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen); // reset initial ordering when element changes (before first render)
+
+  if (elementChanged) {
+    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
+  } // keep ordering in sync to items - and open changes
+  // (0) set initial ordering from given items
+
+
+  useEffect(() => {
+    if (!prevItems || !shouldSort) {
+      setOrdering(createOrdering(items));
+    }
+  }, [items, element]); // (1) items were added
+
+  useEffect(() => {
+    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
+      let add = [];
+      items.forEach(item => {
+        if (!ordering.includes(item.id)) {
+          add.push(item.id);
+        }
+      });
+      let newOrdering = ordering; // open if not open and configured
+
+      if (!open && shouldOpen) {
+        toggleOpen(); // if I opened and I should sort, then sort items
+
+        if (shouldSort) {
+          newOrdering = createOrdering(sortItems(items));
+        }
+      } // add new items on top or bottom depending on sorting behavior
+
+
+      newOrdering = newOrdering.filter(item => !add.includes(item));
+
+      if (shouldSort) {
+        newOrdering.unshift(...add);
+      } else {
+        newOrdering.push(...add);
+      }
+
+      setOrdering(newOrdering);
+      setNewItemAdded(true);
+    } else {
+      setNewItemAdded(false);
+    }
+  }, [items, open, shouldHandleEffects]); // (2) sort items on open if shouldSort is set
+
+  useEffect(() => {
+    if (shouldSort && open && !newItemAdded) {
+      setOrdering(createOrdering(sortItems(items)));
+    }
+  }, [open, shouldSort]); // (3) items were deleted
+
+  useEffect(() => {
+    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
+      let keep = [];
+      ordering.forEach(o => {
+        if (getItem(items, o)) {
+          keep.push(o);
+        }
+      });
+      setOrdering(keep);
+    }
+  }, [items, shouldHandleEffects]);
+
+  const toggleOpen = () => setOpen(!open);
+
+  const hasItems = !!items.length;
+  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,
+      children: [jsx("div", {
+        title: label,
+        class: "bio-properties-panel-group-header-title",
+        children: label
+      }), jsxs("div", {
+        class: "bio-properties-panel-group-header-buttons",
+        children: [add ? jsxs("button", {
+          title: "Create new list item",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
+          onClick: add,
+          children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
+            class: "bio-properties-panel-add-entry-label",
+            children: "Create"
+          }) : null]
+        }) : null, hasItems ? jsx("div", {
+          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          class: "bio-properties-panel-list-badge",
+          children: items.length
+        }) : null, hasItems ? jsx("button", {
+          title: "Toggle section",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+          children: jsx(ArrowIcon, {
+            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+          })
+        }) : null]
+      })]
+    }), 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);
+      })
+    })]
+  });
+} // helpers ////////////////////
+
+/**
+ * Sorts given items alphanumeric by label
+ */
+
+function sortItems(items) {
+  return sortBy(items, i => i.label.toLowerCase());
+}
+
+function getItem(items, id) {
+  return find(items, i => i.id === id);
+}
+
+function createOrdering(items) {
+  return items.map(i => i.id);
+}
+
+function Description(props) {
+  const {
+    element,
+    forId,
+    value
+  } = props;
+  const contextDescription = useDescriptionContext(forId, element);
+  const description = value || contextDescription;
+
+  if (description) {
+    return jsx("div", {
+      class: "bio-properties-panel-description",
+      children: description
+    });
+  }
+}
+
+function Checkbox(props) {
+  const {
+    id,
+    label,
+    onChange,
+    disabled,
+    value = false
+  } = props;
+
+  const handleChange = ({
+    target
+  }) => {
+    onChange(target.checked);
+  };
+
+  return jsxs("div", {
+    class: "bio-properties-panel-checkbox",
+    children: [jsx("input", {
+      id: prefixId$6(id),
+      name: id,
+      type: "checkbox",
+      class: "bio-properties-panel-input",
+      onChange: handleChange,
+      checked: value,
+      disabled: disabled
+    }), jsx("label", {
+      for: prefixId$6(id),
+      class: "bio-properties-panel-label",
+      children: label
+    })]
+  });
+}
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {boolean} [props.disabled]
+ */
+
+
+function CheckboxEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    getValue,
+    setValue,
+    disabled
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
+    "data-entry-id": id,
+    children: [jsx(Checkbox, {
+      id: id,
+      label: label,
+      onChange: setValue,
+      value: value,
+      disabled: disabled
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && !!node.checked;
+} // helpers /////////////////
+
+function prefixId$6(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function List(props) {
+  const {
+    id,
+    element,
+    items = [],
+    renderItem,
+    label = '<empty>',
+    open: shouldOpen,
+    onAdd,
+    onRemove,
+    autoFocusEntry,
+    compareFn
+  } = props;
+  const [open, setOpen] = useState(!!shouldOpen);
+  const hasItems = !!items.length;
+
+  const toggleOpen = () => hasItems && setOpen(!open);
+
+  const opening = !usePrevious(open) && open;
+  const elementChanged = usePrevious(element) !== element;
+  const shouldReset = opening || elementChanged;
+  const sortedItems = useSortedItems(items, compareFn, shouldReset);
+  const newItems = useNewItems(items, elementChanged);
+  useEffect(() => {
+    if (open && !hasItems) {
+      setOpen(false);
+    }
+  }, [open, hasItems]);
+  /**
+   * @param {MouseEvent} event
+   */
+
+  function addItem(event) {
+    event.stopPropagation();
+    onAdd();
+
+    if (!open) {
+      setOpen(true);
+    }
+  }
+
+  return jsxs("div", {
+    "data-entry-id": id,
+    class: classnames('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
+    children: [jsxs("div", {
+      class: "bio-properties-panel-list-entry-header",
+      onClick: toggleOpen,
+      children: [jsx("div", {
+        title: label,
+        class: classnames('bio-properties-panel-list-entry-header-title', open && 'open'),
+        children: label
+      }), jsxs("div", {
+        class: "bio-properties-panel-list-entry-header-buttons",
+        children: [jsxs("button", {
+          title: "Create new list item",
+          onClick: addItem,
+          class: "bio-properties-panel-add-entry",
+          children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
+            class: "bio-properties-panel-add-entry-label",
+            children: "Create"
+          }) : null]
+        }), hasItems && jsx("div", {
+          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          class: "bio-properties-panel-list-badge",
+          children: items.length
+        }), hasItems && jsx("button", {
+          title: "Toggle list item",
+          class: "bio-properties-panel-arrow",
+          children: jsx(ArrowIcon, {
+            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+          })
+        })]
+      })]
+    }), hasItems && jsx(ItemsList, {
+      autoFocusEntry: autoFocusEntry,
+      id: id,
+      open: open,
+      items: sortedItems,
+      newItems: newItems,
+      onRemove: onRemove,
+      renderItem: renderItem
+    })]
+  });
+}
+
+function ItemsList(props) {
+  const {
+    autoFocusEntry,
+    id,
+    items,
+    newItems,
+    open,
+    onRemove,
+    renderItem
+  } = props;
+  const getKey = useKeyFactory();
+  const newItem = newItems[0];
+  useEffect(() => {
+    if (newItem && autoFocusEntry) {
+      // (0) select the parent entry (containing all list items)
+      const entry = query(`[data-entry-id="${id}"]`); // (1) select the first input or a custom element to be focussed
+
+      const selector = typeof autoFocusEntry === 'boolean' ? '.bio-properties-panel-input' : autoFocusEntry;
+      const focusableInput = query(selector, entry); // (2) set focus
+
+      if (focusableInput) {
+        if (isFunction(focusableInput.select)) {
+          focusableInput.select();
+        } else if (isFunction(focusableInput.focus)) {
+          focusableInput.focus();
+        }
+      }
+    }
+  }, [newItem, autoFocusEntry, id]);
+  return jsx("ol", {
+    class: classnames('bio-properties-panel-list-entry-items', open ? 'open' : ''),
+    children: items.map((item, index) => {
+      const key = getKey(item);
+      return jsxs("li", {
+        class: "bio-properties-panel-list-entry-item",
+        children: [renderItem(item, index, item === newItem), onRemove && jsx("button", {
+          type: "button",
+          title: "Delete item",
+          class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
+          onClick: () => onRemove && onRemove(item),
+          children: jsx(DeleteIcon, {})
+        })]
+      }, key);
+    })
+  });
+}
+/**
+ * Place new items in the beginning of the list and sort the rest with provided function.
+ *
+ * @template Item
+ * @param {Item[]} currentItems
+ * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
+ * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
+ * @returns {Item[]}
+ */
+
+
+function useSortedItems(currentItems, compareFn, shouldReset = false) {
+  const itemsRef = useRef(currentItems.slice()); // (1) Reset and optionally sort.
+
+  if (shouldReset) {
+    itemsRef.current = currentItems.slice();
+
+    if (compareFn) {
+      itemsRef.current.sort(compareFn);
+    }
+  } else {
+    const items = itemsRef.current; // (2) Add new item to the list.
+
+    for (const item of currentItems) {
+      if (!items.includes(item)) {
+        // Unshift or push depending on whether we have a compareFn
+        compareFn ? items.unshift(item) : items.push(item);
+      }
+    } // (3) Filter out removed items.
+
+
+    itemsRef.current = items.filter(item => currentItems.includes(item));
+  }
+
+  return itemsRef.current;
+}
+
+function useNewItems(items = [], shouldReset) {
+  const previousItems = usePrevious(items.slice()) || [];
+
+  if (shouldReset) {
+    return [];
+  }
+
+  return previousItems ? items.filter(item => !previousItems.includes(item)) : [];
+}
+
+function NumberField(props) {
+  const {
+    debounce,
+    disabled,
+    id,
+    label,
+    max,
+    min,
+    onInput,
+    step,
+    value = ''
+  } = props;
+  const handleInput = useMemo(() => {
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
+    });
+  }, [onInput, debounce]);
+  return jsxs("div", {
+    class: "bio-properties-panel-numberfield",
+    children: [jsx("label", {
+      for: prefixId$5(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("input", {
+      id: prefixId$5(id),
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      step: step,
+      value: value
+    })]
+  });
+}
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {String} props.step
+ */
+
+
+function NumberFieldEntry(props) {
+  const {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry",
+    "data-entry-id": id,
+    children: [jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onInput: setValue,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$5(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function Select(props) {
+  const {
+    id,
+    label,
+    onChange,
+    options = [],
+    value,
+    disabled
+  } = props;
+
+  const handleChange = ({
+    target
+  }) => {
+    onChange(target.value);
+  };
+
+  return jsxs("div", {
+    class: "bio-properties-panel-select",
+    children: [jsx("label", {
+      for: prefixId$4(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("select", {
+      id: prefixId$4(id),
+      name: id,
+      class: "bio-properties-panel-input",
+      onInput: handleChange,
+      value: value,
+      disabled: disabled,
+      children: options.map((option, idx) => {
+        return jsx("option", {
+          value: option.value,
+          disabled: option.disabled,
+          children: option.label
+        }, idx);
+      })
+    })]
+  });
+}
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
+ */
+
+
+function SelectEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    getValue,
+    setValue,
+    getOptions,
+    disabled
+  } = props;
+  const value = getValue(element);
+  const options = getOptions(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry",
+    "data-entry-id": id,
+    children: [jsx(Select, {
+      id: id,
+      label: label,
+      value: value,
+      onChange: setValue,
+      options: options,
+      disabled: disabled
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$4(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+function prefixId$4(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function Simple(props) {
+  const {
+    debounce,
+    disabled,
+    element,
+    getValue,
+    id,
+    onBlur,
+    onFocus,
+    setValue
+  } = props;
+  const handleInput = useMemo(() => {
+    return debounce(({
+      target
+    }) => setValue(target.value.length ? target.value : undefined));
+  }, [setValue, debounce]);
+  const value = getValue(element);
+  return jsx("div", {
+    class: "bio-properties-panel-simple",
+    children: jsx("input", {
+      id: prefixId$3(id),
+      type: "text",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      value: value || ''
+    })
+  });
+}
+function isEdited$3(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+function prefixId$3(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function TextArea(props) {
+  const {
+    id,
+    label,
+    rows = 2,
+    debounce,
+    onInput,
+    value = '',
+    disabled,
+    monospace
+  } = props;
+  const handleInput = useMemo(() => {
+    return debounce(({
+      target
+    }) => onInput(target.value.length ? target.value : undefined));
+  }, [onInput, debounce]);
+  return jsxs("div", {
+    class: "bio-properties-panel-textarea",
+    children: [jsx("label", {
+      for: prefixId$2(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("textarea", {
+      id: prefixId$2(id),
+      name: id,
+      spellCheck: "false",
+      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
+      onInput: handleInput,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      rows: rows,
+      value: value,
+      disabled: disabled
+    })]
+  });
+}
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {boolean} [props.disabled]
+ */
+
+
+function TextAreaEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    label,
+    getValue,
+    setValue,
+    rows,
+    monospace,
+    disabled
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry",
+    "data-entry-id": id,
+    children: [jsx(TextArea, {
+      id: id,
+      label: label,
+      value: value,
+      onInput: setValue,
+      rows: rows,
+      debounce: debounce,
+      monospace: monospace,
+      disabled: disabled
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$2(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+function prefixId$2(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function Textfield(props) {
+  const {
+    debounce,
+    disabled = false,
+    id,
+    label,
+    onInput,
+    value = ''
+  } = props;
+  const handleInput = useMemo(() => {
+    return debounce(({
+      target
+    }) => onInput(target.value.length ? target.value : undefined));
+  }, [onInput, debounce]);
+  return jsxs("div", {
+    class: "bio-properties-panel-textfield",
+    children: [jsx("label", {
+      for: prefixId$1(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("input", {
+      id: prefixId$1(id),
+      type: "text",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      onInput: handleInput,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      value: value || ''
+    })]
+  });
+}
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.validate
+ */
+
+
+function TextfieldEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    disabled,
+    label,
+    getValue,
+    setValue,
+    validate
+  } = props;
+  const [error, setError] = useState(null);
+  const [invalidValueCache, setInvalidValueCache] = useState(null);
+  let value = getValue(element);
+  const prevValue = usePrevious(value); // validate again when value prop changed
+
+  useEffect(() => {
+    const err = validate ? validate(value) : null;
+    setError(err);
+  }, [value]); // validate on change
+
+  const handleChange = newValue => {
+    const err = validate ? validate(newValue) : null;
+
+    if (err) {
+      setInvalidValueCache(newValue);
+    } else {
+      setValue(newValue);
+    }
+
+    setError(err);
+  }; // keep showing invalid value on errors, although it was not set
+
+
+  if (prevValue === value && error) {
+    value = invalidValueCache;
+  }
+
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(Textfield, {
+      id: id,
+      label: label,
+      value: value,
+      onInput: handleChange,
+      debounce: debounce,
+      disabled: disabled
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    })]
+  });
+}
+function isEdited$1(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+function prefixId$1(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+function ToggleSwitch(props) {
+  const {
+    id,
+    label,
+    onInput,
+    value,
+    switcherLabel
+  } = props;
+
+  const handleInput = async () => {
+    onInput(!value);
+  };
+
+  return jsxs("div", {
+    class: "bio-properties-panel-toggle-switch",
+    children: [jsx("label", {
+      class: "bio-properties-panel-label",
+      for: prefixId(id),
+      children: label
+    }), jsxs("div", {
+      class: "bio-properties-panel-field-wrapper",
+      children: [jsxs("label", {
+        class: "bio-properties-panel-toggle-switch__switcher",
+        children: [jsx("input", {
+          id: prefixId(id),
+          class: "bio-properties-panel-input",
+          type: "checkbox",
+          name: id,
+          onInput: handleInput,
+          checked: value
+        }), jsx("span", {
+          class: "bio-properties-panel-toggle-switch__slider"
+        })]
+      }), jsx("p", {
+        class: "bio-properties-panel-toggle-switch__label",
+        children: switcherLabel
+      })]
+    })]
+  });
+}
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ */
+
+
+function ToggleSwitchEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    switcherLabel,
+    getValue,
+    setValue
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
+    "data-entry-id": id,
+    children: [jsx(ToggleSwitch, {
+      id: id,
+      label: label,
+      value: value,
+      onInput: setValue,
+      switcherLabel: switcherLabel
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited(node) {
+  return node && !!node.checked;
+} // helpers /////////////////
+
+function prefixId(id) {
+  return `bio-properties-panel-${id}`;
+}
+
+const DEFAULT_DEBOUNCE_TIME = 300;
+function debounceInput(debounceDelay) {
+  return function _debounceInput(fn) {
+    if (debounceDelay !== false) {
+      var debounceTime = isNumber(debounceDelay) ? debounceDelay : DEFAULT_DEBOUNCE_TIME;
+      return debounce(fn, debounceTime);
+    } else {
+      return fn;
+    }
+  };
+}
+debounceInput.$inject = ['config.debounceInput'];
+
+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 };
+//# sourceMappingURL=index.esm.js.map