camunda-bpmn-js 4.6.2 → 4.7.0

package/dist/assets/diagram-js.css

@@ -59,6 +59,7 @@
   --popup-font-size: 14px;
   --popup-header-entry-selected-color: var(--color-blue-205-100-50);
   --popup-header-font-weight: bolder;
+  --popup-header-group-divider-color: var(--color-grey-225-10-75);
   --popup-background-color: var(--color-white);
   --popup-border-color: transparent;
   --popup-shadow-color: var(--color-black-opacity-30);
@@ -568,6 +569,29 @@ marker.djs-dragger tspan {
   color: inherit;
 }
 
+.djs-popup-header-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.djs-popup-header-group .entry {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.djs-popup-header-group + .djs-popup-header-group:before {
+  content: '';
+  width: 1px;
+  height: 20px;
+  background: var(--popup-header-group-divider-color);
+  margin: 0 5px;
+}
+
 .djs-popup-search {
   margin: 10px 12px;
 }

package/dist/base-modeler.development.js

@@ -28233,6 +28233,94 @@
 
   function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
+  /**
+   * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
+   */
+
+  /**
+   * Component that renders a popup menu header.
+   *
+   * @param {Object} props
+   * @param {PopupMenuHeaderEntry[]} props.headerEntries
+   * @param {PopupMenuHeaderEntry} props.selectedEntry
+   * @param {(event: MouseEvent, entry: PopupMenuHeaderEntry) => void} props.onSelect
+   * @param {(entry: PopupMenuHeaderEntry | null) => void} props.setSelectedEntry
+   * @param {string} props.title
+   */
+  function PopupMenuHeader(props) {
+    const {
+      headerEntries,
+      onSelect,
+      selectedEntry,
+      setSelectedEntry,
+      title
+    } = props;
+
+    const groups = F$3(() => groupEntries$1(headerEntries), [ headerEntries ]);
+
+    return m$3`
+    <div class="djs-popup-header">
+      <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
+      ${ groups.map((group) => m$3`
+        <ul key=${ group.id } class="djs-popup-header-group" data-header-group=${ group.id }>
+
+          ${ group.entries.map(entry => m$3`
+            <li key=${ entry.id }>
+              <${ entry.action ? 'button' : 'span' }
+                class=${ getHeaderClasses(entry, entry === selectedEntry) }
+                onClick=${ event => entry.action && onSelect(event, entry) }
+                title=${ entry.title || entry.label }
+                data-id=${ entry.id }
+                onMouseEnter=${ () => entry.action && setSelectedEntry(entry) }
+                onMouseLeave=${ () => entry.action && setSelectedEntry(null) }
+                onFocus=${ () => entry.action && setSelectedEntry(entry) }
+                onBlur=${ () => entry.action && setSelectedEntry(null) }
+              >
+                ${(entry.imageUrl && m$3`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
+                (entry.imageHtml && m$3`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
+                ${ entry.label ? m$3`
+                  <span class="djs-popup-label">${ entry.label }</span>
+                ` : null }
+              </${ entry.action ? 'button' : 'span' }>
+            </li>
+          `) }
+        </ul>
+      `) }
+    </div>
+  `;
+  }
+
+
+  // helpers
+  function groupEntries$1(entries) {
+    return entries.reduce((groups, entry) => {
+      const groupId = entry.group || 'default';
+
+      const group = groups.find(group => group.id === groupId);
+
+      if (group) {
+        group.entries.push(entry);
+      } else {
+        groups.push({
+          id: groupId,
+          entries: [ entry ]
+        });
+      }
+
+      return groups;
+    }, []);
+  }
+
+  function getHeaderClasses(entry, selected) {
+    return clsx(
+      'entry',
+      entry.className,
+      entry.active ? 'active' : '',
+      entry.disabled ? 'disabled' : '',
+      selected ? 'selected' : ''
+    );
+  }
+
   /**
    * @typedef {import('./PopupMenuProvider').PopupMenuEntry} PopupMenuEntry
    */
@@ -28430,6 +28518,7 @@
    *
    * @param {Object} props
    * @param {() => void} props.onClose
+   * @param {() => void} props.onSelect
    * @param {(element: HTMLElement) => Point} props.position
    * @param {string} props.className
    * @param {PopupMenuEntry[]} props.entries
@@ -28580,28 +28669,13 @@
       scale=${ scale }
     >
       ${ displayHeader && m$3`
-        <div class="djs-popup-header">
-          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
-          ${ headerEntries.map(entry => m$3`
-            <${ entry.action ? 'button' : 'span' }
-              class=${ getHeaderClasses(entry, entry === selectedEntry) }
-              onClick=${ event => onSelect(event, entry) }
-              title=${ entry.title || entry.label }
-              data-id=${ entry.id }
-              onMouseEnter=${ () => setSelectedEntry(entry) }
-              onMouseLeave=${ () => setSelectedEntry(null) }
-              onFocus=${ () => setSelectedEntry(entry) }
-              onBlur=${ () => setSelectedEntry(null) }
-            >
-            ${(entry.imageUrl && m$3`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
-            (entry.imageHtml && m$3`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
-
-              ${ entry.label ? m$3`
-                <span class="djs-popup-label">${ entry.label }</span>
-              ` : null }
-            </${ entry.action ? 'button' : 'span' }>
-          `) }
-        </div>
+        <${PopupMenuHeader}
+          headerEntries=${ headerEntries }
+          onSelect=${ onSelect }
+          selectedEntry=${ selectedEntry }
+          setSelectedEntry=${ setSelectedEntry }
+          title=${ title }
+        />
       ` }
       ${ originalEntries.length > 0 && m$3`
         <div class="djs-popup-body">
@@ -28724,16 +28798,6 @@
       width: `${props.width}px`,
       'transform-origin': 'top left'
     };
-  }
-
-  function getHeaderClasses(entry, selected) {
-    return clsx(
-      'entry',
-      entry.className,
-      entry.active ? 'active' : '',
-      entry.disabled ? 'disabled' : '',
-      selected ? 'selected' : ''
-    );
   }
 
   /**