@bpmn-io/properties-panel 0.10.2 → 0.11.0

package/CHANGELOG.md

@@ -6,6 +6,14 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.11.0
+
+* `FEAT`: all group and entry components specified as `component` are actual components, not elements ([#134](https://github.com/bpmn-io/properties-panel/pull/134))
+
+### BREAKING CHANGES
+
+* `component` property of an entry must be an actual component, not an element
+
 ## 0.10.2
 
 * `FIX`: add missing aria label for `simple` component ([67f374](https://github.com/bpmn-io/properties-panel/commit/67f37491ab8dc8493c8dd1e749d7418d11825125))

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { isFunction, get, assign, set, sortBy, find, isNumber, debounce } from '
 import classnames from 'classnames';
 import { jsxs, jsx } from '../preact/jsx-runtime';
 import { query } from 'min-dom';
-import { createContext } from '../preact';
+import { createContext, createElement } from '../preact';
 import '../preact/compat';
 
 /**
@@ -221,8 +221,9 @@ DeleteIcon.defaultProps = {
 
 function Group(props) {
   const {
-    id,
+    element,
     entries = [],
+    id,
     label
   } = props;
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
@@ -270,7 +271,16 @@ function Group(props) {
       })]
     }), jsx("div", {
       class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
-      children: entries.map(e => e.component)
+      children: entries.map(entry => {
+        const {
+          component: Component,
+          id
+        } = entry;
+        return createElement(Component, { ...entry,
+          key: id,
+          element: element
+        });
+      })
     })]
   });
 }
@@ -288,7 +298,7 @@ const DEFAULT_LAYOUT = {
 const DEFAULT_DESCRIPTION = {};
 /**
  * @typedef { {
- *    component: import('preact').ComponentChild,
+ *    component: import('preact').Component,
  *    id: String,
  *    isEdited?: Function
  * } } EntryDefinition
@@ -416,13 +426,13 @@ function PropertiesPanel(props) {
           class: "bio-properties-panel-scroll-container",
           children: groups.map(group => {
             const {
-              component: GroupComponent = Group,
+              component: Component = Group,
               id
             } = group;
-            return jsx(GroupComponent, {
-              element: element,
-              ...group
-            }, id);
+            return createElement(Component, { ...group,
+              key: id,
+              element: element
+            });
           })
         })]
       })
@@ -555,11 +565,12 @@ function HeaderButton(props) {
 
 function CollapsibleEntry(props) {
   const {
-    id,
+    element,
     entries = [],
+    id,
     label,
-    remove,
-    open: shouldOpen
+    open: shouldOpen,
+    remove
   } = props;
   const [open, setOpen] = useState(shouldOpen);
 
@@ -591,15 +602,24 @@ function CollapsibleEntry(props) {
       }) : null]
     }), jsx("div", {
       class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
-      children: entries.map(e => e.component)
+      children: entries.map(entry => {
+        const {
+          component: Component,
+          id
+        } = entry;
+        return createElement(Component, { ...entry,
+          key: id,
+          element: element
+        });
+      })
     })]
   });
 }
 
 function ListItem(props) {
   const {
-    autoOpen,
-    autoFocusEntry
+    autoFocusEntry,
+    autoOpen
   } = props; // focus specified entry on auto open
 
   useEffect(() => {
@@ -632,13 +652,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] = useState([]);
@@ -756,11 +776,16 @@ function ListGroup(props) {
           return;
         }
 
-        return jsx(ListItem, {
-          // if item was added, open first or last item based on ordering
-          autoOpen: newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1),
-          ...item
-        }, item.id);
+        const {
+          id
+        } = item;
+        return 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)
+        });
       })
     })]
   });
@@ -883,7 +908,7 @@ function List(props) {
     id,
     element,
     items = [],
-    renderItem,
+    component,
     label = '<empty>',
     open: shouldOpen,
     onAdd,
@@ -953,12 +978,13 @@ function List(props) {
       })]
     }), hasItems && jsx(ItemsList, {
       autoFocusEntry: autoFocusEntry,
+      component: component,
+      element: element,
       id: id,
-      open: open,
       items: sortedItems,
       newItems: newItems,
       onRemove: onRemove,
-      renderItem: renderItem
+      open: open
     })]
   });
 }
@@ -966,12 +992,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];
@@ -998,7 +1025,13 @@ function ItemsList(props) {
       const key = getKey(item);
       return jsxs("li", {
         class: "bio-properties-panel-list-entry-item",
-        children: [renderItem(item, index, item === newItem), onRemove && jsx("button", {
+        children: [jsx(Component, {
+          element: element,
+          id: id,
+          index: index,
+          item: item,
+          open: item === newItem
+        }), onRemove && jsx("button", {
           type: "button",
           title: "Delete item",
           class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",