@bpmn-io/properties-panel 0.4.1 → 0.5.1

package/lib/components/entries/List.js

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { query as domQuery } from 'min-dom';
+import { isFunction } from 'min-dash';
 import { useKeyFactory, usePrevious } from '../../hooks';
 import classnames from 'classnames';
-import { CreateIcon, GroupArrowIcon, ListDeleteIcon } from '../icons';
+import { ArrowIcon, CreateIcon, DeleteIcon } from '../icons';
 /**
  * Entry for handling lists represented as nested entries.
  *
@@ -16,7 +17,7 @@ import { CreateIcon, GroupArrowIcon, ListDeleteIcon } from '../icons';
  * @param {Function} [props.onRemove]
  * @param {Item[]} [props.items]
  * @param {boolean} [props.open]
- * @param {string} [props.autoFocusEntry]
+ * @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input
  * @param {(a: Item, b: Item) => -1 | 0 | 1} [props.compareFn]
  * @returns
  */
@@ -66,26 +67,32 @@ export default function List(props) {
 
   return _jsxs("div", {
     "data-entry-id": id,
-    class: classnames('bio-properties-panel-entry', 'bio-properties-panel-list-entry', open ? 'open' : ''),
+    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: getTitle(label, items),
+        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: [_jsx("button", {
+        children: [_jsxs("button", {
+          title: "Create new list item",
           onClick: addItem,
           class: "bio-properties-panel-add-entry",
-          children: _jsx(CreateIcon, {})
+          children: [_jsx(CreateIcon, {}), !hasItems ? _jsx("div", {
+            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", {
-          class: "bio-properties-panel-list-entry-arrow",
-          children: _jsx(GroupArrowIcon, {
+          title: "Toggle list item",
+          class: "bio-properties-panel-arrow",
+          children: _jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
           })
         })]
@@ -116,11 +123,18 @@ function ItemsList(props) {
   const newItem = newItems[0];
   useEffect(() => {
     if (newItem && autoFocusEntry) {
-      const entry = domQuery(`[data-entry-id="${id}"]`);
-      const focusableInput = domQuery('.bio-properties-panel-input', entry);
+      // (0) select the parent entry (containing all list items)
+      const entry = domQuery(`[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 = domQuery(selector, entry); // (2) set focus
 
       if (focusableInput) {
-        focusableInput.focus();
+        if (isFunction(focusableInput.select)) {
+          focusableInput.select();
+        } else if (isFunction(focusableInput.focus)) {
+          focusableInput.focus();
+        }
       }
     }
   }, [newItem, autoFocusEntry, id]);
@@ -132,22 +146,15 @@ function ItemsList(props) {
         class: "bio-properties-panel-list-entry-item",
         children: [renderItem(item, index, item === newItem), onRemove && _jsx("button", {
           type: "button",
-          class: "bio-properties-panel-remove-entry",
+          title: "Delete item",
+          class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
           onClick: () => onRemove && onRemove(item),
-          children: _jsx(ListDeleteIcon, {})
+          children: _jsx(DeleteIcon, {})
         })]
       }, key);
     })
   });
 }
-
-function getTitle(label, items) {
-  if (!items.length) {
-    return label;
-  }
-
-  return `${label} (${items.length} items)`;
-}
 /**
  * Place new items in the beginning of the list and sort the rest with provided function.
  *
@@ -169,11 +176,12 @@ function useSortedItems(currentItems, compareFn, shouldReset = false) {
       itemsRef.current.sort(compareFn);
     }
   } else {
-    const items = itemsRef.current; // (2) Move new items to the beginning of the list.
+    const items = itemsRef.current; // (2) Add new item to the list.
 
     for (const item of currentItems) {
       if (!items.includes(item)) {
-        items.unshift(item);
+        // Unshift or push depending on whether we have a compareFn
+        compareFn ? items.unshift(item) : items.push(item);
       }
     } // (3) Filter out removed items.
 

package/lib/components/entries/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/List.js"],"names":["useEffect","useRef","useState","query","domQuery","useKeyFactory","usePrevious","classnames","CreateIcon","GroupArrowIcon","ListDeleteIcon","List","props","id","element","items","renderItem","label","open","shouldOpen","onAdd","onRemove","autoFocusEntry","compareFn","setOpen","hasItems","length","toggleOpen","opening","elementChanged","shouldReset","sortedItems","useSortedItems","newItems","useNewItems","addItem","event","stopPropagation","getTitle","ItemsList","getKey","newItem","entry","focusableInput","focus","map","item","index","key","currentItems","itemsRef","slice","current","sort","includes","unshift","filter","previousItems"],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState\n} from 'preact/hooks';\n\nimport {\n  query as domQuery\n} from 'min-dom';\n\nimport {\n  useKeyFactory,\n  usePrevious\n} from '../../hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  CreateIcon,\n  GroupArrowIcon,\n  ListDeleteIcon\n} from '../icons';\n\n/**\n * Entry for handling lists represented as nested entries.\n *\n * @template Item\n * @param {object} props\n * @param {string} props.id\n * @param {*} props.element\n * @param {Function} props.onAdd\n * @param {(item: Item, index: number, isNew: boolean) => JSX.Element} props.renderItem\n * @param {string} [props.label='<empty>']\n * @param {Function} [props.onRemove]\n * @param {Item[]} [props.items]\n * @param {boolean} [props.open]\n * @param {string} [props.autoFocusEntry]\n * @param {(a: Item, b: Item) => -1 | 0 | 1} [props.compareFn]\n * @returns\n */\nexport default function List(props) {\n  const {\n    id,\n    element,\n    items = [],\n    renderItem,\n    label = '<empty>',\n    open: shouldOpen,\n    onAdd,\n    onRemove,\n    autoFocusEntry,\n    compareFn\n  } = props;\n\n  const [ open, setOpen ] = useState(!!shouldOpen);\n\n  const hasItems = !!items.length;\n  const toggleOpen = () => hasItems && setOpen(!open);\n\n  const opening = !usePrevious(open) && open;\n  const elementChanged = usePrevious(element) !== element;\n  const shouldReset = opening || elementChanged;\n  const sortedItems = useSortedItems(items, compareFn, shouldReset);\n\n  const newItems = useNewItems(items, elementChanged);\n\n  useEffect(() => {\n    if (open && !hasItems) {\n      setOpen(false);\n    }\n  }, [ open, hasItems ]);\n\n  /**\n   * @param {MouseEvent} event\n   */\n  function addItem(event) {\n    event.stopPropagation();\n    onAdd();\n\n    if (!open) {\n      setOpen(true);\n    }\n  }\n\n  return (\n    <div\n      data-entry-id={ id }\n      class={ classnames(\n        'bio-properties-panel-entry',\n        'bio-properties-panel-list-entry',\n        open ? 'open' : ''\n      ) }>\n      <div class=\"bio-properties-panel-list-entry-header\" onClick={ toggleOpen }>\n        <div\n          title={ getTitle(label, items) }\n          class={ classnames(\n            'bio-properties-panel-list-entry-header-title',\n            open && 'open'\n          ) }>\n          { label }\n        </div>\n        <div\n          class=\"bio-properties-panel-list-entry-header-buttons\"\n        >\n          <button onClick={ addItem } class=\"bio-properties-panel-add-entry\">\n            <CreateIcon />\n          </button>\n          {\n            hasItems && (\n              <div class=\"bio-properties-panel-list-badge\">\n                { items.length }\n              </div>\n            )\n          }\n          {\n            hasItems && (\n              <button class=\"bio-properties-panel-list-entry-arrow\">\n                <GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n              </button>\n            )\n          }\n        </div>\n      </div>\n      {\n        hasItems && (\n          <ItemsList\n            autoFocusEntry={ autoFocusEntry }\n            id={ id }\n            open={ open }\n            items={ sortedItems }\n            newItems={ newItems }\n            onRemove={ onRemove }\n            renderItem={ renderItem }\n          />\n        )\n      }\n    </div>\n  );\n}\n\nfunction ItemsList(props) {\n  const {\n    autoFocusEntry,\n    id,\n    items,\n    newItems,\n    open,\n    onRemove,\n    renderItem\n  } = props;\n\n  const getKey = useKeyFactory();\n\n  const newItem = newItems[0];\n\n  useEffect(() => {\n    if (newItem && autoFocusEntry) {\n      const entry = domQuery(`[data-entry-id=\"${id}\"]`);\n      const focusableInput = domQuery('.bio-properties-panel-input', entry);\n\n      if (focusableInput) {\n        focusableInput.focus();\n      }\n    }\n  }, [ newItem, autoFocusEntry, id ]);\n\n  return (\n    <ol class={ classnames(\n      'bio-properties-panel-list-entry-items',\n      open ? 'open' : ''\n    ) }>\n      {\n        items.map((item, index) => {\n          const key = getKey(item);\n\n          return (<li class=\"bio-properties-panel-list-entry-item\" key={ key }>\n            {renderItem(item, index, item === newItem)}\n            {\n              onRemove && (\n                <button\n                  type=\"button\"\n                  class=\"bio-properties-panel-remove-entry\"\n                  onClick={ () => onRemove && onRemove(item) }\n                ><ListDeleteIcon /></button>\n              )\n            }\n          </li>);\n        })\n      }\n    </ol>);\n}\n\nfunction getTitle(label, items) {\n  if (!items.length) {\n    return label;\n  }\n\n  return `${label} (${items.length} items)`;\n}\n\n/**\n * Place new items in the beginning of the list and sort the rest with provided function.\n *\n * @template Item\n * @param {Item[]} currentItems\n * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items\n * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook\n * @returns {Item[]}\n */\nfunction useSortedItems(currentItems, compareFn, shouldReset = false) {\n  const itemsRef = useRef(currentItems.slice());\n\n  // (1) Reset and optionally sort.\n  if (shouldReset) {\n    itemsRef.current = currentItems.slice();\n\n    if (compareFn) {\n      itemsRef.current.sort(compareFn);\n    }\n  } else {\n    const items = itemsRef.current;\n\n    // (2) Move new items to the beginning of the list.\n    for (const item of currentItems) {\n      if (!items.includes(item)) {\n        items.unshift(item);\n      }\n    }\n\n    // (3) Filter out removed items.\n    itemsRef.current = items.filter(item => currentItems.includes(item));\n  }\n\n  return itemsRef.current;\n}\n\nfunction useNewItems(items = [], shouldReset) {\n  const previousItems = usePrevious(items.slice()) || [];\n\n  if (shouldReset) {\n    return [];\n  }\n\n  return previousItems ? items.filter(item => !previousItems.includes(item)) : [];\n}\n"],"file":"List.js"}
+{"version":3,"sources":["../../../src/components/entries/List.js"],"names":["useEffect","useRef","useState","query","domQuery","isFunction","useKeyFactory","usePrevious","classnames","ArrowIcon","CreateIcon","DeleteIcon","List","props","id","element","items","renderItem","label","open","shouldOpen","onAdd","onRemove","autoFocusEntry","compareFn","setOpen","hasItems","length","toggleOpen","opening","elementChanged","shouldReset","sortedItems","useSortedItems","newItems","useNewItems","addItem","event","stopPropagation","ItemsList","getKey","newItem","entry","selector","focusableInput","select","focus","map","item","index","key","currentItems","itemsRef","slice","current","sort","includes","unshift","push","filter","previousItems"],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState\n} from 'preact/hooks';\n\nimport {\n  query as domQuery\n} from 'min-dom';\n\nimport { isFunction } from 'min-dash';\n\nimport {\n  useKeyFactory,\n  usePrevious\n} from '../../hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  ArrowIcon,\n  CreateIcon,\n  DeleteIcon\n} from '../icons';\n\n/**\n * Entry for handling lists represented as nested entries.\n *\n * @template Item\n * @param {object} props\n * @param {string} props.id\n * @param {*} props.element\n * @param {Function} props.onAdd\n * @param {(item: Item, index: number, isNew: boolean) => JSX.Element} props.renderItem\n * @param {string} [props.label='<empty>']\n * @param {Function} [props.onRemove]\n * @param {Item[]} [props.items]\n * @param {boolean} [props.open]\n * @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input\n * @param {(a: Item, b: Item) => -1 | 0 | 1} [props.compareFn]\n * @returns\n */\nexport default function List(props) {\n  const {\n    id,\n    element,\n    items = [],\n    renderItem,\n    label = '<empty>',\n    open: shouldOpen,\n    onAdd,\n    onRemove,\n    autoFocusEntry,\n    compareFn\n  } = props;\n\n  const [ open, setOpen ] = useState(!!shouldOpen);\n\n  const hasItems = !!items.length;\n  const toggleOpen = () => hasItems && setOpen(!open);\n\n  const opening = !usePrevious(open) && open;\n  const elementChanged = usePrevious(element) !== element;\n  const shouldReset = opening || elementChanged;\n  const sortedItems = useSortedItems(items, compareFn, shouldReset);\n\n  const newItems = useNewItems(items, elementChanged);\n\n  useEffect(() => {\n    if (open && !hasItems) {\n      setOpen(false);\n    }\n  }, [ open, hasItems ]);\n\n  /**\n   * @param {MouseEvent} event\n   */\n  function addItem(event) {\n    event.stopPropagation();\n    onAdd();\n\n    if (!open) {\n      setOpen(true);\n    }\n  }\n\n  return (\n    <div\n      data-entry-id={ id }\n      class={ classnames(\n        'bio-properties-panel-entry',\n        'bio-properties-panel-list-entry',\n        hasItems ? '' : 'empty',\n        open ? 'open' : ''\n      ) }>\n      <div class=\"bio-properties-panel-list-entry-header\" onClick={ toggleOpen }>\n        <div\n          title={ label }\n          class={ classnames(\n            'bio-properties-panel-list-entry-header-title',\n            open && 'open'\n          ) }>\n          { label }\n        </div>\n        <div\n          class=\"bio-properties-panel-list-entry-header-buttons\"\n        >\n          <button\n            title=\"Create new list item\"\n            onClick={ addItem }\n            class=\"bio-properties-panel-add-entry\"\n          >\n            <CreateIcon />\n            {\n              !hasItems ? (\n                <div class=\"bio-properties-panel-add-entry-label\">Create</div>\n              )\n                : null\n            }\n          </button>\n          {\n            hasItems && (\n              <div\n                title={ `List contains ${items.length} item${items.length != 1 ? 's' : ''}` }\n                class=\"bio-properties-panel-list-badge\"\n              >\n                { items.length }\n              </div>\n            )\n          }\n          {\n            hasItems && (\n              <button\n                title=\"Toggle list item\"\n                class=\"bio-properties-panel-arrow\"\n              >\n                <ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n              </button>\n            )\n          }\n        </div>\n      </div>\n      {\n        hasItems && (\n          <ItemsList\n            autoFocusEntry={ autoFocusEntry }\n            id={ id }\n            open={ open }\n            items={ sortedItems }\n            newItems={ newItems }\n            onRemove={ onRemove }\n            renderItem={ renderItem }\n          />\n        )\n      }\n    </div>\n  );\n}\n\nfunction ItemsList(props) {\n  const {\n    autoFocusEntry,\n    id,\n    items,\n    newItems,\n    open,\n    onRemove,\n    renderItem\n  } = props;\n\n  const getKey = useKeyFactory();\n\n  const newItem = newItems[0];\n\n  useEffect(() => {\n    if (newItem && autoFocusEntry) {\n\n      // (0) select the parent entry (containing all list items)\n      const entry = domQuery(`[data-entry-id=\"${id}\"]`);\n\n      // (1) select the first input or a custom element to be focussed\n      const selector = typeof(autoFocusEntry) === 'boolean' ?\n        '.bio-properties-panel-input' :\n        autoFocusEntry;\n      const focusableInput = domQuery(selector, entry);\n\n      // (2) set focus\n      if (focusableInput) {\n\n        if (isFunction(focusableInput.select)) {\n          focusableInput.select();\n        } else if (isFunction(focusableInput.focus)) {\n          focusableInput.focus();\n        }\n\n      }\n    }\n  }, [ newItem, autoFocusEntry, id ]);\n\n  return (\n    <ol class={ classnames(\n      'bio-properties-panel-list-entry-items',\n      open ? 'open' : ''\n    ) }>\n      {\n        items.map((item, index) => {\n          const key = getKey(item);\n\n          return (<li class=\"bio-properties-panel-list-entry-item\" key={ key }>\n            { renderItem(item, index, item === newItem) }\n            {\n              onRemove && (\n                <button\n                  type=\"button\"\n                  title=\"Delete item\"\n                  class=\"bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry\"\n                  onClick={ () => onRemove && onRemove(item) }\n                ><DeleteIcon /></button>\n              )\n            }\n          </li>);\n        })\n      }\n    </ol>);\n}\n\n/**\n * Place new items in the beginning of the list and sort the rest with provided function.\n *\n * @template Item\n * @param {Item[]} currentItems\n * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items\n * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook\n * @returns {Item[]}\n */\nfunction useSortedItems(currentItems, compareFn, shouldReset = false) {\n  const itemsRef = useRef(currentItems.slice());\n\n  // (1) Reset and optionally sort.\n  if (shouldReset) {\n    itemsRef.current = currentItems.slice();\n\n    if (compareFn) {\n      itemsRef.current.sort(compareFn);\n    }\n  } else {\n    const items = itemsRef.current;\n\n    // (2) Add new item to the list.\n    for (const item of currentItems) {\n      if (!items.includes(item)) {\n\n        // Unshift or push depending on whether we have a compareFn\n        compareFn ? items.unshift(item) : items.push(item);\n      }\n    }\n\n    // (3) Filter out removed items.\n    itemsRef.current = items.filter(item => currentItems.includes(item));\n  }\n\n  return itemsRef.current;\n}\n\nfunction useNewItems(items = [], shouldReset) {\n  const previousItems = usePrevious(items.slice()) || [];\n\n  if (shouldReset) {\n    return [];\n  }\n\n  return previousItems ? items.filter(item => !previousItems.includes(item)) : [];\n}\n"],"file":"List.js"}

package/lib/components/entries/ToggleSwitch.js

@@ -63,7 +63,7 @@ export default function ToggleSwitchEntry(props) {
   } = props;
   const value = getValue();
   return _jsxs("div", {
-    class: "bio-properties-panel-entry",
+    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
     "data-entry-id": id,
     children: [_jsx(ToggleSwitch, {
       id: id,

package/lib/components/entries/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/ToggleSwitch.js"],"names":["ToggleSwitch","props","id","label","onInput","value","switcherLabel","handleInput","prefixId","ToggleSwitchEntry","description","getValue","setValue","isEdited","node","checked"],"mappings":";;;AAAA,SAASA,YAAT,CAAsBC,KAAtB,EAA6B;AAC3B,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA;AALI,MAMFL,KANJ;;AAQA,QAAMM,WAAW,GAAG,YAAY;AAC9BH,IAAAA,OAAO,CAAC,CAACC,KAAF,CAAP;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,oCAAX;AAAA,eACE;AAAO,MAAA,KAAK,EAAC,4BAAb;AACE,MAAA,GAAG,EAAGG,QAAQ,CAACN,EAAD,CADhB;AAAA,gBAEIC;AAFJ,MADF,EAKE;AAAK,MAAA,KAAK,EAAC,oCAAX;AAAA,iBACE;AAAO,QAAA,KAAK,EAAC,8CAAb;AAAA,mBACE;AACE,UAAA,EAAE,EAAGK,QAAQ,CAACN,EAAD,CADf;AAEE,UAAA,KAAK,EAAC,4BAFR;AAGE,UAAA,IAAI,EAAC,UAHP;AAIE,UAAA,IAAI,EAAGA,EAJT;AAKE,UAAA,OAAO,EAAGK,WALZ;AAME,UAAA,OAAO,EAAGF;AANZ,UADF,EAQE;AAAM,UAAA,KAAK,EAAC;AAAZ,UARF;AAAA,QADF,EAWE;AAAG,QAAA,KAAK,EAAC,2CAAT;AAAA,kBAAuDC;AAAvD,QAXF;AAAA,MALF;AAAA,IADF;AAqBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASG,iBAAT,CAA2BR,KAA3B,EAAkC;AAC/C,QAAM;AACJC,IAAAA,EADI;AAEJQ,IAAAA,WAFI;AAGJP,IAAAA,KAHI;AAIJG,IAAAA,aAJI;AAKJK,IAAAA,QALI;AAMJC,IAAAA;AANI,MAOFX,KAPJ;AASA,QAAMI,KAAK,GAAGM,QAAQ,EAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBT,EAAxD;AAAA,eACE,KAAC,YAAD;AAAc,MAAA,EAAE,EAAGA,EAAnB;AAAwB,MAAA,KAAK,EAAGC,KAAhC;AAAwC,MAAA,KAAK,EAAGE,KAAhD;AAAwD,MAAA,OAAO,EAAGO,QAAlE;AAA6E,MAAA,aAAa,EAAGN;AAA7F,MADF,EAEII,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MAFnB;AAAA,IADF;AAMD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACC,OAAtB;AACD,C,CAGD;;AAEA,SAASP,QAAT,CAAkBN,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["function ToggleSwitch(props) {\n  const {\n    id,\n    label,\n    onInput,\n    value,\n    switcherLabel\n  } = props;\n\n  const handleInput = async () => {\n    onInput(!value);\n  };\n\n  return (\n    <div class=\"bio-properties-panel-toggle-switch\">\n      <label class=\"bio-properties-panel-label\"\n        for={ prefixId(id) }>\n        { label }\n      </label>\n      <div class=\"bio-properties-panel-field-wrapper\">\n        <label class=\"bio-properties-panel-toggle-switch__switcher\">\n          <input\n            id={ prefixId(id) }\n            class=\"bio-properties-panel-input\"\n            type=\"checkbox\"\n            name={ id }\n            onInput={ handleInput }\n            checked={ value } />\n          <span class=\"bio-properties-panel-toggle-switch__slider\" />\n        </label>\n        <p class=\"bio-properties-panel-toggle-switch__label\">{ switcherLabel }</p>\n      </div>\n    </div>\n  );\n}\n\n/**\n * @param {Object} props\n * @param {String} props.id\n * @param {String} props.description\n * @param {String} props.label\n * @param {String} props.switcherLabel\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n */\nexport default function ToggleSwitchEntry(props) {\n  const {\n    id,\n    description,\n    label,\n    switcherLabel,\n    getValue,\n    setValue\n  } = props;\n\n  const value = getValue();\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <ToggleSwitch id={ id } label={ label } value={ value } onInput={ setValue } switcherLabel={ switcherLabel } />\n      { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.checked;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"ToggleSwitch.js"}
+{"version":3,"sources":["../../../src/components/entries/ToggleSwitch.js"],"names":["ToggleSwitch","props","id","label","onInput","value","switcherLabel","handleInput","prefixId","ToggleSwitchEntry","description","getValue","setValue","isEdited","node","checked"],"mappings":";;;AAAA,SAASA,YAAT,CAAsBC,KAAtB,EAA6B;AAC3B,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA;AALI,MAMFL,KANJ;;AAQA,QAAMM,WAAW,GAAG,YAAY;AAC9BH,IAAAA,OAAO,CAAC,CAACC,KAAF,CAAP;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,oCAAX;AAAA,eACE;AAAO,MAAA,KAAK,EAAC,4BAAb;AACE,MAAA,GAAG,EAAGG,QAAQ,CAACN,EAAD,CADhB;AAAA,gBAEIC;AAFJ,MADF,EAKE;AAAK,MAAA,KAAK,EAAC,oCAAX;AAAA,iBACE;AAAO,QAAA,KAAK,EAAC,8CAAb;AAAA,mBACE;AACE,UAAA,EAAE,EAAGK,QAAQ,CAACN,EAAD,CADf;AAEE,UAAA,KAAK,EAAC,4BAFR;AAGE,UAAA,IAAI,EAAC,UAHP;AAIE,UAAA,IAAI,EAAGA,EAJT;AAKE,UAAA,OAAO,EAAGK,WALZ;AAME,UAAA,OAAO,EAAGF;AANZ,UADF,EAQE;AAAM,UAAA,KAAK,EAAC;AAAZ,UARF;AAAA,QADF,EAWE;AAAG,QAAA,KAAK,EAAC,2CAAT;AAAA,kBAAuDC;AAAvD,QAXF;AAAA,MALF;AAAA,IADF;AAqBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASG,iBAAT,CAA2BR,KAA3B,EAAkC;AAC/C,QAAM;AACJC,IAAAA,EADI;AAEJQ,IAAAA,WAFI;AAGJP,IAAAA,KAHI;AAIJG,IAAAA,aAJI;AAKJK,IAAAA,QALI;AAMJC,IAAAA;AANI,MAOFX,KAPJ;AASA,QAAMI,KAAK,GAAGM,QAAQ,EAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,qEAAX;AAAiF,qBAAgBT,EAAjG;AAAA,eACE,KAAC,YAAD;AAAc,MAAA,EAAE,EAAGA,EAAnB;AAAwB,MAAA,KAAK,EAAGC,KAAhC;AAAwC,MAAA,KAAK,EAAGE,KAAhD;AAAwD,MAAA,OAAO,EAAGO,QAAlE;AAA6E,MAAA,aAAa,EAAGN;AAA7F,MADF,EAEII,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MAFnB;AAAA,IADF;AAMD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACC,OAAtB;AACD,C,CAGD;;AAEA,SAASP,QAAT,CAAkBN,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["function ToggleSwitch(props) {\n  const {\n    id,\n    label,\n    onInput,\n    value,\n    switcherLabel\n  } = props;\n\n  const handleInput = async () => {\n    onInput(!value);\n  };\n\n  return (\n    <div class=\"bio-properties-panel-toggle-switch\">\n      <label class=\"bio-properties-panel-label\"\n        for={ prefixId(id) }>\n        { label }\n      </label>\n      <div class=\"bio-properties-panel-field-wrapper\">\n        <label class=\"bio-properties-panel-toggle-switch__switcher\">\n          <input\n            id={ prefixId(id) }\n            class=\"bio-properties-panel-input\"\n            type=\"checkbox\"\n            name={ id }\n            onInput={ handleInput }\n            checked={ value } />\n          <span class=\"bio-properties-panel-toggle-switch__slider\" />\n        </label>\n        <p class=\"bio-properties-panel-toggle-switch__label\">{ switcherLabel }</p>\n      </div>\n    </div>\n  );\n}\n\n/**\n * @param {Object} props\n * @param {String} props.id\n * @param {String} props.description\n * @param {String} props.label\n * @param {String} props.switcherLabel\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n */\nexport default function ToggleSwitchEntry(props) {\n  const {\n    id,\n    description,\n    label,\n    switcherLabel,\n    getValue,\n    setValue\n  } = props;\n\n  const value = getValue();\n  return (\n    <div class=\"bio-properties-panel-entry bio-properties-panel-toggle-switch-entry\" data-entry-id={ id }>\n      <ToggleSwitch id={ id } label={ label } value={ value } onInput={ setValue } switcherLabel={ switcherLabel } />\n      { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.checked;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"ToggleSwitch.js"}

package/lib/components/icons/index.js

@@ -1,66 +1,51 @@
 import React from "react";
 import { jsx as _jsx } from "preact/jsx-runtime";
 
-var CreateIcon = function CreateIcon(props) {
+var ArrowIcon = function ArrowIcon(props) {
   return _jsx("svg", { ...props,
     children: _jsx("path", {
       fillRule: "evenodd",
-      d: "M7 0v5h5v2H7v5H5V7H0V5h5V0h2z"
+      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"
     })
   });
 };
 
-CreateIcon.defaultProps = {
+ArrowIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "12",
-  height: "12"
+  width: "16",
+  height: "16"
 };
-export { CreateIcon };
+export { ArrowIcon };
 
-var ListArrowIcon = function ListArrowIcon(props) {
+var CreateIcon = function CreateIcon(props) {
   return _jsx("svg", { ...props,
     children: _jsx("path", {
       fillRule: "evenodd",
-      d: "M6.25 4.421 4.836 5.835h-.001L2.007 8.663.593 7.249 3.421 4.42.593 1.593 2.007.178 6.25 4.421z"
+      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"
     })
   });
 };
 
-ListArrowIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "7",
-  height: "9"
-};
-export { ListArrowIcon };
-
-var ListDeleteIcon = function ListDeleteIcon(props) {
-  return _jsx("svg", { ...props,
-    children: _jsx("path", {
-      d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
-    })
-  });
-};
-
-ListDeleteIcon.defaultProps = {
+CreateIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "11",
-  height: "14"
+  width: "16",
+  height: "16"
 };
-export { ListDeleteIcon };
+export { CreateIcon };
 
-var GroupArrowIcon = function GroupArrowIcon(props) {
+var DeleteIcon = function DeleteIcon(props) {
   return _jsx("svg", { ...props,
     children: _jsx("path", {
       fillRule: "evenodd",
-      d: "M2.007 11.66.593 10.248l4.242-4.243L.593 1.761 2.007.347l5.657 5.657-5.657 5.657z"
+      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"
     })
   });
 };
 
-GroupArrowIcon.defaultProps = {
+DeleteIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "8",
-  height: "12"
+  width: "16",
+  height: "16"
 };
-export { GroupArrowIcon };
+export { DeleteIcon };
 //# sourceMappingURL=index.js.map

package/lib/context/LayoutContext.js

@@ -2,6 +2,7 @@ import { createContext } from 'preact';
 const LayoutContext = createContext({
   layout: {},
   setLayout: () => {},
+  getLayoutForKey: () => {},
   setLayoutForKey: () => {}
 });
 export default LayoutContext;

package/lib/context/LayoutContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/LayoutContext.js"],"names":["createContext","LayoutContext","layout","setLayout","setLayoutForKey"],"mappings":"AAAA,SACEA,aADF,QAEO,QAFP;AAIA,MAAMC,aAAa,GAAGD,aAAa,CAAC;AAClCE,EAAAA,MAAM,EAAE,EAD0B;AAElCC,EAAAA,SAAS,EAAE,MAAM,CAAE,CAFe;AAGlCC,EAAAA,eAAe,EAAE,MAAM,CAAE;AAHS,CAAD,CAAnC;AAMA,eAAeH,aAAf","sourcesContent":["import {\n  createContext\n} from 'preact';\n\nconst LayoutContext = createContext({\n  layout: {},\n  setLayout: () => {},\n  setLayoutForKey: () => {}\n});\n\nexport default LayoutContext;"],"file":"LayoutContext.js"}
+{"version":3,"sources":["../../src/context/LayoutContext.js"],"names":["createContext","LayoutContext","layout","setLayout","getLayoutForKey","setLayoutForKey"],"mappings":"AAAA,SACEA,aADF,QAEO,QAFP;AAIA,MAAMC,aAAa,GAAGD,aAAa,CAAC;AAClCE,EAAAA,MAAM,EAAE,EAD0B;AAElCC,EAAAA,SAAS,EAAE,MAAM,CAAE,CAFe;AAGlCC,EAAAA,eAAe,EAAE,MAAM,CAAE,CAHS;AAIlCC,EAAAA,eAAe,EAAE,MAAM,CAAE;AAJS,CAAD,CAAnC;AAOA,eAAeJ,aAAf","sourcesContent":["import {\n  createContext\n} from 'preact';\n\nconst LayoutContext = createContext({\n  layout: {},\n  setLayout: () => {},\n  getLayoutForKey: () => {},\n  setLayoutForKey: () => {}\n});\n\nexport default LayoutContext;"],"file":"LayoutContext.js"}

package/lib/hooks/index.js

@@ -1,3 +1,4 @@
 export { default as usePrevious } from './usePrevious';
 export { useKeyFactory } from './useKeyFactory';
+export { useLayoutState } from './useLayoutState';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/index.js"],"names":["default","usePrevious","useKeyFactory"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASC,aAAT,QAA8B,iBAA9B","sourcesContent":["export { default as usePrevious } from './usePrevious';\nexport { useKeyFactory } from './useKeyFactory';"],"file":"index.js"}
+{"version":3,"sources":["../../src/hooks/index.js"],"names":["default","usePrevious","useKeyFactory","useLayoutState"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,cAAT,QAA+B,kBAA/B","sourcesContent":["export { default as usePrevious } from './usePrevious';\nexport { useKeyFactory } from './useKeyFactory';\nexport { useLayoutState } from './useLayoutState';"],"file":"index.js"}

package/lib/hooks/useLayoutState.js

@@ -0,0 +1,36 @@
+import { useContext, useState } from 'preact/hooks';
+import { LayoutContext } from '../context';
+/**
+ * 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 ]}
+ */
+
+export 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];
+}
+//# sourceMappingURL=useLayoutState.js.map

package/lib/hooks/useLayoutState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useLayoutState.js"],"names":["useContext","useState","LayoutContext","useLayoutState","path","defaultValue","getLayoutForKey","setLayoutForKey","layoutForKey","value","set","setState","newValue"],"mappings":"AAAA,SACEA,UADF,EAEEC,QAFF,QAGO,cAHP;AAKA,SACEC,aADF,QAEO,YAFP;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,cAAT,CAAwBC,IAAxB,EAA8BC,YAA9B,EAA4C;AACjD,QAAM;AACJC,IAAAA,eADI;AAEJC,IAAAA;AAFI,MAGFP,UAAU,CAACE,aAAD,CAHd;AAKA,QAAMM,YAAY,GAAGF,eAAe,CAACF,IAAD,EAAOC,YAAP,CAApC;AACA,QAAM,CAAEI,KAAF,EAASC,GAAT,IAAiBT,QAAQ,CAACO,YAAD,CAA/B;;AAEA,QAAMG,QAAQ,GAAIC,QAAD,IAAc;AAE7B;AACAF,IAAAA,GAAG,CAACE,QAAD,CAAH,CAH6B,CAK7B;;AACAL,IAAAA,eAAe,CAACH,IAAD,EAAOQ,QAAP,CAAf;AACD,GAPD;;AASA,SAAO,CAAEH,KAAF,EAASE,QAAT,CAAP;AACD","sourcesContent":["import {\n  useContext,\n  useState\n} from 'preact/hooks';\n\nimport {\n  LayoutContext\n} from '../context';\n\n/**\n * Creates a state that persists in the global LayoutContext.\n *\n * @example\n * ```jsx\n * function Group(props) {\n *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);\n * }\n * ```\n *\n * @param {(string|number)[]} path\n * @param {any} [defaultValue]\n *\n * @returns {[ any, Function ]}\n */\nexport function useLayoutState(path, defaultValue) {\n  const {\n    getLayoutForKey,\n    setLayoutForKey\n  } = useContext(LayoutContext);\n\n  const layoutForKey = getLayoutForKey(path, defaultValue);\n  const [ value, set ] = useState(layoutForKey);\n\n  const setState = (newValue) => {\n\n    // (1) set component state\n    set(newValue);\n\n    // (2) set context\n    setLayoutForKey(path, newValue);\n  };\n\n  return [ value, setState ];\n}\n"],"file":"useLayoutState.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/properties-panel",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Library for creating bpmn-io properties panels.",
   "main": "lib/index.js",
   "files": [
@@ -63,7 +63,7 @@
     "karma-mocha": "^2.0.1",
     "karma-sinon-chai": "^2.0.2",
     "karma-webpack": "^5.0.0",
-    "mocha": "^9.0.0",
+    "mocha": "^9.1.3",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
     "preact": "^10.5.13",