@bpmn-io/properties-panel 0.6.1 → 0.9.0

package/CHANGELOG.md

@@ -6,6 +6,29 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.9.0
+
+* `FEAT`: add `DescriptionContext` and `useDescriptionContext` hook ([#122](https://github.com/bpmn-io/properties-panel/pull/122))
+* `FEAT`: add seperate `Description` entry ([#122](https://github.com/bpmn-io/properties-panel/pull/122))
+
+## 0.8.1
+
+* `CHORE`: add outline to checkboxes ([#120](https://github.com/bpmn-io/properties-panel/pull/120))
+* `CHORE`: add missing description styles ([#121](https://github.com/bpmn-io/properties-panel/pull/121))
+
+## 0.8.0
+
+* `FEAT`: allow to disable textarea, select, and checkbox ([#118](https://github.com/bpmn-io/properties-panel/pull/118))
+
+## 0.7.0
+
+* `FEAT`: add dropdown button ([#116](https://github.com/bpmn-io/properties-panel/pull/116))
+* `FEAT`: add header button ([#116](https://github.com/bpmn-io/properties-panel/pull/116))
+
+## 0.6.1
+
+* `FIX`: style disabled inputs ([#115](https://github.com/bpmn-io/properties-panel/pull/115))
+
 ## 0.6.0
 
 * `FEAT`: accept callbacks instead of containers for `add` and `remove` props ([#108](https://github.com/bpmn-io/properties-panel/issues/108))

package/assets/properties-panel.css

@@ -29,7 +29,12 @@
 
   --text-base-color: var(--color-grey-225-10-15);
   --text-error-color: var(--color-red-360-100-45);
+  --link-color: var(--color-blue-205-100-50);
+
   --description-color: var(--color-grey-225-10-35);
+  --description-code-background-color: var(--color-grey-225-10-97);
+  --description-code-border-color: var(--color-grey-225-10-85);
+  --description-list-item-color: var(--color-grey-225-10-35);
 
   --placeholder-color: var(--color-grey-225-10-75);
 
@@ -87,6 +92,10 @@
   --list-entry-add-entry-label-color: var(--color-white);
   --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
   --list-entry-add-entry-fill-color: var(--color-white);
+  
+  --dropdown-item-background-color: var(--color-white);
+  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
+  --dropdown-separator-background-color: var(--color-grey-225-10-75);
 
   --text-size-base: 14px;
   --text-size-small: 13px;
@@ -205,7 +214,6 @@
   font-size: var(--text-size-base);
   height: 32px;
   user-select: none;
-  overflow: hidden;
   justify-content: space-between;
 }
 
@@ -229,7 +237,6 @@
   justify-content: center;
   align-items: center;
   align-self: center;
-  font-size: var(--text-size-small);
   height: 22px;
   line-height: 22px;
   min-width: 22px;
@@ -357,7 +364,10 @@
   margin: 2px 0 1px;
 }
 
-.bio-properties-panel-description {
+.bio-properties-panel-description, 
+.bio-properties-panel-description p,
+.bio-properties-panel-description span,
+.bio-properties-panel-description div {
   color: var(--description-color);
   display: block;
   margin: 2px 0 4px;
@@ -366,6 +376,34 @@
   font-size: var(--text-size-small);
 }
 
+.bio-properties-panel-description code {
+  color: var(--description-color);
+  font-family: var(--font-family);
+  font-size: var(--text-size-small);
+  line-height: var(--line-height-condensed);
+  padding: 0 2px;
+  background-color: var(--description-code-background-color);
+  border: 1px solid var(--description-code-border-color);
+  border-radius: 3px;
+}
+
+.bio-properties-panel-description ul {
+  padding: 0;
+  margin: 0 0 0 12px;
+  list-style-type: disc;
+}
+
+.bio-properties-panel-description li {
+  color: var(--description-list-item-color);
+  margin: 0 0 0 12px;
+}
+
+.bio-properties-panel-description a {
+  color: var(--link-color);
+  font-size: var(--text-size-small);
+  text-decoration: underline;
+}
+
 .bio-properties-panel-input {
   padding: 3px 6px 2px;
   border: 1px solid var(--input-border-color);
@@ -408,6 +446,11 @@ select.bio-properties-panel-input {
   vertical-align: middle;
 }
 
+.bio-properties-panel-input[type="checkbox"]:focus {
+  outline: 1px solid var(--input-focus-border-color);
+  outline-offset: 0;
+}
+
 .bio-properties-panel-checkbox > .bio-properties-panel-label {
   display: inline-block;
   font-size: var(--text-size-base);
@@ -788,3 +831,59 @@ textarea.bio-properties-panel-input {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
+
+.bio-properties-panel-dropdown-button {
+  position: relative;
+
+  --dropdown-button-margin: 5px;
+}
+
+.bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
+  display: none;
+}
+
+.bio-properties-panel-dropdown-button__menu {
+  min-width: calc(100% - var(--dropdown-button-margin) * 2);
+  max-width: 240px;
+
+  position: absolute;
+  top: calc(100% - var(--dropdown-button-margin));
+  right: var(--dropdown-button-margin);
+  z-index: 101;
+
+  background-color: var(--dropdown-item-background-color);
+
+  padding: 8px 0;
+
+  box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
+}
+
+.bio-properties-panel-dropdown-button__menu-item {
+  display: block;
+  width: 100%;
+  padding: 4px 12px;
+
+  font-size: var(--text-size-small);
+  appearance: revert;
+  border: unset;
+  background: unset;
+  text-align: unset;
+}
+
+.bio-properties-panel-dropdown-button__menu-item--separator {
+  width: 100%;
+  height: 1px;
+
+  padding: 0;
+  margin: 8px 0;
+
+  background-color: var(--dropdown-separator-background-color);
+}
+
+.bio-properties-panel-dropdown-button__menu-item--actionable {
+  font-size: var(--text-size-base);
+}
+
+.bio-properties-panel-dropdown-button__menu-item--actionable:hover {
+  background-color: var(--dropdown-item-hover-background-color);
+}

package/lib/PropertiesPanel.js

@@ -3,12 +3,13 @@ import { get, set } from 'min-dash';
 import classnames from 'classnames';
 import Header from './components/Header';
 import Group from './components/Group';
-import { LayoutContext } from './context';
+import { LayoutContext, DescriptionContext } from './context';
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { jsxs as _jsxs } from "preact/jsx-runtime";
 const DEFAULT_LAYOUT = {
   open: true
 };
+const DEFAULT_DESCRIPTION = {};
 /**
  * @typedef { {
  *    component: import('preact').ComponentChild,
@@ -43,6 +44,16 @@ const DEFAULT_LAYOUT = {
  *    label: String
  * } } GroupDefinition
  *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {djs.model.base} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
  */
 
 /**
@@ -55,6 +66,8 @@ const DEFAULT_LAYOUT = {
  * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
  * @param {Object} [props.layoutConfig]
  * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
  */
 
 export default function PropertiesPanel(props) {
@@ -63,8 +76,11 @@ export default function PropertiesPanel(props) {
     headerProvider,
     groups,
     layoutConfig = {},
-    layoutChanged
-  } = props;
+    layoutChanged,
+    descriptionConfig = {},
+    descriptionLoaded
+  } = props; // set-up layout context
+
   const [layout, setLayout] = useState(createLayoutContext(layoutConfig));
   useEffect(() => {
     if (typeof layoutChanged === 'function') {
@@ -85,6 +101,21 @@ export default function PropertiesPanel(props) {
     setLayout,
     getLayoutForKey,
     setLayoutForKey
+  }; // set-up description context
+
+  const description = createDescriptionContext(descriptionConfig);
+
+  if (typeof descriptionLoaded === 'function') {
+    descriptionLoaded(description);
+  }
+
+  const getDescriptionForId = (id, element) => {
+    return description[id] && description[id](element);
+  };
+
+  const descriptionContext = {
+    description,
+    getDescriptionForId
   };
 
   if (!element) {
@@ -94,26 +125,29 @@ export default function PropertiesPanel(props) {
     });
   }
 
-  return _jsx(LayoutContext.Provider, {
-    value: layoutContext,
-    children: _jsxs("div", {
-      class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
-      children: [_jsx(Header, {
-        element: element,
-        headerProvider: headerProvider
-      }), _jsx("div", {
-        class: "bio-properties-panel-scroll-container",
-        children: groups.map(group => {
-          const {
-            component: GroupComponent = Group,
-            id
-          } = group;
-          return _jsx(GroupComponent, {
-            element: element,
-            ...group
-          }, id);
-        })
-      })]
+  return _jsx(DescriptionContext.Provider, {
+    value: descriptionContext,
+    children: _jsx(LayoutContext.Provider, {
+      value: layoutContext,
+      children: _jsxs("div", {
+        class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+        children: [_jsx(Header, {
+          element: element,
+          headerProvider: headerProvider
+        }), _jsx("div", {
+          class: "bio-properties-panel-scroll-container",
+          children: groups.map(group => {
+            const {
+              component: GroupComponent = Group,
+              id
+            } = group;
+            return _jsx(GroupComponent, {
+              element: element,
+              ...group
+            }, id);
+          })
+        })]
+      })
     })
   });
 } // helpers //////////////////
@@ -123,4 +157,10 @@ function createLayoutContext(overrides) {
     ...overrides
   };
 }
+
+function createDescriptionContext(overrides) {
+  return { ...DEFAULT_DESCRIPTION,
+    ...overrides
+  };
+}
 //# sourceMappingURL=PropertiesPanel.js.map

package/lib/PropertiesPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PropertiesPanel.js"],"names":["useState","useEffect","get","set","classnames","Header","Group","LayoutContext","DEFAULT_LAYOUT","open","PropertiesPanel","props","element","headerProvider","groups","layoutConfig","layoutChanged","layout","setLayout","createLayoutContext","getLayoutForKey","key","defaultValue","setLayoutForKey","config","layoutContext","map","group","component","GroupComponent","id","overrides"],"mappings":"AAAA,SACEA,QADF,EAEEC,SAFF,QAGO,cAHP;AAKA,SACEC,GADF,EAEEC,GAFF,QAGO,UAHP;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;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,IAAwBlB,QAAQ,CAACmB,mBAAmB,CAACJ,YAAD,CAApB,CAAtC;AAEAd,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,OAAOe,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,YAAN,KAAuB;AAC7C,WAAOpB,GAAG,CAACe,MAAD,EAASI,GAAT,EAAcC,YAAd,CAAV;AACD,GAFD;;AAIA,QAAMC,eAAe,GAAG,CAACF,GAAD,EAAMG,MAAN,KAAiB;AACvCN,IAAAA,SAAS,CAACf,GAAG,CAACc,MAAD,EAASI,GAAT,EAAcG,MAAd,CAAJ,CAAT;AACD,GAFD;;AAIA,QAAMC,aAAa,GAAG;AACpBR,IAAAA,MADoB;AAEpBC,IAAAA,SAFoB;AAGpBE,IAAAA,eAHoB;AAIpBG,IAAAA;AAJoB,GAAtB;;AAOA,MAAI,CAACX,OAAL,EAAc;AACZ,WAAO;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA;AAAA,MAAP;AACD;;AAED,SAAO,KAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGa,aAAhC;AAAA,cACL;AACE,MAAA,KAAK,EAAGrB,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,CAACY,GAAP,CAAWC,KAAK,IAAI;AAElB,gBAAM;AACJC,YAAAA,SAAS,EAAEC,cAAc,GAAGvB,KADxB;AAEJwB,YAAAA;AAFI,cAGFH,KAHJ;AAKA,iBAAO,KAAC,cAAD;AAEL,YAAA,OAAO,EAAGf,OAFL;AAAA,eAGAe;AAHA,aACCG,EADD,CAAP;AAID,SAXD;AAFJ,QARF;AAAA;AADK,IAAP;AA2BD,C,CAGD;;AAEA,SAASX,mBAAT,CAA6BY,SAA7B,EAAwC;AACtC,SAAO,EACL,GAAGvB,cADE;AAEL,OAAGuB;AAFE,GAAP;AAID","sourcesContent":["import {\n  useState,\n  useEffect\n} from 'preact/hooks';\n\nimport {\n  get,\n  set\n} from 'min-dash';\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: (event: MouseEvent) => void\n * } } ListItemDefinition\n *\n * @typedef { {\n *    add: (event: MouseEvent) => void,\n *    component: import('preact').Component,\n *    element: Object,\n *    id: String,\n *    items: Array<ListItemDefinition>,\n *    label: String,\n *    shouldSort?: Boolean,\n *    shouldOpen?: 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 getLayoutForKey = (key, defaultValue) => {\n    return get(layout, key, defaultValue);\n  };\n\n  const setLayoutForKey = (key, config) => {\n    setLayout(set(layout, key, config));\n  };\n\n  const layoutContext = {\n    layout,\n    setLayout,\n    getLayoutForKey,\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"}
+{"version":3,"sources":["../src/PropertiesPanel.js"],"names":["useState","useEffect","get","set","classnames","Header","Group","LayoutContext","DescriptionContext","DEFAULT_LAYOUT","open","DEFAULT_DESCRIPTION","PropertiesPanel","props","element","headerProvider","groups","layoutConfig","layoutChanged","descriptionConfig","descriptionLoaded","layout","setLayout","createLayoutContext","getLayoutForKey","key","defaultValue","setLayoutForKey","config","layoutContext","description","createDescriptionContext","getDescriptionForId","id","descriptionContext","map","group","component","GroupComponent","overrides"],"mappings":"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","sourcesContent":["import {\n  useState,\n  useEffect\n} from 'preact/hooks';\n\nimport {\n  get,\n  set\n} from 'min-dash';\n\nimport classnames from 'classnames';\n\nimport Header from './components/Header';\n\nimport Group from './components/Group';\n\nimport {\n  LayoutContext,\n  DescriptionContext\n} from './context';\n\nconst DEFAULT_LAYOUT = {\n  open: true\n};\n\nconst DEFAULT_DESCRIPTION = {};\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: (event: MouseEvent) => void\n * } } ListItemDefinition\n *\n * @typedef { {\n *    add: (event: MouseEvent) => void,\n *    component: import('preact').Component,\n *    element: Object,\n *    id: String,\n *    items: Array<ListItemDefinition>,\n *    label: String,\n *    shouldSort?: Boolean,\n *    shouldOpen?: 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 *  @typedef { {\n *    [id: String]: GetDescriptionFunction\n * } } DescriptionConfig\n *\n * @callback { {\n * @param {string} id\n * @param {djs.model.base} element\n * @returns {string}\n * } } GetDescriptionFunction\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 * @param {DescriptionConfig} [props.descriptionConfig]\n * @param {Function} [props.descriptionLoaded]\n */\nexport default function PropertiesPanel(props) {\n  const {\n    element,\n    headerProvider,\n    groups,\n    layoutConfig = {},\n    layoutChanged,\n    descriptionConfig = {},\n    descriptionLoaded\n  } = props;\n\n  // set-up layout context\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 getLayoutForKey = (key, defaultValue) => {\n    return get(layout, key, defaultValue);\n  };\n\n  const setLayoutForKey = (key, config) => {\n    setLayout(set(layout, key, config));\n  };\n\n  const layoutContext = {\n    layout,\n    setLayout,\n    getLayoutForKey,\n    setLayoutForKey\n  };\n\n  // set-up description context\n  const description = createDescriptionContext(descriptionConfig);\n\n  if (typeof descriptionLoaded === 'function') {\n    descriptionLoaded(description);\n  }\n\n  const getDescriptionForId = (id, element) => {\n    return description[id] && description[id](element);\n  };\n\n  const descriptionContext = {\n    description,\n    getDescriptionForId\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 <DescriptionContext.Provider value={ descriptionContext }>\n    <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  </DescriptionContext.Provider>;\n}\n\n\n// helpers //////////////////\n\nfunction createLayoutContext(overrides) {\n  return {\n    ...DEFAULT_LAYOUT,\n    ...overrides\n  };\n}\n\nfunction createDescriptionContext(overrides) {\n  return {\n    ...DEFAULT_DESCRIPTION,\n    ...overrides\n  };\n}\n"],"file":"PropertiesPanel.js"}

package/lib/components/DropdownButton.js

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import classnames from 'classnames';
+/**
+ *
+ * @param {object} props
+ * @param {string} [props.class]
+ * @param {import('preact').Component[]} [props.menuItems]
+ * @returns
+ */
+
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsxs as _jsxs } from "preact/jsx-runtime";
+export function DropdownButton(props) {
+  const {
+    class: className,
+    children,
+    menuItems = []
+  } = props;
+  const dropdownRef = useRef(null);
+  const menuRef = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  const close = () => setOpen(false);
+
+  function onDropdownToggle(event) {
+    if (menuRef.current && menuRef.current.contains(event.target)) {
+      return;
+    }
+
+    event.stopPropagation();
+    setOpen(open => !open);
+  }
+
+  function onActionClick(event, action) {
+    event.stopPropagation();
+    close();
+    action();
+  }
+
+  useGlobalClick([dropdownRef.current], () => close());
+  return _jsxs("div", {
+    class: classnames('bio-properties-panel-dropdown-button', {
+      open
+    }, className),
+    onClick: onDropdownToggle,
+    ref: dropdownRef,
+    children: [children, _jsx("div", {
+      class: "bio-properties-panel-dropdown-button__menu",
+      ref: menuRef,
+      children: menuItems.map((item, index) => _jsx(MenuItem, {
+        onClick: onActionClick,
+        item: item
+      }, index))
+    })]
+  });
+}
+
+function MenuItem({
+  item,
+  onClick
+}) {
+  if (item.separator) {
+    return _jsx("div", {
+      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
+    });
+  }
+
+  if (item.action) {
+    return _jsx("button", {
+      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
+      onClick: event => onClick(event, item.action),
+      children: item.entry
+    });
+  }
+
+  return _jsx("div", {
+    class: "bio-properties-panel-dropdown-button__menu-item",
+    children: item.entry
+  });
+}
+/**
+ *
+ * @param {Array<null | Element>} ignoredElements
+ * @param {Function} callback
+ */
+
+
+function useGlobalClick(ignoredElements, callback) {
+  useEffect(() => {
+    /**
+     * @param {MouseEvent} event
+     */
+    function listener(event) {
+      if (ignoredElements.some(element => element && element.contains(event.target))) {
+        return;
+      }
+
+      callback();
+    }
+
+    document.addEventListener('click', listener, {
+      capture: true
+    });
+    return () => document.removeEventListener('click', listener, {
+      capture: true
+    });
+  }, [...ignoredElements, callback]);
+}
+//# sourceMappingURL=DropdownButton.js.map

package/lib/components/DropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/DropdownButton.js"],"names":["useEffect","useRef","useState","classnames","DropdownButton","props","class","className","children","menuItems","dropdownRef","menuRef","open","setOpen","close","onDropdownToggle","event","current","contains","target","stopPropagation","onActionClick","action","useGlobalClick","map","item","index","MenuItem","onClick","separator","entry","ignoredElements","callback","listener","some","element","document","addEventListener","capture","removeEventListener"],"mappings":"AAAA,SACEA,SADF,EAEEC,MAFF,EAGEC,QAHF,QAIO,cAJP;AAMA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,OAAO,SAASC,cAAT,CAAwBC,KAAxB,EAA+B;AACpC,QAAM;AACJC,IAAAA,KAAK,EAAEC,SADH;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,SAAS,GAAG;AAHR,MAIFJ,KAJJ;AAMA,QAAMK,WAAW,GAAGT,MAAM,CAAC,IAAD,CAA1B;AACA,QAAMU,OAAO,GAAGV,MAAM,CAAC,IAAD,CAAtB;AAEA,QAAM,CAAEW,IAAF,EAAQC,OAAR,IAAoBX,QAAQ,CAAC,KAAD,CAAlC;;AACA,QAAMY,KAAK,GAAG,MAAMD,OAAO,CAAC,KAAD,CAA3B;;AAEA,WAASE,gBAAT,CAA0BC,KAA1B,EAAiC;AAC/B,QAAIL,OAAO,CAACM,OAAR,IAAmBN,OAAO,CAACM,OAAR,CAAgBC,QAAhB,CAAyBF,KAAK,CAACG,MAA/B,CAAvB,EAA+D;AAC7D;AACD;;AAEDH,IAAAA,KAAK,CAACI,eAAN;AAEAP,IAAAA,OAAO,CAACD,IAAI,IAAI,CAACA,IAAV,CAAP;AACD;;AAED,WAASS,aAAT,CAAuBL,KAAvB,EAA8BM,MAA9B,EAAsC;AACpCN,IAAAA,KAAK,CAACI,eAAN;AAEAN,IAAAA,KAAK;AACLQ,IAAAA,MAAM;AACP;;AAEDC,EAAAA,cAAc,CAAC,CAAEb,WAAW,CAACO,OAAd,CAAD,EAA0B,MAAMH,KAAK,EAArC,CAAd;AAEA,SACE;AACE,IAAA,KAAK,EAAGX,UAAU,CAAC,sCAAD,EAAyC;AAAES,MAAAA;AAAF,KAAzC,EAAmDL,SAAnD,CADpB;AAEE,IAAA,OAAO,EAAGQ,gBAFZ;AAGE,IAAA,GAAG,EAAGL,WAHR;AAAA,eAKIF,QALJ,EAME;AAAK,MAAA,KAAK,EAAC,4CAAX;AAAwD,MAAA,GAAG,EAAGG,OAA9D;AAAA,gBACIF,SAAS,CAACe,GAAV,CAAc,CAACC,IAAD,EAAOC,KAAP,KACd,KAAC,QAAD;AAAU,QAAA,OAAO,EAAGL,aAApB;AAAoC,QAAA,IAAI,EAAGI;AAA3C,SAAwDC,KAAxD,CADA;AADJ,MANF;AAAA,IADF;AAcD;;AAED,SAASC,QAAT,CAAkB;AAAEF,EAAAA,IAAF;AAAQG,EAAAA;AAAR,CAAlB,EAAqC;AACnC,MAAIH,IAAI,CAACI,SAAT,EAAoB;AAClB,WAAO;AAAK,MAAA,KAAK,EAAC;AAAX,MAAP;AACD;;AAED,MAAIJ,IAAI,CAACH,MAAT,EAAiB;AACf,WAAQ;AACN,MAAA,KAAK,EAAC,6GADA;AAEN,MAAA,OAAO,EAAGN,KAAK,IAAIY,OAAO,CAACZ,KAAD,EAAQS,IAAI,CAACH,MAAb,CAFpB;AAAA,gBAILG,IAAI,CAACK;AAJA,MAAR;AAMD;;AAED,SAAO;AACL,IAAA,KAAK,EAAC,iDADD;AAAA,cAGJL,IAAI,CAACK;AAHD,IAAP;AAKD;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASP,cAAT,CAAwBQ,eAAxB,EAAyCC,QAAzC,EAAmD;AACjDhC,EAAAA,SAAS,CAAC,MAAM;AAEd;AACJ;AACA;AACI,aAASiC,QAAT,CAAkBjB,KAAlB,EAAyB;AACvB,UAAIe,eAAe,CAACG,IAAhB,CAAqBC,OAAO,IAAIA,OAAO,IAAIA,OAAO,CAACjB,QAAR,CAAiBF,KAAK,CAACG,MAAvB,CAA3C,CAAJ,EAAgF;AAC9E;AACD;;AAEDa,MAAAA,QAAQ;AACT;;AAEDI,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCJ,QAAnC,EAA6C;AAAEK,MAAAA,OAAO,EAAE;AAAX,KAA7C;AAEA,WAAO,MAAMF,QAAQ,CAACG,mBAAT,CAA6B,OAA7B,EAAsCN,QAAtC,EAAgD;AAAEK,MAAAA,OAAO,EAAE;AAAX,KAAhD,CAAb;AACD,GAhBQ,EAgBN,CAAE,GAAGP,eAAL,EAAsBC,QAAtB,CAhBM,CAAT;AAiBD","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\n/**\n *\n * @param {object} props\n * @param {string} [props.class]\n * @param {import('preact').Component[]} [props.menuItems]\n * @returns\n */\nexport function DropdownButton(props) {\n  const {\n    class: className,\n    children,\n    menuItems = []\n  } = props;\n\n  const dropdownRef = useRef(null);\n  const menuRef = useRef(null);\n\n  const [ open, setOpen ] = useState(false);\n  const close = () => setOpen(false);\n\n  function onDropdownToggle(event) {\n    if (menuRef.current && menuRef.current.contains(event.target)) {\n      return;\n    }\n\n    event.stopPropagation();\n\n    setOpen(open => !open);\n  }\n\n  function onActionClick(event, action) {\n    event.stopPropagation();\n\n    close();\n    action();\n  }\n\n  useGlobalClick([ dropdownRef.current ], () => close());\n\n  return (\n    <div\n      class={ classnames('bio-properties-panel-dropdown-button', { open }, className) }\n      onClick={ onDropdownToggle }\n      ref={ dropdownRef }\n    >\n      { children }\n      <div class=\"bio-properties-panel-dropdown-button__menu\" ref={ menuRef }>\n        { menuItems.map((item, index) => (\n          <MenuItem onClick={ onActionClick } item={ item } key={ index } />\n        )) }\n      </div>\n    </div>\n  );\n}\n\nfunction MenuItem({ item, onClick }) {\n  if (item.separator) {\n    return <div class=\"bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator\" />;\n  }\n\n  if (item.action) {\n    return (<button\n      class=\"bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable\"\n      onClick={ event => onClick(event, item.action) }\n    >\n      {item.entry}\n    </button>);\n  }\n\n  return <div\n    class=\"bio-properties-panel-dropdown-button__menu-item\"\n  >\n    {item.entry}\n  </div>;\n}\n\n/**\n *\n * @param {Array<null | Element>} ignoredElements\n * @param {Function} callback\n */\nfunction useGlobalClick(ignoredElements, callback) {\n  useEffect(() => {\n\n    /**\n     * @param {MouseEvent} event\n     */\n    function listener(event) {\n      if (ignoredElements.some(element => element && element.contains(event.target))) {\n        return;\n      }\n\n      callback();\n    }\n\n    document.addEventListener('click', listener, { capture: true });\n\n    return () => document.removeEventListener('click', listener, { capture: true });\n  }, [ ...ignoredElements, callback ]);\n}\n"],"file":"DropdownButton.js"}

package/lib/components/HeaderButton.js

@@ -0,0 +1,16 @@
+import classnames from 'classnames';
+import { jsx as _jsx } from "preact/jsx-runtime";
+export function HeaderButton(props) {
+  const {
+    children = null,
+    class: classname,
+    onClick = () => {},
+    ...otherProps
+  } = props;
+  return _jsx("button", { ...otherProps,
+    onClick: onClick,
+    class: classnames('bio-properties-panel-group-header-button', classname),
+    children: children
+  });
+}
+//# sourceMappingURL=HeaderButton.js.map

package/lib/components/HeaderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/HeaderButton.js"],"names":["classnames","HeaderButton","props","children","class","classname","onClick","otherProps"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,YAAvB;;AAEA,OAAO,SAASC,YAAT,CAAsBC,KAAtB,EAA6B;AAClC,QAAM;AACJC,IAAAA,QAAQ,GAAG,IADP;AAEJC,IAAAA,KAAK,EAAEC,SAFH;AAGJC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAHd;AAIJ,OAAGC;AAJC,MAKFL,KALJ;AAOA,SAAO,oBACAK,UADA;AAEL,IAAA,OAAO,EAAGD,OAFL;AAGL,IAAA,KAAK,EAAGN,UAAU,CAAC,0CAAD,EAA6CK,SAA7C,CAHb;AAAA,cAIHF;AAJG,IAAP;AAMD","sourcesContent":["import classnames from 'classnames';\n\nexport function HeaderButton(props) {\n  const {\n    children = null,\n    class: classname,\n    onClick = () => {},\n    ...otherProps\n  } = props;\n\n  return <button\n    { ...otherProps }\n    onClick={ onClick }\n    class={ classnames('bio-properties-panel-group-header-button', classname) }>\n    { children }\n  </button>;\n}\n"],"file":"HeaderButton.js"}

package/lib/components/entries/Checkbox.js

@@ -1,3 +1,4 @@
+import Description from './Description';
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { jsxs as _jsxs } from "preact/jsx-runtime";
 
@@ -6,6 +7,7 @@ function Checkbox(props) {
     id,
     label,
     onChange,
+    disabled,
     value = false
   } = props;
 
@@ -23,7 +25,8 @@ function Checkbox(props) {
       type: "checkbox",
       class: "bio-properties-panel-input",
       onChange: handleChange,
-      checked: value
+      checked: value,
+      disabled: disabled
     }), _jsx("label", {
       for: prefixId(id),
       class: "bio-properties-panel-label",
@@ -39,6 +42,7 @@ function Checkbox(props) {
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {boolean} [props.disabled]
  */
 
 
@@ -49,7 +53,8 @@ export default function CheckboxEntry(props) {
     description,
     label,
     getValue,
-    setValue
+    setValue,
+    disabled
   } = props;
   const value = getValue(element);
   return _jsxs("div", {
@@ -59,10 +64,12 @@ export default function CheckboxEntry(props) {
       id: id,
       label: label,
       onChange: setValue,
-      value: value
-    }), description && _jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
+      value: value,
+      disabled: disabled
+    }), _jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/Checkbox.js"],"names":["Checkbox","props","id","label","onChange","value","handleChange","target","checked","prefixId","CheckboxEntry","element","description","getValue","setValue","isEdited","node"],"mappings":";;;AAAA,SAASA,QAAT,CAAkBC,KAAlB,EAAyB;AACvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,KAAK,GAAG;AAJJ,MAKFJ,KALJ;;AAOA,QAAMK,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCH,IAAAA,QAAQ,CAACG,MAAM,CAACC,OAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AACE,MAAA,EAAE,EAAGC,QAAQ,CAACP,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,KAAK,EAAC,4BAJR;AAKE,MAAA,QAAQ,EAAGI,YALb;AAME,MAAA,OAAO,EAAGD;AANZ,MADF,EAQE;AAAO,MAAA,GAAG,EAAGI,QAAQ,CAACP,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MARF;AAAA,IADF;AAYD;AAGD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASO,aAAT,CAAuBT,KAAvB,EAA8B;AAC3C,QAAM;AACJU,IAAAA,OADI;AAEJT,IAAAA,EAFI;AAGJU,IAAAA,WAHI;AAIJT,IAAAA,KAJI;AAKJU,IAAAA,QALI;AAMJC,IAAAA;AANI,MAOFb,KAPJ;AASA,QAAMI,KAAK,GAAGQ,QAAQ,CAACF,OAAD,CAAtB;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,gEAAX;AAA4E,qBAAgBT,EAA5F;AAAA,eACE,KAAC,QAAD;AAAU,MAAA,EAAE,EAAGA,EAAf;AAAoB,MAAA,KAAK,EAAGC,KAA5B;AAAoC,MAAA,QAAQ,EAAGW,QAA/C;AAA0D,MAAA,KAAK,EAAGT;AAAlE,MADF,EAEIO,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,CAACR,OAAtB;AACD,C,CAGD;;AAEA,SAASC,QAAT,CAAkBP,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["function Checkbox(props) {\n  const {\n    id,\n    label,\n    onChange,\n    value = false\n  } = props;\n\n  const handleChange = ({ target }) => {\n    onChange(target.checked);\n  };\n\n  return (\n    <div class=\"bio-properties-panel-checkbox\">\n      <input\n        id={ prefixId(id) }\n        name={ id }\n        type=\"checkbox\"\n        class=\"bio-properties-panel-input\"\n        onChange={ handleChange }\n        checked={ value } />\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n    </div>\n  );\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 {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n */\nexport default function CheckboxEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    label,\n    getValue,\n    setValue\n  } = props;\n\n  const value = getValue(element);\n\n  return (\n    <div class=\"bio-properties-panel-entry bio-properties-panel-checkbox-entry\" data-entry-id={ id }>\n      <Checkbox id={ id } label={ label } onChange={ setValue } value={ value } />\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":"Checkbox.js"}
+{"version":3,"sources":["../../../src/components/entries/Checkbox.js"],"names":["Description","Checkbox","props","id","label","onChange","disabled","value","handleChange","target","checked","prefixId","CheckboxEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;;;;AAEA,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AACvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,KAAK,GAAG;AALJ,MAMFL,KANJ;;AAQA,QAAMM,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCJ,IAAAA,QAAQ,CAACI,MAAM,CAACC,OAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AACE,MAAA,EAAE,EAAGC,QAAQ,CAACR,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,KAAK,EAAC,4BAJR;AAKE,MAAA,QAAQ,EAAGK,YALb;AAME,MAAA,OAAO,EAAGD,KANZ;AAOE,MAAA,QAAQ,EAAGD;AAPb,MADF,EASE;AAAO,MAAA,GAAG,EAAGK,QAAQ,CAACR,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MATF;AAAA,IADF;AAaD;AAGD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASQ,aAAT,CAAuBV,KAAvB,EAA8B;AAC3C,QAAM;AACJW,IAAAA,OADI;AAEJV,IAAAA,EAFI;AAGJW,IAAAA,WAHI;AAIJV,IAAAA,KAJI;AAKJW,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJV,IAAAA;AAPI,MAQFJ,KARJ;AAUA,QAAMK,KAAK,GAAGQ,QAAQ,CAACF,OAAD,CAAtB;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,gEAAX;AAA4E,qBAAgBV,EAA5F;AAAA,eACE,KAAC,QAAD;AAAU,MAAA,EAAE,EAAGA,EAAf;AAAoB,MAAA,KAAK,EAAGC,KAA5B;AAAoC,MAAA,QAAQ,EAAGY,QAA/C;AAA0D,MAAA,KAAK,EAAGT,KAAlE;AAA0E,MAAA,QAAQ,EAAGD;AAArF,MADF,EAEE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGH,EAArB;AAA0B,MAAA,OAAO,EAAGU,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAFF;AAAA,IADF;AAMD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACR,OAAtB;AACD,C,CAGD;;AAEA,SAASC,QAAT,CAAkBR,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\nfunction Checkbox(props) {\n  const {\n    id,\n    label,\n    onChange,\n    disabled,\n    value = false\n  } = props;\n\n  const handleChange = ({ target }) => {\n    onChange(target.checked);\n  };\n\n  return (\n    <div class=\"bio-properties-panel-checkbox\">\n      <input\n        id={ prefixId(id) }\n        name={ id }\n        type=\"checkbox\"\n        class=\"bio-properties-panel-input\"\n        onChange={ handleChange }\n        checked={ value }\n        disabled={ disabled } />\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n    </div>\n  );\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 {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {boolean} [props.disabled]\n */\nexport default function CheckboxEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    label,\n    getValue,\n    setValue,\n    disabled\n  } = props;\n\n  const value = getValue(element);\n\n  return (\n    <div class=\"bio-properties-panel-entry bio-properties-panel-checkbox-entry\" data-entry-id={ id }>\n      <Checkbox id={ id } label={ label } onChange={ setValue } value={ value } disabled={ disabled } />\n      <Description forId={ id } element={ element } value={ description } />\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":"Checkbox.js"}

package/lib/components/entries/Description.js

@@ -0,0 +1,26 @@
+import { useDescriptionContext } from '../../hooks';
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.forId - id of the entry the description is used for
+ * @param {String} props.value
+ */
+
+import { jsx as _jsx } from "preact/jsx-runtime";
+export default function Description(props) {
+  const {
+    element,
+    forId,
+    value
+  } = props;
+  const contextDescription = useDescriptionContext(forId, element);
+  const description = value || contextDescription;
+
+  if (description) {
+    return _jsx("div", {
+      class: "bio-properties-panel-description",
+      children: description
+    });
+  }
+}
+//# sourceMappingURL=Description.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/entries/Description.js"],"names":["useDescriptionContext","Description","props","element","forId","value","contextDescription","description"],"mappings":"AAAA,SACEA,qBADF,QAEO,aAFP;AAIA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA4B;AACzC,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA;AAHI,MAIFH,KAJJ;AAMA,QAAMI,kBAAkB,GAAGN,qBAAqB,CAACI,KAAD,EAAQD,OAAR,CAAhD;AAEA,QAAMI,WAAW,GAAGF,KAAK,IAAIC,kBAA7B;;AAEA,MAAIC,WAAJ,EAAiB;AACf,WACE;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBACIA;AADJ,MADF;AAKD;AACF","sourcesContent":["import {\n  useDescriptionContext\n} from '../../hooks';\n\n/**\n * @param {Object} props\n * @param {Object} props.element\n * @param {String} props.forId - id of the entry the description is used for\n * @param {String} props.value\n */\nexport default function Description(props) {\n  const {\n    element,\n    forId,\n    value\n  } = props;\n\n  const contextDescription = useDescriptionContext(forId, element);\n\n  const description = value || contextDescription;\n\n  if (description) {\n    return (\n      <div class=\"bio-properties-panel-description\">\n        { description }\n      </div>\n    );\n  }\n}\n"],"file":"Description.js"}

package/lib/components/entries/NumberField.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'preact/hooks';
+import Description from './Description';
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { jsxs as _jsxs } from "preact/jsx-runtime";
 
@@ -92,9 +93,10 @@ export default function NumberFieldEntry(props) {
       min: min,
       step: step,
       value: value
-    }), description && _jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
+    }), _jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/NumberField.js"],"names":["useMemo","NumberField","props","debounce","disabled","id","label","max","min","onInput","step","value","handleInput","event","validity","target","valid","parseFloat","undefined","prefixId","NumberFieldEntry","description","element","getValue","setValue","isEdited","node"],"mappings":"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","sourcesContent":["import {\n  useMemo\n} from 'preact/hooks';\n\nfunction NumberField(props) {\n\n  const {\n    debounce,\n    disabled,\n    id,\n    label,\n    max,\n    min,\n    onInput,\n    step,\n    value = ''\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(event => {\n\n      const {\n        validity,\n        value\n      } = event.target;\n\n      if (validity.valid) {\n        onInput(value ? parseFloat(value) : undefined);\n      }\n    });\n  }, [ onInput, debounce ]);\n\n  return (\n    <div class=\"bio-properties-panel-numberfield\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <input\n        id={ prefixId(id) }\n        type=\"number\"\n        name={ id }\n        spellCheck=\"false\"\n        autoComplete=\"off\"\n        disabled={ disabled }\n        class=\"bio-properties-panel-input\"\n        max={ max }\n        min={ min }\n        onInput={ handleInput }\n        step={ step }\n        value={ value } />\n    </div>\n  );\n}\n\n/**\n * @param {Object} props\n * @param {Boolean} props.debounce\n * @param {String} props.description\n * @param {Boolean} props.disabled\n * @param {Object} props.element\n * @param {Function} props.getValue\n * @param {String} props.id\n * @param {String} props.label\n * @param {String} props.max\n * @param {String} props.min\n * @param {Function} props.setValue\n * @param {String} props.step\n */\nexport default function NumberFieldEntry(props) {\n  const {\n    debounce,\n    description,\n    disabled,\n    element,\n    getValue,\n    id,\n    label,\n    max,\n    min,\n    setValue,\n    step\n  } = props;\n\n  const value = getValue(element);\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <NumberField\n        debounce={ debounce }\n        disabled={ disabled }\n        id={ id }\n        label={ label }\n        onInput={ setValue }\n        max={ max }\n        min={ min }\n        step={ step }\n        value={ value } />\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":"NumberField.js"}
+{"version":3,"sources":["../../../src/components/entries/NumberField.js"],"names":["useMemo","Description","NumberField","props","debounce","disabled","id","label","max","min","onInput","step","value","handleInput","event","validity","target","valid","parseFloat","undefined","prefixId","NumberFieldEntry","description","element","getValue","setValue","isEdited","node"],"mappings":"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","sourcesContent":["import {\n  useMemo\n} from 'preact/hooks';\n\nimport Description from './Description';\n\nfunction NumberField(props) {\n\n  const {\n    debounce,\n    disabled,\n    id,\n    label,\n    max,\n    min,\n    onInput,\n    step,\n    value = ''\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(event => {\n\n      const {\n        validity,\n        value\n      } = event.target;\n\n      if (validity.valid) {\n        onInput(value ? parseFloat(value) : undefined);\n      }\n    });\n  }, [ onInput, debounce ]);\n\n  return (\n    <div class=\"bio-properties-panel-numberfield\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <input\n        id={ prefixId(id) }\n        type=\"number\"\n        name={ id }\n        spellCheck=\"false\"\n        autoComplete=\"off\"\n        disabled={ disabled }\n        class=\"bio-properties-panel-input\"\n        max={ max }\n        min={ min }\n        onInput={ handleInput }\n        step={ step }\n        value={ value } />\n    </div>\n  );\n}\n\n/**\n * @param {Object} props\n * @param {Boolean} props.debounce\n * @param {String} props.description\n * @param {Boolean} props.disabled\n * @param {Object} props.element\n * @param {Function} props.getValue\n * @param {String} props.id\n * @param {String} props.label\n * @param {String} props.max\n * @param {String} props.min\n * @param {Function} props.setValue\n * @param {String} props.step\n */\nexport default function NumberFieldEntry(props) {\n  const {\n    debounce,\n    description,\n    disabled,\n    element,\n    getValue,\n    id,\n    label,\n    max,\n    min,\n    setValue,\n    step\n  } = props;\n\n  const value = getValue(element);\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <NumberField\n        debounce={ debounce }\n        disabled={ disabled }\n        id={ id }\n        label={ label }\n        onInput={ setValue }\n        max={ max }\n        min={ min }\n        step={ step }\n        value={ value } />\n      <Description forId={ id } element={ element } value={ description } />\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":"NumberField.js"}

package/lib/components/entries/Select.js

@@ -1,27 +1,31 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { jsxs as _jsxs } from "preact/jsx-runtime";
-
+import Description from './Description';
 /**
- * @typedef { { value: String, label: String } } Option
+ * @typedef { { value: string, label: string, disabled: boolean } } Option
  */
 
 /**
  * Provides basic select input.
  *
- * @param {Object} props
- * @param {String} props.id
- * @param {String} props.label
+ * @param {object} props
+ * @param {string} props.id
+ * @param {string} props.label
  * @param {Function} props.onChange
  * @param {Array<Option>} [props.options]
- * @param {String} props.value
+ * @param {string} props.value
+ * @param {boolean} [props.disabled]
  */
+
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsxs as _jsxs } from "preact/jsx-runtime";
+
 function Select(props) {
   const {
     id,
     label,
     onChange,
     options = [],
-    value
+    value,
+    disabled
   } = props;
 
   const handleChange = ({
@@ -42,6 +46,7 @@ function Select(props) {
       class: "bio-properties-panel-input",
       onInput: handleChange,
       value: value,
+      disabled: disabled,
       children: options.map((option, idx) => {
         return _jsx("option", {
           value: option.value,
@@ -53,14 +58,15 @@ function Select(props) {
   });
 }
 /**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} [props.description]
- * @param {String} props.label
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
  * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
  */
 
 
@@ -72,7 +78,8 @@ export default function SelectEntry(props) {
     label,
     getValue,
     setValue,
-    getOptions
+    getOptions,
+    disabled
   } = props;
   const value = getValue(element);
   const options = getOptions(element);
@@ -84,10 +91,12 @@ export default function SelectEntry(props) {
       label: label,
       value: value,
       onChange: setValue,
-      options: options
-    }), description && _jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
+      options: options,
+      disabled: disabled
+    }), _jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/Select.js"],"names":["Select","props","id","label","onChange","options","value","handleChange","target","prefixId","map","option","idx","disabled","SelectEntry","element","description","getValue","setValue","getOptions","isEdited","node"],"mappings":";;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,MAAT,CAAgBC,KAAhB,EAAuB;AACrB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,OAAO,GAAG,EAJN;AAKJC,IAAAA;AALI,MAMFL,KANJ;;AAQA,QAAMM,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCJ,IAAAA,QAAQ,CAACI,MAAM,CAACF,KAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,6BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGG,QAAQ,CAACP,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AAAQ,MAAA,EAAE,EAAGM,QAAQ,CAACP,EAAD,CAArB;AAA4B,MAAA,IAAI,EAAGA,EAAnC;AAAwC,MAAA,KAAK,EAAC,4BAA9C;AAA2E,MAAA,OAAO,EAAGK,YAArF;AAAoG,MAAA,KAAK,EAAGD,KAA5G;AAAA,gBAEID,OAAO,CAACK,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAC3B,eACE;AAEE,UAAA,KAAK,EAAGD,MAAM,CAACL,KAFjB;AAGE,UAAA,QAAQ,EAAGK,MAAM,CAACE,QAHpB;AAAA,oBAIIF,MAAM,CAACR;AAJX,WACQS,GADR,CADF;AAQD,OATD;AAFJ,MAFF;AAAA,IADF;AAmBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASE,WAAT,CAAqBb,KAArB,EAA4B;AACzC,QAAM;AACJc,IAAAA,OADI;AAEJb,IAAAA,EAFI;AAGJc,IAAAA,WAHI;AAIJb,IAAAA,KAJI;AAKJc,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJC,IAAAA;AAPI,MAQFlB,KARJ;AAUA,QAAMK,KAAK,GAAGW,QAAQ,CAACF,OAAD,CAAtB;AACA,QAAMV,OAAO,GAAGc,UAAU,CAACJ,OAAD,CAA1B;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBb,EAAxD;AAAA,eACE,KAAC,MAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGG,KAHV;AAIE,MAAA,QAAQ,EAAGY,QAJb;AAKE,MAAA,OAAO,EAAGb;AALZ,MADF,EAOIW,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MAPnB;AAAA,IADF;AAWD;AAED,OAAO,SAASI,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACf,KAAtB;AACD,C,CAED;;AAEA,SAASG,QAAT,CAAkBP,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["/**\n * @typedef { { value: String, label: String } } Option\n */\n\n/**\n * Provides basic select input.\n *\n * @param {Object} props\n * @param {String} props.id\n * @param {String} props.label\n * @param {Function} props.onChange\n * @param {Array<Option>} [props.options]\n * @param {String} props.value\n */\nfunction Select(props) {\n  const {\n    id,\n    label,\n    onChange,\n    options = [],\n    value\n  } = props;\n\n  const handleChange = ({ target }) => {\n    onChange(target.value);\n  };\n\n  return (\n    <div class=\"bio-properties-panel-select\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <select id={ prefixId(id) } name={ id } class=\"bio-properties-panel-input\" onInput={ handleChange } value={ value }>\n        {\n          options.map((option, idx) => {\n            return (\n              <option\n                key={ idx }\n                value={ option.value }\n                disabled={ option.disabled }>\n                { option.label }\n              </option>\n            );\n          })\n        }\n      </select>\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 {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Function} props.getOptions\n */\nexport default function SelectEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    label,\n    getValue,\n    setValue,\n    getOptions\n  } = props;\n\n  const value = getValue(element);\n  const options = getOptions(element);\n\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <Select\n        id={ id }\n        label={ label }\n        value={ value }\n        onChange={ setValue }\n        options={ options } />\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// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"Select.js"}
+{"version":3,"sources":["../../../src/components/entries/Select.js"],"names":["Description","Select","props","id","label","onChange","options","value","disabled","handleChange","target","prefixId","map","option","idx","SelectEntry","element","description","getValue","setValue","getOptions","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AACrB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,OAAO,GAAG,EAJN;AAKJC,IAAAA,KALI;AAMJC,IAAAA;AANI,MAOFN,KAPJ;;AASA,QAAMO,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCL,IAAAA,QAAQ,CAACK,MAAM,CAACH,KAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,6BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGI,QAAQ,CAACR,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGO,QAAQ,CAACR,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,KAAK,EAAC,4BAHR;AAIE,MAAA,OAAO,EAAGM,YAJZ;AAKE,MAAA,KAAK,EAAGF,KALV;AAME,MAAA,QAAQ,EAAGC,QANb;AAAA,gBASIF,OAAO,CAACM,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAC3B,eACE;AAEE,UAAA,KAAK,EAAGD,MAAM,CAACN,KAFjB;AAGE,UAAA,QAAQ,EAAGM,MAAM,CAACL,QAHpB;AAAA,oBAIIK,MAAM,CAACT;AAJX,WACQU,GADR,CADF;AAQD,OATD;AATJ,MAFF;AAAA,IADF;AA0BD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,WAAT,CAAqBb,KAArB,EAA4B;AACzC,QAAM;AACJc,IAAAA,OADI;AAEJb,IAAAA,EAFI;AAGJc,IAAAA,WAHI;AAIJb,IAAAA,KAJI;AAKJc,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJC,IAAAA,UAPI;AAQJZ,IAAAA;AARI,MASFN,KATJ;AAWA,QAAMK,KAAK,GAAGW,QAAQ,CAACF,OAAD,CAAtB;AACA,QAAMV,OAAO,GAAGc,UAAU,CAACJ,OAAD,CAA1B;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBb,EAAxD;AAAA,eACE,KAAC,MAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGG,KAHV;AAIE,MAAA,QAAQ,EAAGY,QAJb;AAKE,MAAA,OAAO,EAAGb,OALZ;AAME,MAAA,QAAQ,EAAGE;AANb,MADF,EAQE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGL,EAArB;AAA0B,MAAA,OAAO,EAAGa,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MARF;AAAA,IADF;AAYD;AAED,OAAO,SAASI,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACf,KAAtB;AACD,C,CAED;;AAEA,SAASI,QAAT,CAAkBR,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\n/**\n * @typedef { { value: string, label: string, disabled: boolean } } Option\n */\n\n/**\n * Provides basic select input.\n *\n * @param {object} props\n * @param {string} props.id\n * @param {string} props.label\n * @param {Function} props.onChange\n * @param {Array<Option>} [props.options]\n * @param {string} props.value\n * @param {boolean} [props.disabled]\n */\nfunction Select(props) {\n  const {\n    id,\n    label,\n    onChange,\n    options = [],\n    value,\n    disabled\n  } = props;\n\n  const handleChange = ({ target }) => {\n    onChange(target.value);\n  };\n\n  return (\n    <div class=\"bio-properties-panel-select\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <select\n        id={ prefixId(id) }\n        name={ id }\n        class=\"bio-properties-panel-input\"\n        onInput={ handleChange }\n        value={ value }\n        disabled={ disabled }\n      >\n        {\n          options.map((option, idx) => {\n            return (\n              <option\n                key={ idx }\n                value={ option.value }\n                disabled={ option.disabled }>\n                { option.label }\n              </option>\n            );\n          })\n        }\n      </select>\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 {string} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Function} props.getOptions\n * @param {boolean} [props.disabled]\n */\nexport default function SelectEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    label,\n    getValue,\n    setValue,\n    getOptions,\n    disabled\n  } = props;\n\n  const value = getValue(element);\n  const options = getOptions(element);\n\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <Select\n        id={ id }\n        label={ label }\n        value={ value }\n        onChange={ setValue }\n        options={ options }\n        disabled={ disabled } />\n      <Description forId={ id } element={ element } value={ description } />\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"Select.js"}

package/lib/components/entries/TextArea.js

@@ -1,3 +1,4 @@
+import Description from './Description';
 import { useMemo } from 'preact/hooks';
 import classnames from 'classnames';
 import { jsx as _jsx } from "preact/jsx-runtime";
@@ -11,6 +12,7 @@ function TextArea(props) {
     debounce,
     onInput,
     value = '',
+    disabled,
     monospace
   } = props;
   const handleInput = useMemo(() => {
@@ -33,21 +35,23 @@ function TextArea(props) {
       onFocus: props.onFocus,
       onBlur: props.onBlur,
       rows: rows,
-      value: value
+      value: value,
+      disabled: disabled
     })]
   });
 }
 /**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {String} props.label
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
- * @param {Number} props.rows
- * @param {Boolean} props.monospace
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {boolean} [props.disabled]
  */
 
 
@@ -61,7 +65,8 @@ export default function TextAreaEntry(props) {
     getValue,
     setValue,
     rows,
-    monospace
+    monospace,
+    disabled
   } = props;
   const value = getValue(element);
   return _jsxs("div", {
@@ -74,10 +79,12 @@ export default function TextAreaEntry(props) {
       onInput: setValue,
       rows: rows,
       debounce: debounce,
-      monospace: monospace
-    }), description && _jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
+      monospace: monospace,
+      disabled: disabled
+    }), _jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
     })]
   });
 }

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../../../src/components/entries/TextArea.js"],"names":["Description","useMemo","classnames","TextArea","props","id","label","rows","debounce","onInput","value","disabled","monospace","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextAreaEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;AAEA,SACEC,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,QAPI;AAQJC,IAAAA;AARI,MASFR,KATJ;AAWA,QAAMS,WAAW,GAAGZ,OAAO,CAAC,MAAM;AAChC,WAAOO,QAAQ,CAAC,CAAC;AAAEM,MAAAA;AAAF,KAAD,KAAgBL,OAAO,CAACK,MAAM,CAACJ,KAAP,CAAaK,MAAb,GAAsBD,MAAM,CAACJ,KAA7B,GAAqCM,SAAtC,CAAxB,CAAf;AACD,GAF0B,EAExB,CAAEP,OAAF,EAAWD,QAAX,CAFwB,CAA3B;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGS,QAAQ,CAACZ,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGW,QAAQ,CAACZ,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,UAAU,EAAC,OAHb;AAIE,MAAA,KAAK,EAAGH,UAAU,CAChB,4BADgB,EAEhBU,SAAS,GAAG,sCAAH,GAA4C,EAFrC,CAJpB;AAQE,MAAA,OAAO,EAAGC,WARZ;AASE,MAAA,OAAO,EAAGT,KAAK,CAACc,OATlB;AAUE,MAAA,MAAM,EAAGd,KAAK,CAACe,MAVjB;AAWE,MAAA,IAAI,EAAGZ,IAXT;AAYE,MAAA,KAAK,EAAGG,KAZV;AAaE,MAAA,QAAQ,EAAGC;AAbb,MAFF;AAAA,IADF;AAmBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASS,aAAT,CAAuBhB,KAAvB,EAA8B;AAC3C,QAAM;AACJiB,IAAAA,OADI;AAEJhB,IAAAA,EAFI;AAGJiB,IAAAA,WAHI;AAIJd,IAAAA,QAJI;AAKJF,IAAAA,KALI;AAMJiB,IAAAA,QANI;AAOJC,IAAAA,QAPI;AAQJjB,IAAAA,IARI;AASJK,IAAAA,SATI;AAUJD,IAAAA;AAVI,MAWFP,KAXJ;AAaA,QAAMM,KAAK,GAAGa,QAAQ,CAACF,OAAD,CAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBhB,EAAxD;AAAA,eACE,KAAC,QAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGI,KAHV;AAIE,MAAA,OAAO,EAAGc,QAJZ;AAKE,MAAA,IAAI,EAAGjB,IALT;AAME,MAAA,QAAQ,EAAGC,QANb;AAOE,MAAA,SAAS,EAAGI,SAPd;AAQE,MAAA,QAAQ,EAAGD;AARb,MADF,EAUE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGN,EAArB;AAA0B,MAAA,OAAO,EAAGgB,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAVF;AAAA,IADF;AAcD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAAChB,KAAtB;AACD,C,CAGD;;AAEA,SAASO,QAAT,CAAkBZ,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\nimport {\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    disabled,\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        disabled={ disabled } />\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 * @param {boolean} [props.disabled]\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    disabled\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        disabled={ disabled } />\n      <Description forId={ id } element={ element } value={ description } />\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":"TextArea.js"}

package/lib/components/entries/TextField.js

@@ -1,3 +1,4 @@
+import Description from './Description';
 import { useEffect, useMemo, useState } from 'preact/hooks';
 import classnames from 'classnames';
 import { usePrevious } from '../../hooks';
@@ -102,9 +103,10 @@ export default function TextfieldEntry(props) {
       onInput: handleChange,
       debounce: debounce,
       disabled: disabled
-    }), description && _jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
+    }), _jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
     }), error && _jsx("div", {
       class: "bio-properties-panel-error",
       children: error

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/entries/TextField.js"],"names":["useEffect","useMemo","useState","classnames","usePrevious","Textfield","props","debounce","disabled","id","label","onInput","value","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextfieldEntry","element","description","getValue","setValue","validate","error","setError","invalidValueCache","setInvalidValueCache","prevValue","err","handleChange","newValue","isEdited","node"],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useMemo,\n  useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  usePrevious\n} from '../../hooks';\n\n\nfunction Textfield(props) {\n\n  const {\n    debounce,\n    disabled = false,\n    id,\n    label,\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-textfield\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\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={ props.onFocus }\n        onBlur={ props.onBlur }\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 {Boolean} props.disabled\n * @param {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Function} props.validate\n */\nexport default function TextfieldEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    debounce,\n    disabled,\n    label,\n    getValue,\n    setValue,\n    validate\n  } = props;\n\n  const [ error, setError ] = useState(null);\n  const [ invalidValueCache, setInvalidValueCache ] = useState(null);\n\n  let value = getValue(element);\n  const prevValue = usePrevious(value);\n\n  // validate again when value prop changed\n  useEffect(() => {\n    const err = validate ? validate(value) : null;\n    setError(err);\n  }, [ value ]);\n\n  // validate on change\n  const handleChange = (newValue) => {\n    const err = validate ? validate(newValue) : null;\n\n    if (err) {\n      setInvalidValueCache(newValue);\n    } else {\n      setValue(newValue);\n    }\n\n    setError(err);\n  };\n\n  // keep showing invalid value on errors, although it was not set\n  if (prevValue === value && error) {\n    value = invalidValueCache;\n  }\n\n  return (\n    <div class={ classnames(\n      'bio-properties-panel-entry',\n      error ? 'has-error' : '')\n    } data-entry-id={ id }>\n      <Textfield id={ id } label={ label } value={ value } onInput={ handleChange } debounce={ debounce } disabled={ disabled } />\n      { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n      { error && <div class=\"bio-properties-panel-error\">{ error }</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}\n"],"file":"TextField.js"}
+{"version":3,"sources":["../../../src/components/entries/TextField.js"],"names":["Description","useEffect","useMemo","useState","classnames","usePrevious","Textfield","props","debounce","disabled","id","label","onInput","value","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextfieldEntry","element","description","getValue","setValue","validate","error","setError","invalidValueCache","setInvalidValueCache","prevValue","err","handleChange","newValue","isEdited","node"],"mappings":"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","sourcesContent":["import Description from './Description';\n\nimport {\n  useEffect,\n  useMemo,\n  useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  usePrevious\n} from '../../hooks';\n\n\nfunction Textfield(props) {\n\n  const {\n    debounce,\n    disabled = false,\n    id,\n    label,\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-textfield\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\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={ props.onFocus }\n        onBlur={ props.onBlur }\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 {Boolean} props.disabled\n * @param {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Function} props.validate\n */\nexport default function TextfieldEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    debounce,\n    disabled,\n    label,\n    getValue,\n    setValue,\n    validate\n  } = props;\n\n  const [ error, setError ] = useState(null);\n  const [ invalidValueCache, setInvalidValueCache ] = useState(null);\n\n  let value = getValue(element);\n  const prevValue = usePrevious(value);\n\n  // validate again when value prop changed\n  useEffect(() => {\n    const err = validate ? validate(value) : null;\n    setError(err);\n  }, [ value ]);\n\n  // validate on change\n  const handleChange = (newValue) => {\n    const err = validate ? validate(newValue) : null;\n\n    if (err) {\n      setInvalidValueCache(newValue);\n    } else {\n      setValue(newValue);\n    }\n\n    setError(err);\n  };\n\n  // keep showing invalid value on errors, although it was not set\n  if (prevValue === value && error) {\n    value = invalidValueCache;\n  }\n\n  return (\n    <div class={ classnames(\n      'bio-properties-panel-entry',\n      error ? 'has-error' : '')\n    } data-entry-id={ id }>\n      <Textfield id={ id } label={ label } value={ value } onInput={ handleChange } debounce={ debounce } disabled={ disabled } />\n      <Description forId={ id } element={ element } value={ description } />\n      { error && <div class=\"bio-properties-panel-error\">{ error }</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}\n"],"file":"TextField.js"}

package/lib/components/entries/ToggleSwitch.js

@@ -1,3 +1,4 @@
+import Description from './Description';
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { jsxs as _jsxs } from "preact/jsx-runtime";
 
@@ -43,6 +44,7 @@ function ToggleSwitch(props) {
 }
 /**
  * @param {Object} props
+ * @param {Object} props.element
  * @param {String} props.id
  * @param {String} props.description
  * @param {String} props.label
@@ -54,6 +56,7 @@ function ToggleSwitch(props) {
 
 export default function ToggleSwitchEntry(props) {
   const {
+    element,
     id,
     description,
     label,
@@ -61,7 +64,7 @@ export default function ToggleSwitchEntry(props) {
     getValue,
     setValue
   } = props;
-  const value = getValue();
+  const value = getValue(element);
   return _jsxs("div", {
     class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
     "data-entry-id": id,
@@ -71,9 +74,10 @@ export default function ToggleSwitchEntry(props) {
       value: value,
       onInput: setValue,
       switcherLabel: switcherLabel
-    }), description && _jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
+    }), _jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
     })]
   });
 }

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,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"}
+{"version":3,"sources":["../../../src/components/entries/ToggleSwitch.js"],"names":["Description","ToggleSwitch","props","id","label","onInput","value","switcherLabel","handleInput","prefixId","ToggleSwitchEntry","element","description","getValue","setValue","isEdited","node","checked"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;;;;AAEA,SAASC,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;;;AACA,eAAe,SAASG,iBAAT,CAA2BR,KAA3B,EAAkC;AAC/C,QAAM;AACJS,IAAAA,OADI;AAEJR,IAAAA,EAFI;AAGJS,IAAAA,WAHI;AAIJR,IAAAA,KAJI;AAKJG,IAAAA,aALI;AAMJM,IAAAA,QANI;AAOJC,IAAAA;AAPI,MAQFZ,KARJ;AAUA,QAAMI,KAAK,GAAGO,QAAQ,CAACF,OAAD,CAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,qEAAX;AAAiF,qBAAgBR,EAAjG;AAAA,eACE,KAAC,YAAD;AAAc,MAAA,EAAE,EAAGA,EAAnB;AAAwB,MAAA,KAAK,EAAGC,KAAhC;AAAwC,MAAA,KAAK,EAAGE,KAAhD;AAAwD,MAAA,OAAO,EAAGQ,QAAlE;AAA6E,MAAA,aAAa,EAAGP;AAA7F,MADF,EAEE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGJ,EAArB;AAA0B,MAAA,OAAO,EAAGQ,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAFF;AAAA,IADF;AAMD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACC,OAAtB;AACD,C,CAGD;;AAEA,SAASR,QAAT,CAAkBN,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\nfunction 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 {Object} props.element\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    element,\n    id,\n    description,\n    label,\n    switcherLabel,\n    getValue,\n    setValue\n  } = props;\n\n  const value = getValue(element);\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 forId={ id } element={ element } value={ description } />\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/context/DescriptionContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'preact';
+const DescriptionContext = createContext({
+  description: {},
+  getDescriptionForId: () => {}
+});
+export default DescriptionContext;
+//# sourceMappingURL=DescriptionContext.js.map

package/lib/context/DescriptionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/DescriptionContext.js"],"names":["createContext","DescriptionContext","description","getDescriptionForId"],"mappings":"AAAA,SACEA,aADF,QAEO,QAFP;AAIA,MAAMC,kBAAkB,GAAGD,aAAa,CAAC;AACvCE,EAAAA,WAAW,EAAE,EAD0B;AAEvCC,EAAAA,mBAAmB,EAAE,MAAM,CAAE;AAFU,CAAD,CAAxC;AAKA,eAAeF,kBAAf","sourcesContent":["import {\n  createContext\n} from 'preact';\n\nconst DescriptionContext = createContext({\n  description: {},\n  getDescriptionForId: () => {}\n});\n\nexport default DescriptionContext;\n"],"file":"DescriptionContext.js"}

package/lib/context/index.js

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

package/lib/context/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/index.js"],"names":["default","LayoutContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as LayoutContext } from './LayoutContext';"],"file":"index.js"}
+{"version":3,"sources":["../../src/context/index.js"],"names":["default","DescriptionContext","LayoutContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,sBAA9C;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as DescriptionContext } from './DescriptionContext';\nexport { default as LayoutContext } from './LayoutContext';\n"],"file":"index.js"}

package/lib/hooks/index.js

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

package/lib/hooks/index.js.map

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

package/lib/hooks/useDescriptionContext.js

@@ -0,0 +1,25 @@
+import { useContext } from 'preact/hooks';
+import { DescriptionContext } from '../context';
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {djs.model.Base} element
+ *
+ * @returns {string}
+ */
+
+export function useDescriptionContext(id, element) {
+  const {
+    getDescriptionForId
+  } = useContext(DescriptionContext);
+  return getDescriptionForId(id, element);
+}
+//# sourceMappingURL=useDescriptionContext.js.map

package/lib/hooks/useDescriptionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useDescriptionContext.js"],"names":["useContext","DescriptionContext","useDescriptionContext","id","element","getDescriptionForId"],"mappings":"AAAA,SACEA,UADF,QAEO,cAFP;AAIA,SACEC,kBADF,QAEO,YAFP;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,qBAAT,CAA+BC,EAA/B,EAAmCC,OAAnC,EAA4C;AACjD,QAAM;AACJC,IAAAA;AADI,MAEFL,UAAU,CAACC,kBAAD,CAFd;AAIA,SAAOI,mBAAmB,CAACF,EAAD,EAAKC,OAAL,CAA1B;AACD","sourcesContent":["import {\n  useContext\n} from 'preact/hooks';\n\nimport {\n  DescriptionContext\n} from '../context';\n\n/**\n * Accesses the global DescriptionContext and returns a description for a given id and element.\n *\n * @example\n * ```jsx\n * function TextField(props) {\n *   const description = useDescriptionContext('input1', element);\n * }\n * ```\n *\n * @param {string} id\n * @param {djs.model.Base} element\n *\n * @returns {string}\n */\nexport function useDescriptionContext(id, element) {\n  const {\n    getDescriptionForId\n  } = useContext(DescriptionContext);\n\n  return getDescriptionForId(id, element);\n}\n"],"file":"useDescriptionContext.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/properties-panel",
-  "version": "0.6.1",
+  "version": "0.9.0",
   "description": "Library for creating bpmn-io properties panels.",
   "main": "lib/index.js",
   "files": [