bpmn-js 11.0.3 → 11.0.5

package/dist/assets/diagram-js.css

@@ -54,8 +54,9 @@
   --palette-background-color: var(--color-grey-225-10-97);
   --palette-border-color: var(--color-grey-225-10-75);
 
+  --popup-font-size: 14px;
   --popup-header-entry-selected-color: var(--color-blue-205-100-50);
-  --popup-header-separator-color: var(--color-grey-225-10-75);
+  --popup-header-font-weight: bolder;
   --popup-background-color: var(--color-white);
   --popup-border-color: var(--color-grey-225-10-75);
   --popup-shadow-color: var(--color-grey-225-10-80);
@@ -536,12 +537,13 @@ marker.djs-dragger tspan {
   box-shadow: 0px 2px 10px var(--popup-shadow-color);
   min-width: 120px;
   outline: none;
+  font-size: var(--popup-font-size);
 }
 
 .djs-popup-search input {
   width: 100%;
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: var(--popup-font-size);
   padding: 3px 6px;
   border-radius: 2px;
   border: solid 1px var(--popup-search-border-color);
@@ -562,7 +564,6 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-header .entry {
-  font-size: 19.5px;
   border-radius: 2px;
 }
 
@@ -579,11 +580,10 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-title {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--popup-font-size);
+  font-weight: var(--popup-header-font-weight);
   flex: 1;
   margin: 0;
-  width: max-content;
 }
 
 .djs-popup-search {
@@ -620,19 +620,26 @@ marker.djs-dragger tspan {
   padding: 5px 7px;
   cursor: default;
   border-radius: 4px;
-  font-size: 14px;
 }
 
 .djs-popup-body .entry-header {
-  font-weight: 500;
+  font-weight: var(--popup-header-font-weight);
   color: var(--popup-entry-title-color);
   padding-left: 0;
 }
 
+.djs-popup [class*="icon"] .djs-popup-label,
+.djs-popup-label:not(:first-child) {
+  margin-left: .5em;
+}
+
+.djs-popup [class*="icon"]:before,
 .djs-popup-entry-icon {
-  width: 16px;
-  margin-right: 0.5rem;
-  margin-bottom: -0.2rem;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  font-size: 1.4em;
+  vertical-align: middle;
 }
 
 .djs-popup-body .entry-header:not(:first-child) {
@@ -666,10 +673,15 @@ marker.djs-dragger tspan {
   color: var(--popup-description-color);
 }
 
-.djs-popup-entry-name,
+.djs-popup-label,
 .djs-popup-entry-description {
   line-height: 1.4em;
-  display: block;
+}
+
+.djs-popup-title,
+.djs-popup-label,
+.djs-popup-entry-description,
+.djs-popup .entry-header {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -686,15 +698,6 @@ marker.djs-dragger tspan {
   overflow: hidden;
 }
 
-.djs-popup-entry-name[class^="bpmn-icon-"]:before,
-.djs-popup-entry-name[class*=" bpmn-icon-"]:before,
-.djs-popup-entry-icon {
-  display: inline-block;
-  font-size: 1.4em;
-  vertical-align: middle;
-  margin-right: 0.5rem;
-}
-
 .djs-popup-body {
   flex-direction: column;
   width: auto;
@@ -711,13 +714,12 @@ marker.djs-dragger tspan {
 
 .djs-popup *::-webkit-scrollbar-track {
   box-shadow: none;
-  background: transparent1;
+  background: transparent;
   margin: 0;
   padding: 5px;
 }
 
 .djs-popup-no-results {
-  font-size: 14px;
   padding: 0 12px 12px 12px;
   color: var(--popup-no-results-color);
 }

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v11.0.3
+ * bpmn-js - bpmn-modeler v11.0.5
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2022-12-05
+ * Date: 2022-12-08
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -28124,14 +28124,11 @@
       onClick
     } = props;
 
-    const createImage = imageUrl => {
-      return m`<img src=${ imageUrl } class="djs-popup-entry-icon" />`;
-    };
-
     return m`
     <li
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
+      title=${ entry.title || entry.label }
       onClick=${ onClick }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
@@ -28139,10 +28136,16 @@
       <div class="djs-popup-entry-content">
         <span
           class=${ clsx('djs-popup-entry-name', entry.className) }
-          title=${ entry.label || entry.name }
         >
-          ${ entry.imageUrl ? createImage(entry.imageUrl) : null }
-          ${ entry.label || entry.name }
+          ${ entry.imageUrl ? m`
+            <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+          ` : null }
+
+          ${ entry.label ? m`
+            <span class="djs-popup-label">
+              ${ entry.label }
+            </span>
+          ` : null }
         </span>
         ${ entry.description && m`
           <span
@@ -28212,7 +28215,7 @@
     <div class="djs-popup-results" ref=${ resultsRef }>
       ${ groups.map(group => m`
         ${ group.name && m`
-          <div key=${ group.id } class="entry-header">
+          <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
@@ -28298,7 +28301,9 @@
       width,
       scale,
       search,
-      entries: originalEntries
+      entries: originalEntries,
+      onOpened,
+      onClosed
     } = props;
 
     const searchable = F(() => {
@@ -28316,6 +28321,14 @@
     const [ entries, setEntries ] = p(originalEntries);
     const [ selectedEntry, setSelectedEntry ] = p(entries[0]);
 
+    h(() => {
+      onOpened();
+
+      return () => {
+        onClosed();
+      };
+    }, []);
+
     const updateEntries = T((newEntries) => {
 
       // select first entry if non is selected
@@ -28338,10 +28351,8 @@
         }
 
         const search = [
-          entry.name,
           entry.description || '',
-          entry.label || '',
-          entry.id || ''
+          entry.label || ''
         ]
           .join('---')
           .toLowerCase();
@@ -28440,18 +28451,23 @@
     >
       ${ displayHeader && m`
         <div class="djs-popup-header">
-          <h3 class="djs-popup-title">${ title }</h3>
+          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
           ${ headerEntries.map(entry => m`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
-              title=${ entry.title }
+              title=${ entry.title || entry.label }
               data-id=${ entry.id }
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
-              ${ entry.imageUrl ? m`<img src=${ entry.imageUrl } />` : null }
-              ${ entry.label ? entry.label : null }
+              ${ entry.imageUrl ? m`
+                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+              ` : null }
+
+              ${ entry.label ? m`
+                <span class="djs-popup-label">${ entry.label }</span>
+              ` : null }
             </span>
           `) }
         </div>
@@ -28671,6 +28687,8 @@
         entries=${ entriesArray }
         headerEntries=${ headerEntriesArray }
         scale=${ scale }
+        onOpened=${ this._onOpened.bind(this) }
+        onClosed=${ this._onClosed.bind(this) }
         ...${{ ...options }}
       />
     `,
@@ -28774,6 +28792,14 @@
     this._eventBus.fire(`popupMenu.${ event }`, payload);
   };
 
+  PopupMenu.prototype._onOpened = function() {
+    this._emit('opened');
+  };
+
+  PopupMenu.prototype._onClosed = function() {
+    this._emit('closed');
+  };
+
   PopupMenu.prototype._createContainer = function(config) {
 
     let parent = config && config.parent || 'body';
@@ -28905,7 +28931,7 @@
    *
    * @example
    * const popupMenuProvider = {
-   *   getPopupMenuEntries: function(element) {
+   *   getPopupMenuEntries(element) {
    *     return {
    *       'entry-1': {
    *         label: 'My Entry',
@@ -28916,6 +28942,22 @@
    * };
    *
    * popupMenu.registerProvider('myMenuID', popupMenuProvider);
+   *
+   * @example
+   * const replacingPopupMenuProvider = {
+   *   getPopupMenuEntries(element) {
+   *     return (entries) => {
+   *       const {
+   *         someEntry,
+   *         ...remainingEntries
+   *       } = entries;
+   *
+   *       return remainingEntries;
+   *     };
+   *   }
+   * };
+   *
+   * popupMenu.registerProvider('myMenuID', replacingPopupMenuProvider);
    */
   PopupMenu.prototype.registerProvider = function(id, priority, provider) {
     if (!provider) {