@bpmn-io/properties-panel 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -6,6 +6,26 @@ 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))
+* `CHORE`: add a11y tests ([0bdd6a](https://github.com/bpmn-io/properties-panel/commit/0bdd6a99a73047e9776da44ff834c524c66b9589) and [a2fc27](https://github.com/bpmn-io/properties-panel/commit/a2fc27530b2b5ec90f5d2e9ee0438a814e0f57e4))
+* `STYLE`: use consistent add/arrow fill color ([272d4b](https://github.com/bpmn-io/properties-panel/commit/272d4be6585ee89c7f7c55c3e2e2346ad92618db))
+
+## 0.10.1
+
+* `FIX`: properly update layout ([#125](https://github.com/bpmn-io/properties-panel/pull/125))
+* `FIX`: delete button now shows on tabbing ([#505](https://github.com/bpmn-io/bpmn-js-properties-panel/issues/505))
+* `FIX`: use POSIX paths when re-exporting preact on Windows ([#127](https://github.com/bpmn-io/properties-panel/issues/127))
+
 ## 0.10.0
 
 * `FEAT`: reexport `preact` used in the package ([#124](https://github.com/bpmn-io/properties-panel/pull/124))

package/assets/properties-panel.css

@@ -46,7 +46,6 @@
   --group-bottom-border-color: var(--color-grey-225-10-75);
 
   --add-entry-fill-color: var(--color-grey-225-10-35);
-  --add-entry-empty-fill-color: var(--color-grey-225-10-75);
   --add-entry-hover-fill-color: var(--color-white);
   --add-entry-hover-background-color: var(--color-blue-205-100-50);
   --add-entry-label-color: var(--color-white);
@@ -56,7 +55,6 @@
 
   --arrow-fill-color: var(--color-grey-225-10-35);
   --arrow-hover-background-color: var(--color-grey-225-10-95);
-  --arrow-empty-fill-color: var(--color-grey-225-10-75);
 
   --dot-color: var(--color-grey-225-10-35);
 
@@ -86,13 +84,12 @@
 
   --list-entry-dot-background-color: var(--color-grey-225-10-35);
   --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
-  --list-entry-add-entry-empty-fill-color: var(--color-white);
   --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
   --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
   --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);
@@ -256,7 +253,6 @@
 }
 
 .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
-  fill: var(--add-entry-empty-fill-color);
   margin-right: 69px;
   padding-left: 6px;
 }
@@ -307,10 +303,6 @@
   transform: rotate(90deg);
 }
 
-.bio-properties-panel-group-header.empty .bio-properties-panel-arrow {
-  fill: var(--arrow-empty-fill-color);
-}
-
 .bio-properties-panel-dot {
   align-self: center;
   height: 8px;
@@ -364,7 +356,7 @@
   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 {
@@ -642,7 +634,9 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
-.bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry {
+.bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
+.bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
+{
   visibility: visible;
 }
 
@@ -797,16 +791,10 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
-  fill: var(--list-entry-add-entry-empty-fill-color);
-  background-color: var(--list-entry-add-entry-empty-background-color);
   margin-right: 16px;
   padding-left: 6px;
 }
 
-.bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry:hover {
-  background-color: var(--list-entry-add-entry-empty-hover-background-color);
-}
-
 .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
   color: var(--list-entry-add-entry-label-color);
   padding: 4px 6px 3px 2px;

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import { useRef, useEffect, useMemo, useContext, useState } from '../preact/hooks';
-import { isFunction, get, set, sortBy, find, isNumber, debounce } from 'min-dash';
+import { isFunction, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
 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
@@ -357,7 +367,7 @@ function PropertiesPanel(props) {
     descriptionLoaded
   } = props; // set-up layout context
 
-  const [layout, setLayout] = useState(createLayoutContext(layoutConfig));
+  const [layout, setLayout] = useState(createLayout(layoutConfig));
   useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
@@ -369,7 +379,9 @@ function PropertiesPanel(props) {
   };
 
   const setLayoutForKey = (key, config) => {
-    setLayout(set(layout, key, config));
+    const newLayout = assign({}, layout);
+    set(newLayout, key, config);
+    setLayout(newLayout);
   };
 
   const layoutContext = {
@@ -414,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
+            });
           })
         })]
       })
@@ -428,7 +440,7 @@ function PropertiesPanel(props) {
   });
 } // helpers //////////////////
 
-function createLayoutContext(overrides) {
+function createLayout(overrides) {
   return { ...DEFAULT_LAYOUT,
     ...overrides
   };
@@ -553,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);
 
@@ -589,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(() => {
@@ -630,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([]);
@@ -754,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)
+        });
       })
     })]
   });
@@ -881,7 +908,7 @@ function List(props) {
     id,
     element,
     items = [],
-    renderItem,
+    component,
     label = '<empty>',
     open: shouldOpen,
     onAdd,
@@ -951,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
     })]
   });
 }
@@ -964,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];
@@ -996,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",
@@ -1277,6 +1312,7 @@ function Simple(props) {
       disabled: disabled,
       class: "bio-properties-panel-input",
       onInput: handleInput,
+      "aria-label": value || '<empty>',
       onFocus: onFocus,
       onBlur: onBlur,
       value: value || ''