@bpmn-io/properties-panel 0.10.2 → 0.11.0

package/dist/index.js

@@ -229,8 +229,9 @@ DeleteIcon.defaultProps = {
 
 function Group(props) {
   const {
-    id,
+    element,
     entries = [],
+    id,
     label
   } = props;
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
@@ -278,7 +279,16 @@ function Group(props) {
       })]
     }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-group-entries', open ? 'open' : ''),
-      children: entries.map(e => e.component)
+      children: entries.map(entry => {
+        const {
+          component: Component,
+          id
+        } = entry;
+        return preact.createElement(Component, { ...entry,
+          key: id,
+          element: element
+        });
+      })
     })]
   });
 }
@@ -296,7 +306,7 @@ const DEFAULT_LAYOUT = {
 const DEFAULT_DESCRIPTION = {};
 /**
  * @typedef { {
- *    component: import('preact').ComponentChild,
+ *    component: import('preact').Component,
  *    id: String,
  *    isEdited?: Function
  * } } EntryDefinition
@@ -424,13 +434,13 @@ function PropertiesPanel(props) {
           class: "bio-properties-panel-scroll-container",
           children: groups.map(group => {
             const {
-              component: GroupComponent = Group,
+              component: Component = Group,
               id
             } = group;
-            return jsxRuntime.jsx(GroupComponent, {
-              element: element,
-              ...group
-            }, id);
+            return preact.createElement(Component, { ...group,
+              key: id,
+              element: element
+            });
           })
         })]
       })
@@ -563,11 +573,12 @@ function HeaderButton(props) {
 
 function CollapsibleEntry(props) {
   const {
-    id,
+    element,
     entries = [],
+    id,
     label,
-    remove,
-    open: shouldOpen
+    open: shouldOpen,
+    remove
   } = props;
   const [open, setOpen] = hooks.useState(shouldOpen);
 
@@ -599,15 +610,24 @@ function CollapsibleEntry(props) {
       }) : null]
     }), jsxRuntime.jsx("div", {
       class: classnames__default["default"]('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
-      children: entries.map(e => e.component)
+      children: entries.map(entry => {
+        const {
+          component: Component,
+          id
+        } = entry;
+        return preact.createElement(Component, { ...entry,
+          key: id,
+          element: element
+        });
+      })
     })]
   });
 }
 
 function ListItem(props) {
   const {
-    autoOpen,
-    autoFocusEntry
+    autoFocusEntry,
+    autoOpen
   } = props; // focus specified entry on auto open
 
   hooks.useEffect(() => {
@@ -640,13 +660,13 @@ const noop = () => {};
 
 function ListGroup(props) {
   const {
+    add,
     element,
     id,
     items,
     label,
-    add,
-    shouldSort = true,
-    shouldOpen = true
+    shouldOpen = true,
+    shouldSort = true
   } = props;
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
   const [ordering, setOrdering] = hooks.useState([]);
@@ -764,11 +784,16 @@ function ListGroup(props) {
           return;
         }
 
-        return jsxRuntime.jsx(ListItem, {
-          // if item was added, open first or last item based on ordering
-          autoOpen: newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1),
-          ...item
-        }, item.id);
+        const {
+          id
+        } = item;
+        return preact.createElement(ListItem, { ...item,
+          element: element,
+          index: index,
+          key: id // if item was added, open first or last item based on ordering
+          ,
+          autoOpen: newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1)
+        });
       })
     })]
   });
@@ -891,7 +916,7 @@ function List(props) {
     id,
     element,
     items = [],
-    renderItem,
+    component,
     label = '<empty>',
     open: shouldOpen,
     onAdd,
@@ -961,12 +986,13 @@ function List(props) {
       })]
     }), hasItems && jsxRuntime.jsx(ItemsList, {
       autoFocusEntry: autoFocusEntry,
+      component: component,
+      element: element,
       id: id,
-      open: open,
       items: sortedItems,
       newItems: newItems,
       onRemove: onRemove,
-      renderItem: renderItem
+      open: open
     })]
   });
 }
@@ -974,12 +1000,13 @@ function List(props) {
 function ItemsList(props) {
   const {
     autoFocusEntry,
+    component: Component,
+    element,
     id,
     items,
     newItems,
-    open,
     onRemove,
-    renderItem
+    open
   } = props;
   const getKey = useKeyFactory();
   const newItem = newItems[0];
@@ -1006,7 +1033,13 @@ function ItemsList(props) {
       const key = getKey(item);
       return jsxRuntime.jsxs("li", {
         class: "bio-properties-panel-list-entry-item",
-        children: [renderItem(item, index, item === newItem), onRemove && jsxRuntime.jsx("button", {
+        children: [jsxRuntime.jsx(Component, {
+          element: element,
+          id: id,
+          index: index,
+          item: item,
+          open: item === newItem
+        }), onRemove && jsxRuntime.jsx("button", {
           type: "button",
           title: "Delete item",
           class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",