@bpmn-io/form-js-viewer 0.10.0-alpha.0 → 0.10.0-alpha.1

package/dist/assets/form-js.css

@@ -274,6 +274,12 @@
   background-color: var(--color-grey-225-10-90);
 }
 
+.fjs-container .fjs-taglist .fjs-taglist-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
 .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
   padding: 2px 6px 2px 8px;
 }
@@ -285,6 +291,8 @@
   text-align: center;
   line-height: 28px;
   background-color: var(--color-grey-225-10-80);
+  border: none;
+  padding: 1px 0;
   color: var(--color-black);
 }
 
@@ -292,14 +300,20 @@
   opacity: 0.6;
 }
 
-.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover {
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
   background-color: var(--color-grey-225-10-75);
 }
 
-.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg {
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
   opacity: 1;
 }
 
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
+  outline: none;
+}
+
 .fjs-container .fjs-taglist .fjs-taglist-input {
   border: none;
   background-color: transparent;
@@ -319,7 +333,8 @@
 .fjs-container .fjs-dropdownlist {
   position: absolute;
   user-select: none;
-  overflow-y: auto;
+  overflow-y: scroll;
+  max-height: 120px;
   scroll-behavior: smooth;
   width: 100%;
   border-radius: 3px;

package/dist/index.cjs

@@ -1898,6 +1898,18 @@ function Taglist(props) {
         break;
     }
   };
+  const onTagRemoveClick = (event, value) => {
+    const {
+      target
+    } = event;
+    deselectValue(value);
+
+    // restore focus if there is no next sibling to focus
+    const nextTag = target.closest('.fjs-taglist-tag').nextSibling;
+    if (!nextTag) {
+      searchbarRef.current.focus();
+    }
+  };
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$3, {
       errors,
@@ -1910,19 +1922,24 @@ function Taglist(props) {
       class: classNames__default['default']('fjs-taglist', {
         'disabled': disabled
       }),
-      children: [!disabled && loadState === LOAD_STATES.LOADED && values.map(v => {
-        return jsxRuntime.jsxs("div", {
-          class: "fjs-taglist-tag",
-          onMouseDown: e => e.preventDefault(),
-          children: [jsxRuntime.jsx("span", {
-            class: "fjs-taglist-tag-label",
-            children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-          }), jsxRuntime.jsx("span", {
-            class: "fjs-taglist-tag-remove",
-            onMouseDown: () => deselectValue(v),
-            children: jsxRuntime.jsx(CloseIcon, {})
-          })]
-        });
+      children: [!disabled && loadState === LOAD_STATES.LOADED && jsxRuntime.jsx("div", {
+        class: "fjs-taglist-tags",
+        children: values.map(v => {
+          return jsxRuntime.jsxs("div", {
+            class: "fjs-taglist-tag",
+            onMouseDown: e => e.preventDefault(),
+            children: [jsxRuntime.jsx("span", {
+              class: "fjs-taglist-tag-label",
+              children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
+            }), jsxRuntime.jsx("button", {
+              type: "button",
+              title: "Remove tag",
+              class: "fjs-taglist-tag-remove",
+              onClick: event => onTagRemoveClick(event, v),
+              children: jsxRuntime.jsx(CloseIcon, {})
+            })]
+          });
+        })
       }), jsxRuntime.jsx("input", {
         disabled: disabled,
         class: "fjs-taglist-input",