@bpmn-io/properties-panel 0.2.0 → 0.4.1

package/CHANGELOG.md

@@ -6,6 +6,25 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.4.1
+
+* `CHORE`: unbuild custom checkbox component ([#97](https://github.com/bpmn-io/properties-panel/pull/97))
+
+## 0.4.0
+
+* `FEAT`: add list entry ([#92](https://github.com/bpmn-io/properties-panel/issues/92))
+* `FEAT`: add simple text entry ([#94](https://github.com/bpmn-io/properties-panel/pull/94))
+* `FIX`: use default cursor when hovering collapsible headers ([#95](https://github.com/bpmn-io/properties-panel/pull/95))
+
+## 0.3.0
+
+* `FEAT`: use semantic HTML for buttons ([#45](https://github.com/bpmn-io/properties-panel/issues/45))
+* `FIX`: prevent list ordering effects on element changes ([#89](https://github.com/bpmn-io/properties-panel/pull/89))
+
+## 0.2.1
+
+* `FIX`: do not use monospace as default font for text areas ([#87](https://github.com/bpmn-io/properties-panel/pull/87))
+
 ## 0.2.0
 
 * `FEAT`: add number field entry ([#76](https://github.com/bpmn-io/properties-panel/pull/76))

package/assets/properties-panel.css

@@ -10,6 +10,8 @@
   --color-red-360-100-97: #fff0f0;
   --color-red-360-100-45: #e60000;
 
+  --color-grey-225-10-35: hsl(225, 10%, 35%);
+
   --color-cccccc: #cccccc;
   --color-aaaaaa: #aaaaaa;
   --color-white: white;
@@ -173,14 +175,6 @@
   margin-right: 0;
 }
 
-.bio-properties-panel-group-header-buttons .bio-properties-panel-add-entry {
-  width: 20px;
-  height: 20px;
-  display: inherit;
-  justify-content: center;
-  align-items: center;
-}
-
 .bio-properties-panel-group-header:not(.empty) .bio-properties-panel-add-entry {
   visibility: hidden;
 }
@@ -225,11 +219,6 @@
   margin-bottom: 6px;
 }
 
-.bio-properties-panel-list-item .bio-properties-panel-collapsible-entry-entries {
-  padding-left: 15px;
-  margin-bottom: 10px;
-}
-
 .bio-properties-panel-list-badge {
   color: var(--color-white);
   background-color: var(--color-black);
@@ -278,6 +267,9 @@
   border-radius: 3px;
   background-color: var(--color-input-background);
   font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  font-family: inherit;
 }
 
 .bio-properties-panel-input[type=number],
@@ -294,65 +286,19 @@ textarea.bio-properties-panel-input,
   border: 1px solid var(--color-input-border-focus);
 }
 
-.bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
-  margin: 0;
-}
-
-.bio-properties-panel-input[type="checkbox"] + label::after,
-.bio-properties-panel-input[type="radio"] + label::after {
-  -webkit-transform: scale(0);
-  -ms-transform: scale(0);
-  -o-transform: scale(0);
-  transform: scale(0);
+.bio-properties-panel-input-monospace {
+  font-family: monospace;
 }
 
-.bio-properties-panel-input[type="checkbox"]:checked + label::after,
-.bio-properties-panel-input[type="radio"]:checked + label::after {
-  -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  -o-transform: scale(1);
-  transform: scale(1);
-}
-
-.bio-properties-panel-checkbox {
-  margin-top: 12px;
-  margin-bottom: 6px;
-}
-
-.bio-properties-panel-checkbox .bio-properties-panel-input {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
+.bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
+  margin: 0;
+  vertical-align: middle;
 }
 
-.bio-properties-panel-checkbox .bio-properties-panel-label {
-  position: relative;
+.bio-properties-panel-checkbox > .bio-properties-panel-label {
   display: inline-block;
-  padding: 0 0 0 24px;
-}
-
-.bio-properties-panel-checkbox .bio-properties-panel-label::before,
-.bio-properties-panel-checkbox .bio-properties-panel-label::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-
-.bio-properties-panel-checkbox .bio-properties-panel-label::before {
-  content: " ";
-  border: 1px solid var(--color-input-border);
-  border-radius: 3px;
-  background-color:var(--color-000000-opacity-5);
-}
-
-.bio-properties-panel-checkbox .bio-properties-panel-label::after {
-  content: "\2714";
-  color: var(--color-text-base);
-  line-height: 1.5;
-  text-align: center;
+  margin-left: 4px;
+  vertical-align: middle;
 }
 
 textarea.bio-properties-panel-input {
@@ -374,6 +320,15 @@ textarea.bio-properties-panel-input {
   font-size: 13px;
 }
 
+.bio-properties-panel-simple {
+  width: 100%;
+  margin-right: 12px;
+}
+
+.bio-properties-panel-simple + .bio-properties-panel-remove-entry {
+  margin: auto;
+} 
+
 /**
  * Toggle Switch
  */
@@ -454,6 +409,8 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-collapsible-entry-entries  {
+  padding-left: 15px;
+  margin-bottom: 10px;
   position: relative;
   display: none;
 }
@@ -472,6 +429,7 @@ textarea.bio-properties-panel-input {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  user-select: none;
 }
 
 .bio-properties-panel-collapsible-entry-arrow {
@@ -484,14 +442,21 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-remove-entry {
-  position: absolute;
-  transform: translateY(calc(-50% - 1px));
-  right: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
   height: 16px;
+
+  margin-right: 14px;
+  padding: 0;
+
+  border: none;
+  background: none;
   visibility: hidden;
 }
 
+.bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-entry,
 .bio-properties-panel-collapsible-entry-header:hover .bio-properties-panel-remove-entry {
   visibility: visible;
 }
@@ -502,6 +467,102 @@ textarea.bio-properties-panel-input {
   left: 10px;
   width: 2px;
   top: 0;
+  bottom: 12px;
+  background-color: var(--color-grey-225-10-35);
+}
+
+/* Side line extension for non-list entry or open list entry positioned as the last one. */
+.bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
+.bio-properties-panel-list-entry.open:last-child {
+  position: relative;
+}
+
+.bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
+.bio-properties-panel-list-entry.open:last-child::after {
+  content: "";
+  position: absolute;
+  left: -17px;
+  width: 2px;
+  top: 0;
   bottom: 0;
-  background-color: var(--color-000000-opacity-25);
+  background-color: var(--color-grey-225-10-35);
+}
+
+/* List entry */
+
+.bio-properties-panel-list-entry {
+  position: relative;
+}
+
+.bio-properties-panel-list-entry-header {
+  display: flex;
+  justify-content: space-between;
+
+  height: 32px;
+}
+
+.bio-properties-panel-list-entry::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: -20px;
+  top: 13px;
+  border-radius: 50%;
+  background-color: var(--color-grey-225-10-35);
+}
+
+.bio-properties-panel-list-entry-header-title {
+  padding: 2px 0;
+  font-size: var(--text-size-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bio-properties-panel-list-entry-header-title.open {
+  font-weight: 600;
+}
+
+.bio-properties-panel-list-entry-header-title,
+.bio-properties-panel-list-entry-header-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.bio-properties-panel-list-entry-header-buttons > button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.bio-properties-panel-list-entry-header-buttons > :last-child {
+  margin-right: 0;
+}
+
+.bio-properties-panel-list-entry-items {
+  padding: 0;
+  margin: 0;
+
+  list-style: none;
+}
+
+.bio-properties-panel-list-entry-items:not(.open) {
+  display: none;
+}
+
+.bio-properties-panel-list-entry-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bio-properties-panel-list-entry-item > .bio-properties-panel-remove-entry {
+  margin-right: 2px;
 }

package/lib/PropertiesPanel.js

@@ -27,6 +27,7 @@ const DEFAULT_LAYOUT = {
  * @typedef { {
  *    add: import('preact').Component,
  *    component: import('preact').Component,
+ *    element: Object,
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
@@ -102,7 +103,9 @@ export default function PropertiesPanel(props) {
             component: GroupComponent = Group,
             id
           } = group;
-          return _jsx(GroupComponent, { ...group
+          return _jsx(GroupComponent, {
+            element: element,
+            ...group
           }, id);
         })
       })]

package/lib/PropertiesPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PropertiesPanel.js"],"names":["useState","useEffect","classnames","Header","Group","LayoutContext","DEFAULT_LAYOUT","open","PropertiesPanel","props","element","headerProvider","groups","layoutConfig","layoutChanged","layout","setLayout","createLayoutContext","setLayoutForKey","key","config","layoutContext","map","group","component","GroupComponent","id","overrides"],"mappings":"AAAA,SACEA,QADF,EAEEC,SAFF,QAGO,cAHP;AAKA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AAEA,OAAOC,KAAP,MAAkB,oBAAlB;AAEA,SACEC,aADF,QAEO,WAFP;;;AAIA,MAAMC,cAAc,GAAG;AACrBC,EAAAA,IAAI,EAAE;AADe,CAAvB;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,eAAT,CAAyBC,KAAzB,EAAgC;AAC7C,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,cAFI;AAGJC,IAAAA,MAHI;AAIJC,IAAAA,YAAY,GAAG,EAJX;AAKJC,IAAAA;AALI,MAMFL,KANJ;AAQA,QAAM,CAAEM,MAAF,EAAUC,SAAV,IAAwBhB,QAAQ,CAACiB,mBAAmB,CAACJ,YAAD,CAApB,CAAtC;AAEAZ,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,OAAOa,aAAP,KAAyB,UAA7B,EAAyC;AACvCA,MAAAA,aAAa,CAACC,MAAD,CAAb;AACD;AACF,GAJQ,EAIN,CAAEA,MAAF,EAAUD,aAAV,CAJM,CAAT;;AAMA,QAAMI,eAAe,GAAG,CAACC,GAAD,EAAMC,MAAN,KAAiB;AACvCJ,IAAAA,SAAS,CAAC,EACR,GAAGD,MADK;AAER,OAACI,GAAD,GAAOC;AAFC,KAAD,CAAT;AAID,GALD;;AAOA,QAAMC,aAAa,GAAG;AACpBN,IAAAA,MADoB;AAEpBC,IAAAA,SAFoB;AAGpBE,IAAAA;AAHoB,GAAtB;;AAMA,MAAI,CAACR,OAAL,EAAc;AACZ,WAAO;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA;AAAA,MAAP;AACD;;AAED,SAAO,KAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGW,aAAhC;AAAA,cACL;AACE,MAAA,KAAK,EAAGnB,UAAU,CAChB,sBADgB,EAEhBa,MAAM,CAACR,IAAP,GAAc,MAAd,GAAuB,EAFP,CADpB;AAAA,iBAKE,KAAC,MAAD;AACE,QAAA,OAAO,EAAGG,OADZ;AAEE,QAAA,cAAc,EAAGC;AAFnB,QALF,EAQE;AAAK,QAAA,KAAK,EAAC,uCAAX;AAAA,kBAEIC,MAAM,CAACU,GAAP,CAAWC,KAAK,IAAI;AAElB,gBAAM;AACJC,YAAAA,SAAS,EAAEC,cAAc,GAAGrB,KADxB;AAEJsB,YAAAA;AAFI,cAGFH,KAHJ;AAKA,iBAAO,KAAC,cAAD,OAAgCA;AAAhC,aAAsBG,EAAtB,CAAP;AACD,SARD;AAFJ,QARF;AAAA;AADK,IAAP;AAwBD,C,CAGD;;AAEA,SAAST,mBAAT,CAA6BU,SAA7B,EAAwC;AACtC,SAAO,EACL,GAAGrB,cADE;AAEL,OAAGqB;AAFE,GAAP;AAID","sourcesContent":["import {\n  useState,\n  useEffect\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport Header from './components/Header';\n\nimport Group from './components/Group';\n\nimport {\n  LayoutContext\n} from './context';\n\nconst DEFAULT_LAYOUT = {\n  open: true\n};\n\n\n/**\n * @typedef { {\n *    component: import('preact').ComponentChild,\n *    id: String,\n *    isEdited?: Function\n * } } EntryDefinition\n *\n * @typedef { {\n *    autoFocusEntry: String,\n *    autoOpen?: Boolean,\n *    entries: Array<EntryDefinition>,\n *    id: String,\n *    label: String,\n *    remove: import('preact').Component\n * } } ListItemDefinition\n *\n * @typedef { {\n *    add: import('preact').Component,\n *    component: import('preact').Component,\n *    id: String,\n *    items: Array<ListItemDefinition>,\n *    label: String,\n *    shouldSort?: Boolean\n * } } ListGroupDefinition\n *\n * @typedef { {\n *    component?: import('preact').Component,\n *    entries: Array<EntryDefinition>,\n *    id: String,\n *    label: String\n * } } GroupDefinition\n *\n */\n\n\n/**\n * A basic properties panel component. Describes *how* content will be rendered, accepts\n * data from implementor to describe *what* will be rendered.\n *\n * @param {Object} props\n * @param {Object} props.element\n * @param {import('./components/Header').HeaderProvider} props.headerProvider\n * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups\n * @param {Object} [props.layoutConfig]\n * @param {Function} [props.layoutChanged]\n */\nexport default function PropertiesPanel(props) {\n  const {\n    element,\n    headerProvider,\n    groups,\n    layoutConfig = {},\n    layoutChanged\n  } = props;\n\n  const [ layout, setLayout ] = useState(createLayoutContext(layoutConfig));\n\n  useEffect(() => {\n    if (typeof layoutChanged === 'function') {\n      layoutChanged(layout);\n    }\n  }, [ layout, layoutChanged ]);\n\n  const setLayoutForKey = (key, config) => {\n    setLayout({\n      ...layout,\n      [key]: config\n    });\n  };\n\n  const layoutContext = {\n    layout,\n    setLayout,\n    setLayoutForKey\n  };\n\n  if (!element) {\n    return <div class=\"bio-properties-panel-placeholder\">Select an element to edit its properties.</div>;\n  }\n\n  return <LayoutContext.Provider value={ layoutContext }>\n    <div\n      class={ classnames(\n        'bio-properties-panel',\n        layout.open ? 'open' : '')\n      }>\n      <Header\n        element={ element }\n        headerProvider={ headerProvider } />\n      <div class=\"bio-properties-panel-scroll-container\">\n        {\n          groups.map(group => {\n\n            const {\n              component: GroupComponent = Group,\n              id\n            } = group;\n\n            return <GroupComponent key={ id } { ...group } />;\n          })\n        }\n      </div>\n    </div>\n  </LayoutContext.Provider>;\n}\n\n\n// helpers //////////////////\n\nfunction createLayoutContext(overrides) {\n  return {\n    ...DEFAULT_LAYOUT,\n    ...overrides\n  };\n}\n"],"file":"PropertiesPanel.js"}
+{"version":3,"sources":["../src/PropertiesPanel.js"],"names":["useState","useEffect","classnames","Header","Group","LayoutContext","DEFAULT_LAYOUT","open","PropertiesPanel","props","element","headerProvider","groups","layoutConfig","layoutChanged","layout","setLayout","createLayoutContext","setLayoutForKey","key","config","layoutContext","map","group","component","GroupComponent","id","overrides"],"mappings":"AAAA,SACEA,QADF,EAEEC,SAFF,QAGO,cAHP;AAKA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,MAAP,MAAmB,qBAAnB;AAEA,OAAOC,KAAP,MAAkB,oBAAlB;AAEA,SACEC,aADF,QAEO,WAFP;;;AAIA,MAAMC,cAAc,GAAG;AACrBC,EAAAA,IAAI,EAAE;AADe,CAAvB;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,eAAT,CAAyBC,KAAzB,EAAgC;AAC7C,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,cAFI;AAGJC,IAAAA,MAHI;AAIJC,IAAAA,YAAY,GAAG,EAJX;AAKJC,IAAAA;AALI,MAMFL,KANJ;AAQA,QAAM,CAAEM,MAAF,EAAUC,SAAV,IAAwBhB,QAAQ,CAACiB,mBAAmB,CAACJ,YAAD,CAApB,CAAtC;AAEAZ,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,OAAOa,aAAP,KAAyB,UAA7B,EAAyC;AACvCA,MAAAA,aAAa,CAACC,MAAD,CAAb;AACD;AACF,GAJQ,EAIN,CAAEA,MAAF,EAAUD,aAAV,CAJM,CAAT;;AAMA,QAAMI,eAAe,GAAG,CAACC,GAAD,EAAMC,MAAN,KAAiB;AACvCJ,IAAAA,SAAS,CAAC,EACR,GAAGD,MADK;AAER,OAACI,GAAD,GAAOC;AAFC,KAAD,CAAT;AAID,GALD;;AAOA,QAAMC,aAAa,GAAG;AACpBN,IAAAA,MADoB;AAEpBC,IAAAA,SAFoB;AAGpBE,IAAAA;AAHoB,GAAtB;;AAMA,MAAI,CAACR,OAAL,EAAc;AACZ,WAAO;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA;AAAA,MAAP;AACD;;AAED,SAAO,KAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGW,aAAhC;AAAA,cACL;AACE,MAAA,KAAK,EAAGnB,UAAU,CAChB,sBADgB,EAEhBa,MAAM,CAACR,IAAP,GAAc,MAAd,GAAuB,EAFP,CADpB;AAAA,iBAKE,KAAC,MAAD;AACE,QAAA,OAAO,EAAGG,OADZ;AAEE,QAAA,cAAc,EAAGC;AAFnB,QALF,EAQE;AAAK,QAAA,KAAK,EAAC,uCAAX;AAAA,kBAEIC,MAAM,CAACU,GAAP,CAAWC,KAAK,IAAI;AAElB,gBAAM;AACJC,YAAAA,SAAS,EAAEC,cAAc,GAAGrB,KADxB;AAEJsB,YAAAA;AAFI,cAGFH,KAHJ;AAKA,iBAAO,KAAC,cAAD;AAEL,YAAA,OAAO,EAAGb,OAFL;AAAA,eAGAa;AAHA,aACCG,EADD,CAAP;AAID,SAXD;AAFJ,QARF;AAAA;AADK,IAAP;AA2BD,C,CAGD;;AAEA,SAAST,mBAAT,CAA6BU,SAA7B,EAAwC;AACtC,SAAO,EACL,GAAGrB,cADE;AAEL,OAAGqB;AAFE,GAAP;AAID","sourcesContent":["import {\n  useState,\n  useEffect\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport Header from './components/Header';\n\nimport Group from './components/Group';\n\nimport {\n  LayoutContext\n} from './context';\n\nconst DEFAULT_LAYOUT = {\n  open: true\n};\n\n\n/**\n * @typedef { {\n *    component: import('preact').ComponentChild,\n *    id: String,\n *    isEdited?: Function\n * } } EntryDefinition\n *\n * @typedef { {\n *    autoFocusEntry: String,\n *    autoOpen?: Boolean,\n *    entries: Array<EntryDefinition>,\n *    id: String,\n *    label: String,\n *    remove: import('preact').Component\n * } } ListItemDefinition\n *\n * @typedef { {\n *    add: import('preact').Component,\n *    component: import('preact').Component,\n *    element: Object,\n *    id: String,\n *    items: Array<ListItemDefinition>,\n *    label: String,\n *    shouldSort?: Boolean\n * } } ListGroupDefinition\n *\n * @typedef { {\n *    component?: import('preact').Component,\n *    entries: Array<EntryDefinition>,\n *    id: String,\n *    label: String\n * } } GroupDefinition\n *\n */\n\n\n/**\n * A basic properties panel component. Describes *how* content will be rendered, accepts\n * data from implementor to describe *what* will be rendered.\n *\n * @param {Object} props\n * @param {Object} props.element\n * @param {import('./components/Header').HeaderProvider} props.headerProvider\n * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups\n * @param {Object} [props.layoutConfig]\n * @param {Function} [props.layoutChanged]\n */\nexport default function PropertiesPanel(props) {\n  const {\n    element,\n    headerProvider,\n    groups,\n    layoutConfig = {},\n    layoutChanged\n  } = props;\n\n  const [ layout, setLayout ] = useState(createLayoutContext(layoutConfig));\n\n  useEffect(() => {\n    if (typeof layoutChanged === 'function') {\n      layoutChanged(layout);\n    }\n  }, [ layout, layoutChanged ]);\n\n  const setLayoutForKey = (key, config) => {\n    setLayout({\n      ...layout,\n      [key]: config\n    });\n  };\n\n  const layoutContext = {\n    layout,\n    setLayout,\n    setLayoutForKey\n  };\n\n  if (!element) {\n    return <div class=\"bio-properties-panel-placeholder\">Select an element to edit its properties.</div>;\n  }\n\n  return <LayoutContext.Provider value={ layoutContext }>\n    <div\n      class={ classnames(\n        'bio-properties-panel',\n        layout.open ? 'open' : '')\n      }>\n      <Header\n        element={ element }\n        headerProvider={ headerProvider } />\n      <div class=\"bio-properties-panel-scroll-container\">\n        {\n          groups.map(group => {\n\n            const {\n              component: GroupComponent = Group,\n              id\n            } = group;\n\n            return <GroupComponent\n              key={ id }\n              element={ element }\n              { ...group } />;\n          })\n        }\n      </div>\n    </div>\n  </LayoutContext.Provider>;\n}\n\n\n// helpers //////////////////\n\nfunction createLayoutContext(overrides) {\n  return {\n    ...DEFAULT_LAYOUT,\n    ...overrides\n  };\n}\n"],"file":"PropertiesPanel.js"}

package/lib/components/Group.js

@@ -50,7 +50,7 @@ export default function Group(props) {
         children: label
       }), _jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
-        children: [edited && _jsx(DataMarker, {}), _jsx("div", {
+        children: [edited && _jsx(DataMarker, {}), _jsx("button", {
           class: "bio-properties-panel-group-header-button",
           children: _jsx(GroupArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'

package/lib/components/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Group.js"],"names":["useEffect","useState","classnames","query","domQuery","isFunction","GroupArrowIcon","Group","props","id","entries","label","open","setOpen","toggleOpen","edited","setEdited","hasOneEditedEntry","find","entry","isEdited","entryNode","inputNode","getTitleAttribute","map","e","component","DataMarker"],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  query as domQuery\n} from 'min-dom';\n\nimport {\n  isFunction\n} from 'min-dash';\n\nimport { GroupArrowIcon } from './icons';\n\n/**\n * @param {import('../PropertiesPanel').GroupDefinition} props\n */\nexport default function Group(props) {\n  const {\n    id,\n    entries = [],\n    label\n  } = props;\n\n  const [ open, setOpen ] = useState(false);\n\n  const toggleOpen = () => setOpen(!open);\n\n  const [ edited, setEdited ] = useState(false);\n\n  // set edited state depending on all entries\n  useEffect(() => {\n    const hasOneEditedEntry = entries.find(entry => {\n      const {\n        id,\n        isEdited\n      } = entry;\n\n      const entryNode = domQuery(`[data-entry-id=\"${id}\"]`);\n\n      if (!isFunction(isEdited) || !entryNode) {\n        return false;\n      }\n\n      const inputNode = domQuery('.bio-properties-panel-input', entryNode);\n\n      return isEdited(inputNode);\n    });\n\n    setEdited(hasOneEditedEntry);\n  }, [ entries ]);\n\n  return <div class=\"bio-properties-panel-group\" data-group-id={ 'group-' + id }>\n    <div class={ classnames(\n      'bio-properties-panel-group-header',\n      edited ? '' : 'empty'\n    ) } onClick={ toggleOpen }>\n      <div title={ getTitleAttribute(label, edited) } class=\"bio-properties-panel-group-header-title\">\n        { label }\n      </div>\n      <div class=\"bio-properties-panel-group-header-buttons\">\n        {\n          edited && <DataMarker />\n        }\n        <div class=\"bio-properties-panel-group-header-button\">\n          <GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n        </div>\n      </div>\n    </div>\n    <div class={ classnames(\n      'bio-properties-panel-group-entries',\n      open ? 'open' : ''\n    ) }>\n      {\n        entries.map(e => e.component)\n      }\n    </div>\n  </div>;\n}\n\nfunction DataMarker() {\n  return (\n    <div class=\"bio-properties-panel-dot\">\n      <svg\n        aria-label=\"edited\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 100 100\"\n      >\n        <circle fill=\"currentColor\" cx=\"50\" cy=\"50\" r=\"50\" />\n      </svg>\n    </div>\n  );\n}\n\n\n// helper //////////////\n\nfunction getTitleAttribute(label, edited) {\n  return label + (edited ? ' (edited)' : '');\n}"],"file":"Group.js"}
+{"version":3,"sources":["../../src/components/Group.js"],"names":["useEffect","useState","classnames","query","domQuery","isFunction","GroupArrowIcon","Group","props","id","entries","label","open","setOpen","toggleOpen","edited","setEdited","hasOneEditedEntry","find","entry","isEdited","entryNode","inputNode","getTitleAttribute","map","e","component","DataMarker"],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  query as domQuery\n} from 'min-dom';\n\nimport {\n  isFunction\n} from 'min-dash';\n\nimport { GroupArrowIcon } from './icons';\n\n/**\n * @param {import('../PropertiesPanel').GroupDefinition} props\n */\nexport default function Group(props) {\n  const {\n    id,\n    entries = [],\n    label\n  } = props;\n\n  const [ open, setOpen ] = useState(false);\n\n  const toggleOpen = () => setOpen(!open);\n\n  const [ edited, setEdited ] = useState(false);\n\n  // set edited state depending on all entries\n  useEffect(() => {\n    const hasOneEditedEntry = entries.find(entry => {\n      const {\n        id,\n        isEdited\n      } = entry;\n\n      const entryNode = domQuery(`[data-entry-id=\"${id}\"]`);\n\n      if (!isFunction(isEdited) || !entryNode) {\n        return false;\n      }\n\n      const inputNode = domQuery('.bio-properties-panel-input', entryNode);\n\n      return isEdited(inputNode);\n    });\n\n    setEdited(hasOneEditedEntry);\n  }, [ entries ]);\n\n  return <div class=\"bio-properties-panel-group\" data-group-id={ 'group-' + id }>\n    <div class={ classnames(\n      'bio-properties-panel-group-header',\n      edited ? '' : 'empty'\n    ) } onClick={ toggleOpen }>\n      <div title={ getTitleAttribute(label, edited) } class=\"bio-properties-panel-group-header-title\">\n        { label }\n      </div>\n      <div class=\"bio-properties-panel-group-header-buttons\">\n        {\n          edited && <DataMarker />\n        }\n        <button class=\"bio-properties-panel-group-header-button\">\n          <GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n        </button>\n      </div>\n    </div>\n    <div class={ classnames(\n      'bio-properties-panel-group-entries',\n      open ? 'open' : ''\n    ) }>\n      {\n        entries.map(e => e.component)\n      }\n    </div>\n  </div>;\n}\n\nfunction DataMarker() {\n  return (\n    <div class=\"bio-properties-panel-dot\">\n      <svg\n        aria-label=\"edited\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 100 100\"\n      >\n        <circle fill=\"currentColor\" cx=\"50\" cy=\"50\" r=\"50\" />\n      </svg>\n    </div>\n  );\n}\n\n\n// helper //////////////\n\nfunction getTitleAttribute(label, edited) {\n  return label + (edited ? ' (edited)' : '');\n}"],"file":"Group.js"}

package/lib/components/ListGroup.js

@@ -15,6 +15,7 @@ const noop = () => {};
 
 export default function ListGroup(props) {
   const {
+    element,
     id,
     items,
     label,
@@ -24,17 +25,25 @@ export default function ListGroup(props) {
   const [open, setOpen] = useState(false);
   const [ordering, setOrdering] = useState([]);
   const [newItemAdded, setNewItemAdded] = useState(false);
-  const prevItems = usePrevious(items); // keep ordering in sync to items and open changes
+  const prevItems = usePrevious(items);
+  const prevElement = usePrevious(element);
+  const elementChanged = element !== prevElement;
+  const shouldHandleEffects = !elementChanged && shouldSort; // 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]); // (1) items were added
+  }, [items, element]); // (1) items were added
 
   useEffect(() => {
-    if (shouldSort && prevItems && items.length > prevItems.length) {
+    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
       let add = [];
       items.forEach(item => {
         if (!ordering.includes(item.id)) {
@@ -55,17 +64,17 @@ export default function ListGroup(props) {
     } else {
       setNewItemAdded(false);
     }
-  }, [items, open]); // (2) sort items on open
+  }, [items, open, shouldHandleEffects]); // (2) sort items on open
 
   useEffect(() => {
     // we already sorted as items were added
-    if (shouldSort && open && !newItemAdded) {
+    if (shouldHandleEffects && open && !newItemAdded) {
       setOrdering(createOrdering(sortItems(items)));
     }
-  }, [open]); // (3) items were deleted
+  }, [open, shouldHandleEffects]); // (3) items were deleted
 
   useEffect(() => {
-    if (shouldSort && prevItems && items.length < prevItems.length) {
+    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
       let keep = [];
       ordering.forEach(o => {
         if (getItem(items, o)) {
@@ -74,7 +83,7 @@ export default function ListGroup(props) {
       });
       setOrdering(keep);
     }
-  }, [items]);
+  }, [items, shouldHandleEffects]);
 
   const toggleOpen = () => setOpen(!open);
 
@@ -92,14 +101,14 @@ export default function ListGroup(props) {
       }), _jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [AddContainer ? _jsx(AddContainer, {
-          children: _jsx("div", {
-            class: "bio-properties-panel-add-entry",
+          children: _jsx("button", {
+            class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
             children: _jsx(CreateIcon, {})
           })
         }) : null, hasItems ? _jsx("div", {
           class: "bio-properties-panel-list-badge",
           children: items.length
-        }) : null, hasItems ? _jsx("div", {
+        }) : null, hasItems ? _jsx("button", {
           class: "bio-properties-panel-group-header-button",
           children: _jsx(GroupArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'

package/lib/components/ListGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ListGroup.js"],"names":["useState","useEffect","classnames","find","sortBy","usePrevious","ListItem","CreateIcon","GroupArrowIcon","noop","ListGroup","props","id","items","label","add","AddContainer","shouldSort","open","setOpen","ordering","setOrdering","newItemAdded","setNewItemAdded","prevItems","createOrdering","length","forEach","item","includes","push","newOrdering","sortItems","removeDuplicates","keep","o","getItem","toggleOpen","hasItems","getTitleAttribute","map","index","i","toLowerCase","filter","indexOf","count"],"mappings":"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","sourcesContent":["import {\n  useState,\n  useEffect\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  find,\n  sortBy\n} from 'min-dash';\n\nimport {\n  usePrevious\n} from '../hooks';\n\nimport ListItem from './ListItem';\n\nimport {\n  CreateIcon,\n  GroupArrowIcon\n} from './icons';\n\nconst noop = () => {};\n\n/**\n * @param {import('../PropertiesPanel').ListGroupDefinition} props\n */\nexport default function ListGroup(props) {\n  const {\n    id,\n    items,\n    label,\n    add: AddContainer,\n    shouldSort = true\n  } = props;\n\n  const [ open, setOpen ] = useState(false);\n  const [ ordering, setOrdering ] = useState([]);\n  const [ newItemAdded, setNewItemAdded ] = useState(false);\n\n  const prevItems = usePrevious(items);\n\n\n  // keep ordering in sync to items and open changes\n\n  // (0) set initial ordering from given items\n  useEffect(() => {\n    if (!prevItems || !shouldSort) {\n      setOrdering(createOrdering(items));\n    }\n  }, [ items ]);\n\n  // (1) items were added\n  useEffect(() => {\n    if (shouldSort && prevItems && items.length > prevItems.length) {\n\n      let add = [];\n\n      items.forEach(item => {\n        if (!ordering.includes(item.id)) {\n          add.push(item.id);\n        }\n      });\n\n      let newOrdering = ordering;\n\n      // sort + open if closed\n      if (!open) {\n        newOrdering = createOrdering(sortItems(items));\n        setOpen(true);\n      }\n\n      // add new items on top\n      newOrdering = removeDuplicates([\n        ...add,\n        ...newOrdering\n      ]);\n\n      setOrdering(newOrdering);\n      setNewItemAdded(true);\n    } else {\n      setNewItemAdded(false);\n    }\n  }, [ items, open ]);\n\n  // (2) sort items on open\n  useEffect(() => {\n\n    // we already sorted as items were added\n    if (shouldSort && open && !newItemAdded) {\n      setOrdering(createOrdering(sortItems(items)));\n    }\n  }, [ open ]);\n\n  // (3) items were deleted\n  useEffect(() => {\n    if (shouldSort && prevItems && items.length < prevItems.length) {\n      let keep = [];\n\n      ordering.forEach(o => {\n        if (getItem(items, o)) {\n          keep.push(o);\n        }\n      });\n\n      setOrdering(keep);\n    }\n  }, [ items ]);\n\n  const toggleOpen = () => setOpen(!open);\n\n  const hasItems = !!items.length;\n\n\n  return <div class=\"bio-properties-panel-group\" data-group-id={ 'group-' + id }>\n    <div\n      class={ classnames(\n        'bio-properties-panel-group-header',\n        hasItems ? '' : 'empty'\n      ) }\n      onClick={ hasItems ? toggleOpen : noop }>\n      <div title={ getTitleAttribute(label, items) } class=\"bio-properties-panel-group-header-title\">\n        { label }\n      </div>\n      <div class=\"bio-properties-panel-group-header-buttons\">\n        {\n          AddContainer\n            ? (\n              <AddContainer>\n                <div class=\"bio-properties-panel-add-entry\">\n                  <CreateIcon />\n                </div>\n              </AddContainer>\n            )\n            : null\n        }\n        {\n          hasItems\n            ? (\n              <div class=\"bio-properties-panel-list-badge\">\n                { items.length }\n              </div>\n            )\n            : null\n        }\n        {\n          hasItems\n            ? (\n              <div class=\"bio-properties-panel-group-header-button\">\n                <GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n              </div>\n            )\n            : null\n        }\n      </div>\n    </div>\n    <div class={ classnames(\n      'bio-properties-panel-list',\n      open && hasItems ? 'open' : ''\n    ) }>\n      {\n        ordering.map((o, index) => {\n          const item = getItem(items, o);\n\n          if (!item) {\n            return;\n          }\n\n          return (\n            <ListItem\n              key={ item.id }\n              autoOpen={ index === 0 && newItemAdded } // open first item when recently added\n              { ...item } />\n          );\n        })\n      }\n    </div>\n  </div>;\n}\n\n\n// helpers ////////////////////\n\n/**\n * Sorts given items alphanumeric by label\n */\nfunction sortItems(items) {\n  return sortBy(items, i => i.label.toLowerCase());\n}\n\nfunction getItem(items, id) {\n  return find(items, i => i.id === id);\n}\n\nfunction createOrdering(items) {\n  return items.map(i => i.id);\n}\n\nfunction removeDuplicates(items) {\n  return items.filter((i, index) => items.indexOf(i) === index);\n}\n\nfunction getTitleAttribute(label, items) {\n  const count = items.length;\n\n  return label + (count ? ` (${count} item${count != 1 ? 's' : ''})` : '');\n}"],"file":"ListGroup.js"}
+{"version":3,"sources":["../../src/components/ListGroup.js"],"names":["useState","useEffect","classnames","find","sortBy","usePrevious","ListItem","CreateIcon","GroupArrowIcon","noop","ListGroup","props","element","id","items","label","add","AddContainer","shouldSort","open","setOpen","ordering","setOrdering","newItemAdded","setNewItemAdded","prevItems","prevElement","elementChanged","shouldHandleEffects","createOrdering","sortItems","length","forEach","item","includes","push","newOrdering","removeDuplicates","keep","o","getItem","toggleOpen","hasItems","getTitleAttribute","map","index","i","toLowerCase","filter","indexOf","count"],"mappings":"AAAA,SACEA,QADF,EAEEC,SAFF,QAGO,cAHP;AAKA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,IADF,EAEEC,MAFF,QAGO,UAHP;AAKA,SACEC,WADF,QAEO,UAFP;AAIA,OAAOC,QAAP,MAAqB,YAArB;AAEA,SACEC,UADF,EAEEC,cAFF,QAGO,SAHP;;;;AAKA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;AAEA;AACA;AACA;;;AACA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACvC,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,EAFI;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,GAAG,EAAEC,YALD;AAMJC,IAAAA,UAAU,GAAG;AANT,MAOFP,KAPJ;AASA,QAAM,CAAEQ,IAAF,EAAQC,OAAR,IAAoBpB,QAAQ,CAAC,KAAD,CAAlC;AACA,QAAM,CAAEqB,QAAF,EAAYC,WAAZ,IAA4BtB,QAAQ,CAAC,EAAD,CAA1C;AACA,QAAM,CAAEuB,YAAF,EAAgBC,eAAhB,IAAoCxB,QAAQ,CAAC,KAAD,CAAlD;AAEA,QAAMyB,SAAS,GAAGpB,WAAW,CAACS,KAAD,CAA7B;AACA,QAAMY,WAAW,GAAGrB,WAAW,CAACO,OAAD,CAA/B;AAEA,QAAMe,cAAc,GAAGf,OAAO,KAAKc,WAAnC;AACA,QAAME,mBAAmB,GAAG,CAACD,cAAD,IAAmBT,UAA/C,CAlBuC,CAoBvC;;AACA,MAAIS,cAAJ,EAAoB;AAClBL,IAAAA,WAAW,CAACO,cAAc,CAACX,UAAU,GAAGY,SAAS,CAAChB,KAAD,CAAZ,GAAsBA,KAAjC,CAAf,CAAX;AACD,GAvBsC,CAyBvC;AAEA;;;AACAb,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,CAACwB,SAAD,IAAc,CAACP,UAAnB,EAA+B;AAC7BI,MAAAA,WAAW,CAACO,cAAc,CAACf,KAAD,CAAf,CAAX;AACD;AACF,GAJQ,EAIN,CAAEA,KAAF,EAASF,OAAT,CAJM,CAAT,CA5BuC,CAkCvC;;AACAX,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI2B,mBAAmB,IAAIH,SAAvB,IAAoCX,KAAK,CAACiB,MAAN,GAAeN,SAAS,CAACM,MAAjE,EAAyE;AAEvE,UAAIf,GAAG,GAAG,EAAV;AAEAF,MAAAA,KAAK,CAACkB,OAAN,CAAcC,IAAI,IAAI;AACpB,YAAI,CAACZ,QAAQ,CAACa,QAAT,CAAkBD,IAAI,CAACpB,EAAvB,CAAL,EAAiC;AAC/BG,UAAAA,GAAG,CAACmB,IAAJ,CAASF,IAAI,CAACpB,EAAd;AACD;AACF,OAJD;AAMA,UAAIuB,WAAW,GAAGf,QAAlB,CAVuE,CAYvE;;AACA,UAAI,CAACF,IAAL,EAAW;AACTiB,QAAAA,WAAW,GAAGP,cAAc,CAACC,SAAS,CAAChB,KAAD,CAAV,CAA5B;AACAM,QAAAA,OAAO,CAAC,IAAD,CAAP;AACD,OAhBsE,CAkBvE;;;AACAgB,MAAAA,WAAW,GAAGC,gBAAgB,CAAC,CAC7B,GAAGrB,GAD0B,EAE7B,GAAGoB,WAF0B,CAAD,CAA9B;AAKAd,MAAAA,WAAW,CAACc,WAAD,CAAX;AACAZ,MAAAA,eAAe,CAAC,IAAD,CAAf;AACD,KA1BD,MA0BO;AACLA,MAAAA,eAAe,CAAC,KAAD,CAAf;AACD;AACF,GA9BQ,EA8BN,CAAEV,KAAF,EAASK,IAAT,EAAeS,mBAAf,CA9BM,CAAT,CAnCuC,CAmEvC;;AACA3B,EAAAA,SAAS,CAAC,MAAM;AAEd;AACA,QAAI2B,mBAAmB,IAAIT,IAAvB,IAA+B,CAACI,YAApC,EAAkD;AAChDD,MAAAA,WAAW,CAACO,cAAc,CAACC,SAAS,CAAChB,KAAD,CAAV,CAAf,CAAX;AACD;AACF,GANQ,EAMN,CAAEK,IAAF,EAAQS,mBAAR,CANM,CAAT,CApEuC,CA4EvC;;AACA3B,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI2B,mBAAmB,IAAIH,SAAvB,IAAoCX,KAAK,CAACiB,MAAN,GAAeN,SAAS,CAACM,MAAjE,EAAyE;AACvE,UAAIO,IAAI,GAAG,EAAX;AAEAjB,MAAAA,QAAQ,CAACW,OAAT,CAAiBO,CAAC,IAAI;AACpB,YAAIC,OAAO,CAAC1B,KAAD,EAAQyB,CAAR,CAAX,EAAuB;AACrBD,UAAAA,IAAI,CAACH,IAAL,CAAUI,CAAV;AACD;AACF,OAJD;AAMAjB,MAAAA,WAAW,CAACgB,IAAD,CAAX;AACD;AACF,GAZQ,EAYN,CAAExB,KAAF,EAASc,mBAAT,CAZM,CAAT;;AAcA,QAAMa,UAAU,GAAG,MAAMrB,OAAO,CAAC,CAACD,IAAF,CAAhC;;AAEA,QAAMuB,QAAQ,GAAG,CAAC,CAAC5B,KAAK,CAACiB,MAAzB;AAEA,SAAO;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgB,WAAWlB,EAAnE;AAAA,eACL;AACE,MAAA,KAAK,EAAGX,UAAU,CAChB,mCADgB,EAEhBwC,QAAQ,GAAG,EAAH,GAAQ,OAFA,CADpB;AAKE,MAAA,OAAO,EAAGA,QAAQ,GAAGD,UAAH,GAAgBhC,IALpC;AAAA,iBAME;AAAK,QAAA,KAAK,EAAGkC,iBAAiB,CAAC5B,KAAD,EAAQD,KAAR,CAA9B;AAA+C,QAAA,KAAK,EAAC,yCAArD;AAAA,kBACIC;AADJ,QANF,EASE;AAAK,QAAA,KAAK,EAAC,2CAAX;AAAA,mBAEIE,YAAY,GAER,KAAC,YAAD;AAAA,oBACE;AAAQ,YAAA,KAAK,EAAC,yEAAd;AAAA,sBACE,KAAC,UAAD;AADF;AADF,UAFQ,GAQR,IAVR,EAaIyB,QAAQ,GAEJ;AAAK,UAAA,KAAK,EAAC,iCAAX;AAAA,oBACI5B,KAAK,CAACiB;AADV,UAFI,GAMJ,IAnBR,EAsBIW,QAAQ,GAEJ;AAAQ,UAAA,KAAK,EAAC,0CAAd;AAAA,oBACE,KAAC,cAAD;AAAgB,YAAA,KAAK,EAAGvB,IAAI,GAAG,iCAAH,GAAuC;AAAnE;AADF,UAFI,GAMJ,IA5BR;AAAA,QATF;AAAA,MADK,EA0CL;AAAK,MAAA,KAAK,EAAGjB,UAAU,CACrB,2BADqB,EAErBiB,IAAI,IAAIuB,QAAR,GAAmB,MAAnB,GAA4B,EAFP,CAAvB;AAAA,gBAKIrB,QAAQ,CAACuB,GAAT,CAAa,CAACL,CAAD,EAAIM,KAAJ,KAAc;AACzB,cAAMZ,IAAI,GAAGO,OAAO,CAAC1B,KAAD,EAAQyB,CAAR,CAApB;;AAEA,YAAI,CAACN,IAAL,EAAW;AACT;AACD;;AAED,eACE,KAAC,QAAD;AAEE,UAAA,QAAQ,EAAGY,KAAK,KAAK,CAAV,IAAetB,YAF5B,CAE2C;AAF3C;AAAA,aAGOU;AAHP,WACQA,IAAI,CAACpB,EADb,CADF;AAMD,OAbD;AALJ,MA1CK;AAAA,IAAP;AAgED,C,CAGD;;AAEA;AACA;AACA;;AACA,SAASiB,SAAT,CAAmBhB,KAAnB,EAA0B;AACxB,SAAOV,MAAM,CAACU,KAAD,EAAQgC,CAAC,IAAIA,CAAC,CAAC/B,KAAF,CAAQgC,WAAR,EAAb,CAAb;AACD;;AAED,SAASP,OAAT,CAAiB1B,KAAjB,EAAwBD,EAAxB,EAA4B;AAC1B,SAAOV,IAAI,CAACW,KAAD,EAAQgC,CAAC,IAAIA,CAAC,CAACjC,EAAF,KAASA,EAAtB,CAAX;AACD;;AAED,SAASgB,cAAT,CAAwBf,KAAxB,EAA+B;AAC7B,SAAOA,KAAK,CAAC8B,GAAN,CAAUE,CAAC,IAAIA,CAAC,CAACjC,EAAjB,CAAP;AACD;;AAED,SAASwB,gBAAT,CAA0BvB,KAA1B,EAAiC;AAC/B,SAAOA,KAAK,CAACkC,MAAN,CAAa,CAACF,CAAD,EAAID,KAAJ,KAAc/B,KAAK,CAACmC,OAAN,CAAcH,CAAd,MAAqBD,KAAhD,CAAP;AACD;;AAED,SAASF,iBAAT,CAA2B5B,KAA3B,EAAkCD,KAAlC,EAAyC;AACvC,QAAMoC,KAAK,GAAGpC,KAAK,CAACiB,MAApB;AAEA,SAAOhB,KAAK,IAAImC,KAAK,GAAI,KAAIA,KAAM,QAAOA,KAAK,IAAI,CAAT,GAAa,GAAb,GAAmB,EAAG,GAA3C,GAAgD,EAAzD,CAAZ;AACD","sourcesContent":["import {\n  useState,\n  useEffect\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  find,\n  sortBy\n} from 'min-dash';\n\nimport {\n  usePrevious\n} from '../hooks';\n\nimport ListItem from './ListItem';\n\nimport {\n  CreateIcon,\n  GroupArrowIcon\n} from './icons';\n\nconst noop = () => {};\n\n/**\n * @param {import('../PropertiesPanel').ListGroupDefinition} props\n */\nexport default function ListGroup(props) {\n  const {\n    element,\n    id,\n    items,\n    label,\n    add: AddContainer,\n    shouldSort = true\n  } = props;\n\n  const [ open, setOpen ] = useState(false);\n  const [ ordering, setOrdering ] = useState([]);\n  const [ newItemAdded, setNewItemAdded ] = useState(false);\n\n  const prevItems = usePrevious(items);\n  const prevElement = usePrevious(element);\n\n  const elementChanged = element !== prevElement;\n  const shouldHandleEffects = !elementChanged && shouldSort;\n\n  // reset initial ordering when element changes (before first render)\n  if (elementChanged) {\n    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));\n  }\n\n  // keep ordering in sync to items - and open changes\n\n  // (0) set initial ordering from given items\n  useEffect(() => {\n    if (!prevItems || !shouldSort) {\n      setOrdering(createOrdering(items));\n    }\n  }, [ items, element ]);\n\n  // (1) items were added\n  useEffect(() => {\n    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {\n\n      let add = [];\n\n      items.forEach(item => {\n        if (!ordering.includes(item.id)) {\n          add.push(item.id);\n        }\n      });\n\n      let newOrdering = ordering;\n\n      // sort + open if closed\n      if (!open) {\n        newOrdering = createOrdering(sortItems(items));\n        setOpen(true);\n      }\n\n      // add new items on top\n      newOrdering = removeDuplicates([\n        ...add,\n        ...newOrdering\n      ]);\n\n      setOrdering(newOrdering);\n      setNewItemAdded(true);\n    } else {\n      setNewItemAdded(false);\n    }\n  }, [ items, open, shouldHandleEffects ]);\n\n  // (2) sort items on open\n  useEffect(() => {\n\n    // we already sorted as items were added\n    if (shouldHandleEffects && open && !newItemAdded) {\n      setOrdering(createOrdering(sortItems(items)));\n    }\n  }, [ open, shouldHandleEffects ]);\n\n  // (3) items were deleted\n  useEffect(() => {\n    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {\n      let keep = [];\n\n      ordering.forEach(o => {\n        if (getItem(items, o)) {\n          keep.push(o);\n        }\n      });\n\n      setOrdering(keep);\n    }\n  }, [ items, shouldHandleEffects ]);\n\n  const toggleOpen = () => setOpen(!open);\n\n  const hasItems = !!items.length;\n\n  return <div class=\"bio-properties-panel-group\" data-group-id={ 'group-' + id }>\n    <div\n      class={ classnames(\n        'bio-properties-panel-group-header',\n        hasItems ? '' : 'empty'\n      ) }\n      onClick={ hasItems ? toggleOpen : noop }>\n      <div title={ getTitleAttribute(label, items) } class=\"bio-properties-panel-group-header-title\">\n        { label }\n      </div>\n      <div class=\"bio-properties-panel-group-header-buttons\">\n        {\n          AddContainer\n            ? (\n              <AddContainer>\n                <button class=\"bio-properties-panel-group-header-button bio-properties-panel-add-entry\">\n                  <CreateIcon />\n                </button>\n              </AddContainer>\n            )\n            : null\n        }\n        {\n          hasItems\n            ? (\n              <div class=\"bio-properties-panel-list-badge\">\n                { items.length }\n              </div>\n            )\n            : null\n        }\n        {\n          hasItems\n            ? (\n              <button class=\"bio-properties-panel-group-header-button\">\n                <GroupArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n              </button>\n            )\n            : null\n        }\n      </div>\n    </div>\n    <div class={ classnames(\n      'bio-properties-panel-list',\n      open && hasItems ? 'open' : ''\n    ) }>\n      {\n        ordering.map((o, index) => {\n          const item = getItem(items, o);\n\n          if (!item) {\n            return;\n          }\n\n          return (\n            <ListItem\n              key={ item.id }\n              autoOpen={ index === 0 && newItemAdded } // open first item when recently added\n              { ...item } />\n          );\n        })\n      }\n    </div>\n  </div>;\n}\n\n\n// helpers ////////////////////\n\n/**\n * Sorts given items alphanumeric by label\n */\nfunction sortItems(items) {\n  return sortBy(items, i => i.label.toLowerCase());\n}\n\nfunction getItem(items, id) {\n  return find(items, i => i.id === id);\n}\n\nfunction createOrdering(items) {\n  return items.map(i => i.id);\n}\n\nfunction removeDuplicates(items) {\n  return items.filter((i, index) => items.indexOf(i) === index);\n}\n\nfunction getTitleAttribute(label, items) {\n  const count = items.length;\n\n  return label + (count ? ` (${count} item${count != 1 ? 's' : ''})` : '');\n}"],"file":"ListGroup.js"}

package/lib/components/entries/Collapsible.js

@@ -32,8 +32,9 @@ export default function CollapsibleEntry(props) {
           class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
         })
       }), RemoveContainer ? _jsx(RemoveContainer, {
-        children: _jsx(ListDeleteIcon, {
-          class: "bio-properties-panel-remove-entry"
+        children: _jsx("button", {
+          class: "bio-properties-panel-remove-entry",
+          children: _jsx(ListDeleteIcon, {})
         })
       }) : null]
     }), _jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/Collapsible.js"],"names":["useState","classnames","ListArrowIcon","ListDeleteIcon","CollapsibleEntry","props","id","entries","label","remove","RemoveContainer","open","shouldOpen","setOpen","toggleOpen","placeholderLabel","map","e","component"],"mappings":"AAAA,SACEA,QADF,QAEO,cAFP;AAIA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,aADF,EAEEC,cAFF,QAGO,UAHP;;;AAMA,eAAe,SAASC,gBAAT,CAA0BC,KAA1B,EAAiC;AAC9C,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,OAAO,GAAG,EAFN;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,MAAM,EAAEC,eAJJ;AAKJC,IAAAA,IAAI,EAAEC;AALF,MAMFP,KANJ;AAQA,QAAM,CAAEM,IAAF,EAAQE,OAAR,IAAoBb,QAAQ,CAACY,UAAD,CAAlC;;AAEA,QAAME,UAAU,GAAG,MAAMD,OAAO,CAAC,CAACF,IAAF,CAAhC,CAX8C,CAa9C;;;AACA,QAAMI,gBAAgB,GAAG,SAAzB;AAEA,SACE;AACE,qBAAgBT,EADlB;AAEE,IAAA,KAAK,EAAGL,UAAU,CAChB,wCADgB,EAEhBU,IAAI,GAAG,MAAH,GAAY,EAFA,CAFpB;AAAA,eAME;AAAK,MAAA,KAAK,EAAC,+CAAX;AAA2D,MAAA,OAAO,EAAGG,UAArE;AAAA,iBACE;AACE,QAAA,KAAK,EAAGb,UAAU,CAChB,qDADgB,EAEhB,CAACO,KAAD,IAAU,OAFM,CADpB;AAAA,kBAKIA,KAAK,IAAIO;AALb,QADF,EAQE;AAAK,QAAA,KAAK,EAAC,8CAAX;AAAA,kBACE,KAAC,aAAD;AAAe,UAAA,KAAK,EAAGJ,IAAI,GAAG,iCAAH,GAAuC;AAAlE;AADF,QARF,EAYID,eAAe,GAGX,KAAC,eAAD;AAAA,kBACE,KAAC,cAAD;AAAgB,UAAA,KAAK,EAAC;AAAtB;AADF,QAHW,GAOX,IAnBR;AAAA,MANF,EA4BE;AAAK,MAAA,KAAK,EAAGT,UAAU,CACrB,gDADqB,EAErBU,IAAI,GAAG,MAAH,GAAY,EAFK,CAAvB;AAAA,gBAKIJ,OAAO,CAACS,GAAR,CAAYC,CAAC,IAAIA,CAAC,CAACC,SAAnB;AALJ,MA5BF;AAAA,IADF;AAuCD","sourcesContent":["import {\n  useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  ListArrowIcon,\n  ListDeleteIcon,\n} from '../icons';\n\n\nexport default function CollapsibleEntry(props) {\n  const {\n    id,\n    entries = [],\n    label,\n    remove: RemoveContainer,\n    open: shouldOpen\n  } = props;\n\n  const [ open, setOpen ] = useState(shouldOpen);\n\n  const toggleOpen = () => setOpen(!open);\n\n  // todo(pinussilvestrus): translate once we have a translate mechanism for the core\n  const placeholderLabel = '<empty>';\n\n  return (\n    <div\n      data-entry-id={ id }\n      class={ classnames(\n        'bio-properties-panel-collapsible-entry',\n        open ? 'open' : ''\n      ) }>\n      <div class=\"bio-properties-panel-collapsible-entry-header\" onClick={ toggleOpen }>\n        <div\n          class={ classnames(\n            'bio-properties-panel-collapsible-entry-header-title',\n            !label && 'empty'\n          ) }>\n          { label || placeholderLabel }\n        </div>\n        <div class=\"bio-properties-panel-collapsible-entry-arrow\">\n          <ListArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n        </div>\n        {\n          RemoveContainer\n            ?\n            (\n              <RemoveContainer>\n                <ListDeleteIcon class=\"bio-properties-panel-remove-entry\" />\n              </RemoveContainer>\n            )\n            : null\n        }\n      </div>\n      <div class={ classnames(\n        'bio-properties-panel-collapsible-entry-entries',\n        open ? 'open' : ''\n      ) }>\n        {\n          entries.map(e => e.component)\n        }\n      </div>\n    </div>\n  );\n}"],"file":"Collapsible.js"}
+{"version":3,"sources":["../../../src/components/entries/Collapsible.js"],"names":["useState","classnames","ListArrowIcon","ListDeleteIcon","CollapsibleEntry","props","id","entries","label","remove","RemoveContainer","open","shouldOpen","setOpen","toggleOpen","placeholderLabel","map","e","component"],"mappings":"AAAA,SACEA,QADF,QAEO,cAFP;AAIA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,aADF,EAEEC,cAFF,QAGO,UAHP;;;AAMA,eAAe,SAASC,gBAAT,CAA0BC,KAA1B,EAAiC;AAC9C,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,OAAO,GAAG,EAFN;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,MAAM,EAAEC,eAJJ;AAKJC,IAAAA,IAAI,EAAEC;AALF,MAMFP,KANJ;AAQA,QAAM,CAAEM,IAAF,EAAQE,OAAR,IAAoBb,QAAQ,CAACY,UAAD,CAAlC;;AAEA,QAAME,UAAU,GAAG,MAAMD,OAAO,CAAC,CAACF,IAAF,CAAhC,CAX8C,CAa9C;;;AACA,QAAMI,gBAAgB,GAAG,SAAzB;AAEA,SACE;AACE,qBAAgBT,EADlB;AAEE,IAAA,KAAK,EAAGL,UAAU,CAChB,wCADgB,EAEhBU,IAAI,GAAG,MAAH,GAAY,EAFA,CAFpB;AAAA,eAME;AAAK,MAAA,KAAK,EAAC,+CAAX;AAA2D,MAAA,OAAO,EAAGG,UAArE;AAAA,iBACE;AACE,QAAA,KAAK,EAAGb,UAAU,CAChB,qDADgB,EAEhB,CAACO,KAAD,IAAU,OAFM,CADpB;AAAA,kBAKIA,KAAK,IAAIO;AALb,QADF,EAQE;AAAK,QAAA,KAAK,EAAC,8CAAX;AAAA,kBACE,KAAC,aAAD;AAAe,UAAA,KAAK,EAAGJ,IAAI,GAAG,iCAAH,GAAuC;AAAlE;AADF,QARF,EAYID,eAAe,GAGX,KAAC,eAAD;AAAA,kBACE;AAAQ,UAAA,KAAK,EAAC,mCAAd;AAAA,oBACE,KAAC,cAAD;AADF;AADF,QAHW,GASX,IArBR;AAAA,MANF,EA8BE;AAAK,MAAA,KAAK,EAAGT,UAAU,CACrB,gDADqB,EAErBU,IAAI,GAAG,MAAH,GAAY,EAFK,CAAvB;AAAA,gBAKIJ,OAAO,CAACS,GAAR,CAAYC,CAAC,IAAIA,CAAC,CAACC,SAAnB;AALJ,MA9BF;AAAA,IADF;AAyCD","sourcesContent":["import {\n  useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  ListArrowIcon,\n  ListDeleteIcon,\n} from '../icons';\n\n\nexport default function CollapsibleEntry(props) {\n  const {\n    id,\n    entries = [],\n    label,\n    remove: RemoveContainer,\n    open: shouldOpen\n  } = props;\n\n  const [ open, setOpen ] = useState(shouldOpen);\n\n  const toggleOpen = () => setOpen(!open);\n\n  // todo(pinussilvestrus): translate once we have a translate mechanism for the core\n  const placeholderLabel = '<empty>';\n\n  return (\n    <div\n      data-entry-id={ id }\n      class={ classnames(\n        'bio-properties-panel-collapsible-entry',\n        open ? 'open' : ''\n      ) }>\n      <div class=\"bio-properties-panel-collapsible-entry-header\" onClick={ toggleOpen }>\n        <div\n          class={ classnames(\n            'bio-properties-panel-collapsible-entry-header-title',\n            !label && 'empty'\n          ) }>\n          { label || placeholderLabel }\n        </div>\n        <div class=\"bio-properties-panel-collapsible-entry-arrow\">\n          <ListArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n        </div>\n        {\n          RemoveContainer\n            ?\n            (\n              <RemoveContainer>\n                <button class=\"bio-properties-panel-remove-entry\">\n                  <ListDeleteIcon />\n                </button>\n              </RemoveContainer>\n            )\n            : null\n        }\n      </div>\n      <div class={ classnames(\n        'bio-properties-panel-collapsible-entry-entries',\n        open ? 'open' : ''\n      ) }>\n        {\n          entries.map(e => e.component)\n        }\n      </div>\n    </div>\n  );\n}"],"file":"Collapsible.js"}

package/lib/components/entries/List.js

@@ -0,0 +1,196 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { query as domQuery } from 'min-dom';
+import { useKeyFactory, usePrevious } from '../../hooks';
+import classnames from 'classnames';
+import { CreateIcon, GroupArrowIcon, ListDeleteIcon } from '../icons';
+/**
+ * Entry for handling lists represented as nested entries.
+ *
+ * @template Item
+ * @param {object} props
+ * @param {string} props.id
+ * @param {*} props.element
+ * @param {Function} props.onAdd
+ * @param {(item: Item, index: number, isNew: boolean) => JSX.Element} props.renderItem
+ * @param {string} [props.label='<empty>']
+ * @param {Function} [props.onRemove]
+ * @param {Item[]} [props.items]
+ * @param {boolean} [props.open]
+ * @param {string} [props.autoFocusEntry]
+ * @param {(a: Item, b: Item) => -1 | 0 | 1} [props.compareFn]
+ * @returns
+ */
+
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsxs as _jsxs } from "preact/jsx-runtime";
+export default 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', open ? 'open' : ''),
+    children: [_jsxs("div", {
+      class: "bio-properties-panel-list-entry-header",
+      onClick: toggleOpen,
+      children: [_jsx("div", {
+        title: getTitle(label, items),
+        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", {
+          onClick: addItem,
+          class: "bio-properties-panel-add-entry",
+          children: _jsx(CreateIcon, {})
+        }), hasItems && _jsx("div", {
+          class: "bio-properties-panel-list-badge",
+          children: items.length
+        }), hasItems && _jsx("button", {
+          class: "bio-properties-panel-list-entry-arrow",
+          children: _jsx(GroupArrowIcon, {
+            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) {
+      const entry = domQuery(`[data-entry-id="${id}"]`);
+      const focusableInput = domQuery('.bio-properties-panel-input', entry);
+
+      if (focusableInput) {
+        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",
+          class: "bio-properties-panel-remove-entry",
+          onClick: () => onRemove && onRemove(item),
+          children: _jsx(ListDeleteIcon, {})
+        })]
+      }, 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.
+ *
+ * @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) Move new items to the beginning of the list.
+
+    for (const item of currentItems) {
+      if (!items.includes(item)) {
+        items.unshift(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)) : [];
+}
+//# sourceMappingURL=List.js.map

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

@@ -0,0 +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"}

package/lib/components/entries/Simple.js

@@ -0,0 +1,56 @@
+import { useMemo } from 'preact/hooks';
+/**
+ * @param {Object} props
+ * @param {Function} props.debounce
+ * @param {Boolean} [props.disabled]
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {Function} [props.onBlur]
+ * @param {Function} [props.onFocus]
+ * @param {Function} props.setValue
+ */
+
+import { jsx as _jsx } from "preact/jsx-runtime";
+export default 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(id),
+      type: "text",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      value: value || ''
+    })
+  });
+}
+export function isEdited(node) {
+  return node && !!node.value;
+} // helpers /////////////////
+
+function prefixId(id) {
+  return `bio-properties-panel-${id}`;
+}
+//# sourceMappingURL=Simple.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/entries/Simple.js"],"names":["useMemo","Simple","props","debounce","disabled","element","getValue","id","onBlur","onFocus","setValue","handleInput","target","value","length","undefined","prefixId","isEdited","node"],"mappings":"AAAA,SACEA,OADF,QAEO,cAFP;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AACpC,QAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,EALI;AAMJC,IAAAA,MANI;AAOJC,IAAAA,OAPI;AAQJC,IAAAA;AARI,MASFR,KATJ;AAWA,QAAMS,WAAW,GAAGX,OAAO,CAAC,MAAM;AAChC,WAAOG,QAAQ,CAAC,CAAC;AAAES,MAAAA;AAAF,KAAD,KAAgBF,QAAQ,CAACE,MAAM,CAACC,KAAP,CAAaC,MAAb,GAAsBF,MAAM,CAACC,KAA7B,GAAqCE,SAAtC,CAAzB,CAAf;AACD,GAF0B,EAExB,CAAEL,QAAF,EAAYP,QAAZ,CAFwB,CAA3B;AAIA,QAAMU,KAAK,GAAGP,QAAQ,CAACD,OAAD,CAAtB;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,6BAAX;AAAA,cACE;AACE,MAAA,EAAE,EAAGW,QAAQ,CAACT,EAAD,CADf;AAEE,MAAA,IAAI,EAAC,MAFP;AAGE,MAAA,IAAI,EAAGA,EAHT;AAIE,MAAA,UAAU,EAAC,OAJb;AAKE,MAAA,YAAY,EAAC,KALf;AAME,MAAA,QAAQ,EAAGH,QANb;AAOE,MAAA,KAAK,EAAC,4BAPR;AAQE,MAAA,OAAO,EAAGO,WARZ;AASE,MAAA,OAAO,EAAGF,OATZ;AAUE,MAAA,MAAM,EAAGD,MAVX;AAWE,MAAA,KAAK,EAAGK,KAAK,IAAI;AAXnB;AADF,IADF;AAgBD;AAED,OAAO,SAASI,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACL,KAAtB;AACD,C,CAGD;;AAEA,SAASG,QAAT,CAAkBT,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import {\n  useMemo\n} from 'preact/hooks';\n\n/**\n * @param {Object} props\n * @param {Function} props.debounce\n * @param {Boolean} [props.disabled]\n * @param {Object} props.element\n * @param {Function} props.getValue\n * @param {String} props.id\n * @param {Function} [props.onBlur]\n * @param {Function} [props.onFocus]\n * @param {Function} props.setValue\n */\nexport default function Simple(props) {\n  const {\n    debounce,\n    disabled,\n    element,\n    getValue,\n    id,\n    onBlur,\n    onFocus,\n    setValue\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(({ target }) => setValue(target.value.length ? target.value : undefined));\n  }, [ setValue, debounce ]);\n\n  const value = getValue(element);\n\n  return (\n    <div class=\"bio-properties-panel-simple\">\n      <input\n        id={ prefixId(id) }\n        type=\"text\"\n        name={ id }\n        spellCheck=\"false\"\n        autoComplete=\"off\"\n        disabled={ disabled }\n        class=\"bio-properties-panel-input\"\n        onInput={ handleInput }\n        onFocus={ onFocus }\n        onBlur={ onBlur }\n        value={ value || '' } />\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"Simple.js"}

package/lib/components/entries/TextArea.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'preact/hooks';
+import classnames from 'classnames';
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { jsxs as _jsxs } from "preact/jsx-runtime";
 
@@ -9,7 +10,8 @@ function TextArea(props) {
     rows = 2,
     debounce,
     onInput,
-    value = ''
+    value = '',
+    monospace
   } = props;
   const handleInput = useMemo(() => {
     return debounce(({
@@ -26,7 +28,7 @@ function TextArea(props) {
       id: prefixId(id),
       name: id,
       spellCheck: "false",
-      class: "bio-properties-panel-input",
+      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
       onInput: handleInput,
       onFocus: props.onFocus,
       onBlur: props.onBlur,
@@ -45,6 +47,7 @@ function TextArea(props) {
  * @param {Function} props.getValue
  * @param {Function} props.setValue
  * @param {Number} props.rows
+ * @param {Boolean} props.monospace
  */
 
 
@@ -57,7 +60,8 @@ export default function TextAreaEntry(props) {
     label,
     getValue,
     setValue,
-    rows
+    rows,
+    monospace
   } = props;
   const value = getValue(element);
   return _jsxs("div", {
@@ -69,7 +73,8 @@ export default function TextAreaEntry(props) {
       value: value,
       onInput: setValue,
       rows: rows,
-      debounce: debounce
+      debounce: debounce,
+      monospace: monospace
     }), description && _jsx("div", {
       class: "bio-properties-panel-description",
       children: description

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/TextArea.js"],"names":["useMemo","TextArea","props","id","label","rows","debounce","onInput","value","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextAreaEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,SACEA,OADF,QAEO,cAFP;;;;AAIA,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AAEvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAAI,GAAG,CAHH;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,OALI;AAMJC,IAAAA,KAAK,GAAG;AANJ,MAOFN,KAPJ;AASA,QAAMO,WAAW,GAAGT,OAAO,CAAC,MAAM;AAChC,WAAOM,QAAQ,CAAC,CAAC;AAAEI,MAAAA;AAAF,KAAD,KAAgBH,OAAO,CAACG,MAAM,CAACF,KAAP,CAAaG,MAAb,GAAsBD,MAAM,CAACF,KAA7B,GAAqCI,SAAtC,CAAxB,CAAf;AACD,GAF0B,EAExB,CAAEL,OAAF,EAAWD,QAAX,CAFwB,CAA3B;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGO,QAAQ,CAACV,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGS,QAAQ,CAACV,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,UAAU,EAAC,OAHb;AAIE,MAAA,KAAK,EAAC,4BAJR;AAKE,MAAA,OAAO,EAAGM,WALZ;AAME,MAAA,OAAO,EAAGP,KAAK,CAACY,OANlB;AAOE,MAAA,MAAM,EAAGZ,KAAK,CAACa,MAPjB;AAQE,MAAA,IAAI,EAAGV,IART;AASE,MAAA,KAAK,EAAGG;AATV,MAFF;AAAA,IADF;AAeD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASQ,aAAT,CAAuBd,KAAvB,EAA8B;AAC3C,QAAM;AACJe,IAAAA,OADI;AAEJd,IAAAA,EAFI;AAGJe,IAAAA,WAHI;AAIJZ,IAAAA,QAJI;AAKJF,IAAAA,KALI;AAMJe,IAAAA,QANI;AAOJC,IAAAA,QAPI;AAQJf,IAAAA;AARI,MASFH,KATJ;AAWA,QAAMM,KAAK,GAAGW,QAAQ,CAACF,OAAD,CAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBd,EAAxD;AAAA,eACE,KAAC,QAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGI,KAHV;AAIE,MAAA,OAAO,EAAGY,QAJZ;AAKE,MAAA,IAAI,EAAGf,IALT;AAME,MAAA,QAAQ,EAAGC;AANb,MADF,EAQIY,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MARnB;AAAA,IADF;AAYD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACd,KAAtB;AACD,C,CAGD;;AAEA,SAASK,QAAT,CAAkBV,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import {\n  useMemo\n} from 'preact/hooks';\n\nfunction TextArea(props) {\n\n  const {\n    id,\n    label,\n    rows = 2,\n    debounce,\n    onInput,\n    value = ''\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(({ target }) => onInput(target.value.length ? target.value : undefined));\n  }, [ onInput, debounce ]);\n\n  return (\n    <div class=\"bio-properties-panel-textarea\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <textarea\n        id={ prefixId(id) }\n        name={ id }\n        spellCheck=\"false\"\n        class=\"bio-properties-panel-input\"\n        onInput={ handleInput }\n        onFocus={ props.onFocus }\n        onBlur={ props.onBlur }\n        rows={ rows }\n        value={ value } />\n    </div>\n  );\n}\n\n/**\n * @param {Object} props\n * @param {Object} props.element\n * @param {String} props.id\n * @param {String} props.description\n * @param {Boolean} props.debounce\n * @param {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Number} props.rows\n */\nexport default function TextAreaEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    debounce,\n    label,\n    getValue,\n    setValue,\n    rows\n  } = props;\n\n  const value = getValue(element);\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <TextArea\n        id={ id }\n        label={ label }\n        value={ value }\n        onInput={ setValue }\n        rows={ rows }\n        debounce={ debounce } />\n      { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}"],"file":"TextArea.js"}
+{"version":3,"sources":["../../../src/components/entries/TextArea.js"],"names":["useMemo","classnames","TextArea","props","id","label","rows","debounce","onInput","value","monospace","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextAreaEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,SACEA,OADF,QAEO,cAFP;AAIA,OAAOC,UAAP,MAAuB,YAAvB;;;;AAEA,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AAEvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAAI,GAAG,CAHH;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,OALI;AAMJC,IAAAA,KAAK,GAAG,EANJ;AAOJC,IAAAA;AAPI,MAQFP,KARJ;AAUA,QAAMQ,WAAW,GAAGX,OAAO,CAAC,MAAM;AAChC,WAAOO,QAAQ,CAAC,CAAC;AAAEK,MAAAA;AAAF,KAAD,KAAgBJ,OAAO,CAACI,MAAM,CAACH,KAAP,CAAaI,MAAb,GAAsBD,MAAM,CAACH,KAA7B,GAAqCK,SAAtC,CAAxB,CAAf;AACD,GAF0B,EAExB,CAAEN,OAAF,EAAWD,QAAX,CAFwB,CAA3B;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGQ,QAAQ,CAACX,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGU,QAAQ,CAACX,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,UAAU,EAAC,OAHb;AAIE,MAAA,KAAK,EAAGH,UAAU,CAChB,4BADgB,EAEhBS,SAAS,GAAG,sCAAH,GAA4C,EAFrC,CAJpB;AAQE,MAAA,OAAO,EAAGC,WARZ;AASE,MAAA,OAAO,EAAGR,KAAK,CAACa,OATlB;AAUE,MAAA,MAAM,EAAGb,KAAK,CAACc,MAVjB;AAWE,MAAA,IAAI,EAAGX,IAXT;AAYE,MAAA,KAAK,EAAGG;AAZV,MAFF;AAAA,IADF;AAkBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASS,aAAT,CAAuBf,KAAvB,EAA8B;AAC3C,QAAM;AACJgB,IAAAA,OADI;AAEJf,IAAAA,EAFI;AAGJgB,IAAAA,WAHI;AAIJb,IAAAA,QAJI;AAKJF,IAAAA,KALI;AAMJgB,IAAAA,QANI;AAOJC,IAAAA,QAPI;AAQJhB,IAAAA,IARI;AASJI,IAAAA;AATI,MAUFP,KAVJ;AAYA,QAAMM,KAAK,GAAGY,QAAQ,CAACF,OAAD,CAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBf,EAAxD;AAAA,eACE,KAAC,QAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGI,KAHV;AAIE,MAAA,OAAO,EAAGa,QAJZ;AAKE,MAAA,IAAI,EAAGhB,IALT;AAME,MAAA,QAAQ,EAAGC,QANb;AAOE,MAAA,SAAS,EAAGG;AAPd,MADF,EASIU,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MATnB;AAAA,IADF;AAaD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACf,KAAtB;AACD,C,CAGD;;AAEA,SAASM,QAAT,CAAkBX,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import {\n  useMemo\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nfunction TextArea(props) {\n\n  const {\n    id,\n    label,\n    rows = 2,\n    debounce,\n    onInput,\n    value = '',\n    monospace\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(({ target }) => onInput(target.value.length ? target.value : undefined));\n  }, [ onInput, debounce ]);\n\n  return (\n    <div class=\"bio-properties-panel-textarea\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <textarea\n        id={ prefixId(id) }\n        name={ id }\n        spellCheck=\"false\"\n        class={ classnames(\n          'bio-properties-panel-input',\n          monospace ? 'bio-properties-panel-input-monospace' : '')\n        }\n        onInput={ handleInput }\n        onFocus={ props.onFocus }\n        onBlur={ props.onBlur }\n        rows={ rows }\n        value={ value } />\n    </div>\n  );\n}\n\n/**\n * @param {Object} props\n * @param {Object} props.element\n * @param {String} props.id\n * @param {String} props.description\n * @param {Boolean} props.debounce\n * @param {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Number} props.rows\n * @param {Boolean} props.monospace\n */\nexport default function TextAreaEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    debounce,\n    label,\n    getValue,\n    setValue,\n    rows,\n    monospace\n  } = props;\n\n  const value = getValue(element);\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <TextArea\n        id={ id }\n        label={ label }\n        value={ value }\n        onInput={ setValue }\n        rows={ rows }\n        debounce={ debounce }\n        monospace={ monospace } />\n      { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}"],"file":"TextArea.js"}

package/lib/hooks/index.js

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

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/index.js"],"names":["default","usePrevious"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC","sourcesContent":["export { default as usePrevious } from './usePrevious';"],"file":"index.js"}
+{"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"}

package/lib/hooks/useKeyFactory.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'preact/hooks';
+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}
+ */
+
+export 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;
+}
+//# sourceMappingURL=useKeyFactory.js.map

package/lib/hooks/useKeyFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useKeyFactory.js"],"names":["useMemo","KEY_LENGTH","useKeyFactory","dependencies","map","Map","getKey","el","key","get","Math","random","toString","slice","set"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AAEA,MAAMC,UAAU,GAAG,CAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,aAAT,CAAuBC,YAAY,GAAG,EAAtC,EAA0C;AAC/C,QAAMC,GAAG,GAAGJ,OAAO,CAAC,MAAM,IAAIK,GAAJ,EAAP,EAAkBF,YAAlB,CAAnB;;AAEA,QAAMG,MAAM,GAAGC,EAAE,IAAI;AACnB,QAAIC,GAAG,GAAGJ,GAAG,CAACK,GAAJ,CAAQF,EAAR,CAAV;;AAEA,QAAI,CAACC,GAAL,EAAU;AACRA,MAAAA,GAAG,GAAGE,IAAI,CAACC,MAAL,GAAcC,QAAd,GAAyBC,KAAzB,CAA+B,CAACZ,UAAhC,CAAN;AACAG,MAAAA,GAAG,CAACU,GAAJ,CAAQP,EAAR,EAAYC,GAAZ;AACD;;AAED,WAAOA,GAAP;AACD,GATD;;AAWA,SAAOF,MAAP;AACD","sourcesContent":["import { useMemo } from 'preact/hooks';\n\nconst KEY_LENGTH = 6;\n\n/**\n * Create a persistent key factory for plain objects without id.\n *\n * @example\n * ```jsx\n * function List({ objects }) {\n *   const getKey = useKeyFactory();\n *   return (<ol>{\n *     objects.map(obj => {\n *       const key = getKey(obj);\n *       return <li key={key}>obj.name</li>\n *     })\n *   }</ol>);\n * }\n * ```\n *\n * @param {any[]} dependencies\n * @returns {(element: object) => string}\n */\nexport function useKeyFactory(dependencies = []) {\n  const map = useMemo(() => new Map(), dependencies);\n\n  const getKey = el => {\n    let key = map.get(el);\n\n    if (!key) {\n      key = Math.random().toString().slice(-KEY_LENGTH);\n      map.set(el, key);\n    }\n\n    return key;\n  };\n\n  return getKey;\n}\n"],"file":"useKeyFactory.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/properties-panel",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "description": "Library for creating bpmn-io properties panels.",
   "main": "lib/index.js",
   "files": [
@@ -10,6 +10,7 @@
   "scripts": {
     "all": "run-s lint test",
     "build": "del-cli lib && babel -s -d lib src",
+    "build:watch": "babel -w -s -d lib src",
     "lint": "eslint .",
     "dev": "npm test -- --auto-watch --no-single-run",
     "test": "karma start karma.config.js",
@@ -41,6 +42,7 @@
     "@babel/core": "^7.14.3",
     "@babel/plugin-transform-react-jsx": "^7.14.3",
     "@testing-library/preact": "^2.0.1",
+    "@testing-library/preact-hooks": "^1.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-inline-react-svg": "^2.0.1",
     "chai": "^4.3.4",