bpmn-js 18.6.4 → 18.7.0

package/dist/assets/diagram-js.css

@@ -63,6 +63,7 @@
   --popup-background-color: var(--color-white);
   --popup-border-color: transparent;
   --popup-shadow-color: var(--color-black-opacity-30);
+  --popup-disabled-color: var(--color-grey-225-10-35);
   --popup-description-color: var(--color-grey-225-10-55);
   --popup-no-results-color: var(--color-grey-225-10-55);
   --popup-entry-title-color: var(--color-grey-225-10-55);
@@ -674,6 +675,11 @@
   background-color: var(--popup-entry-hover-color);
 }
 
+.djs-popup .entry.disabled {
+  color: var(--popup-disabled-color);
+  cursor: not-allowed;
+}
+
 .djs-popup-body .entry:not(:first-child) {
   margin-top: 2px;
 }

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.6.4
+ * bpmn-js - bpmn-modeler v18.7.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2025-09-16
+ * Date: 2025-09-23
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -27542,6 +27542,18 @@
 
     const groups = q(() => groupEntries$1(headerEntries), [ headerEntries ]);
 
+    const isActionable = (entry) => {
+      return entry.action && !entry.disabled;
+    };
+
+    const handleClick = (event, entry) => {
+      if (!isActionable(entry)) {
+        return;
+      }
+
+      return onSelect(event, entry);
+    };
+
     return m$1`
     <div class="djs-popup-header">
       <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
@@ -27550,15 +27562,16 @@
 
           ${ group.entries.map(entry => m$1`
             <li key=${ entry.id }>
-              <${ entry.action ? 'button' : 'span' }
+              <${ isActionable(entry) ? 'button' : 'span' }
                 class=${ getHeaderClasses(entry, entry === selectedEntry) }
-                onClick=${ event => entry.action && onSelect(event, entry) }
+                onClick=${ event => handleClick(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) }
+                aria-disabled=${ entry.disabled || undefined }
+                onMouseEnter=${ () => isActionable(entry) && setSelectedEntry(entry) }
+                onMouseLeave=${ () => isActionable(entry) && setSelectedEntry(null) }
+                onFocus=${ () => isActionable(entry) && setSelectedEntry(entry) }
+                onBlur=${ () => isActionable(entry) && setSelectedEntry(null) }
               >
                 ${(entry.imageUrl && m$1`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
                 (entry.imageHtml && m$1`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
@@ -27629,18 +27642,27 @@
       onAction
     } = props;
 
+    const handleClick = (event, action) => {
+      if (entry.disabled) {
+        return;
+      }
+
+      return onAction(event, entry, action);
+    };
+
     return m$1`
     <li
-      class=${ clsx('entry', { selected }) }
+      class=${ clsx('entry', { selected, disabled: entry.disabled }) }
       data-id=${ entry.id }
       title=${ entry.title || entry.label }
+      aria-disabled=${ entry.disabled || undefined }
       tabIndex="0"
-      onClick=${ onAction }
+      onClick=${ handleClick }
       onFocus=${ onMouseEnter }
       onBlur=${ onMouseLeave }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
-      onDragStart=${ (event) => onAction(event, entry, 'dragstart') }
+      onDragStart=${ (event) => handleClick(event, 'dragstart') }
       draggable=${ true }
     >
       <div class="djs-popup-entry-content">
@@ -27686,13 +27708,14 @@
 
   /**
    * @typedef {import('./PopupMenuProvider').PopupMenuEntry} PopupMenuEntry
+   * @typedef {import('./PopupMenuProvider').PopupMenuGroup} PopupMenuGroup
    */
 
   /**
    * Component that renders a popup menu entry list.
    *
    * @param {Object} props
-   * @param {PopupMenuEntry[]} props.entries
+   * @param {PopupMenuGroup[]} props.groupedEntries
    * @param {PopupMenuEntry} props.selectedEntry
    * @param {(entry: PopupMenuEntry | null) => void} props.setSelectedEntry
    */
@@ -27700,14 +27723,12 @@
     const {
       selectedEntry,
       setSelectedEntry,
-      entries,
+      groupedEntries,
       ...restProps
     } = props;
 
     const resultsRef = F();
 
-    const groups = q(() => groupEntries(entries), [ entries ]);
-
     // scroll to selected result
     A(() => {
       const containerEl = resultsRef.current;
@@ -27724,7 +27745,7 @@
 
     return m$1`
     <div class="djs-popup-results" ref=${ resultsRef }>
-      ${ groups.map(group => m$1`
+      ${ groupedEntries.map(group => m$1`
         ${ group.name && m$1`
           <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
@@ -27748,33 +27769,6 @@
   }
 
 
-  // helpers
-  function groupEntries(entries) {
-    const groups = [];
-
-    const getGroup = group => groups.find(elem => group.id === elem.id);
-
-    const containsGroup = group => !!getGroup(group);
-
-    // legacy support for provider built for the old popUp menu
-    const formatGroup = group =>
-      typeof group === 'string' ? { id: group } : group;
-
-    entries.forEach(entry => {
-
-      // assume a default group when none is provided
-      const group = entry.group ? formatGroup(entry.group) : { id: 'default' };
-
-      if (!containsGroup(group)) {
-        groups.push({ ...group, entries: [ entry ] });
-      } else {
-        getGroup(group).entries.push(entry);
-      }
-    });
-
-    return groups;
-  }
-
   // helpers ////////////////
 
   function scrollIntoView(el) {
@@ -27792,6 +27786,7 @@
    * @typedef {import('./PopupMenuProvider').PopupMenuEntry} PopupMenuEntry
    * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
    * @typedef {import('./PopupMenuProvider').PopupMenuEmptyPlaceholderProvider | import('./PopupMenuProvider').PopupMenuEmptyPlaceholder} PopupMenuEmptyPlaceholder
+   * @typedef {import('./PopupMenuProvider').PopupMenuGroup} PopupMenuGroup
    *
    * @typedef {import('../search/search').default} search
    *
@@ -27867,21 +27862,24 @@
     const [ entries, setEntries ] = p(filterEntries(originalEntries, searchValue));
     const [ selectedEntry, setSelectedEntry ] = p(entries[0]);
 
+    const groupedEntries = q(() => groupEntries(entries), [ entries ]);
+
     const updateEntries = x((newEntries) => {
 
       // always select first
       setSelectedEntry(newEntries[0]);
 
       setEntries(newEntries);
-    }, [ selectedEntry, setEntries, setSelectedEntry ]);
+    }, [ setEntries, setSelectedEntry ]);
 
     // filter entries on search value change
     _(() => {
       updateEntries(filterEntries(originalEntries, searchValue));
     }, [ searchValue, originalEntries ]);
 
-    // handle keyboard seleciton
+    // handle keyboard selection
     const keyboardSelect = x(direction => {
+      const entries = getOrderedEntries(groupedEntries);
       const idx = entries.indexOf(selectedEntry);
 
       let nextIdx = idx + direction;
@@ -27895,10 +27893,14 @@
       }
 
       setSelectedEntry(entries[nextIdx]);
-    }, [ entries, selectedEntry, setSelectedEntry ]);
+    }, [ groupedEntries, selectedEntry, setSelectedEntry ]);
 
     const handleKeyDown = x(event => {
       if (event.key === 'Enter' && selectedEntry) {
+        if (selectedEntry.disabled) {
+          return;
+        }
+
         return onSelect(event, selectedEntry);
       }
 
@@ -27965,7 +27967,7 @@
           ` }
 
           <${PopupMenuList}
-            entries=${ entries }
+            groupedEntries=${ groupedEntries }
             selectedEntry=${ selectedEntry }
             setSelectedEntry=${ setSelectedEntry }
             onAction=${ onSelect }
@@ -28065,6 +28067,7 @@
   `;
   }
 
+
   // helpers //////////////////////
 
   function getPopupStyle(props) {
@@ -28075,6 +28078,49 @@
     };
   }
 
+  function getOrderedEntries(groupedEntries) {
+    const entries = [];
+
+    groupedEntries.forEach(group => {
+      group.entries.forEach(entry => {
+        entries.push(entry);
+      });
+    });
+
+    return entries;
+  }
+
+  /**
+   * @param {PopupMenuEntry[]} entries
+   *
+   * @return {PopupMenuGroup[]}
+   */
+  function groupEntries(entries) {
+    const groups = [];
+
+    const getGroup = group => groups.find(elem => group.id === elem.id);
+
+    const containsGroup = group => !!getGroup(group);
+
+    // legacy support for provider built for the old popUp menu
+    const formatGroup = group =>
+      typeof group === 'string' ? { id: group } : group;
+
+    entries.forEach(entry => {
+
+      // assume a default group when none is provided
+      const group = entry.group ? formatGroup(entry.group) : { id: 'default' };
+
+      if (!containsGroup(group)) {
+        groups.push({ ...group, entries: [ entry ] });
+      } else {
+        getGroup(group).entries.push(entry);
+      }
+    });
+
+    return groups;
+  }
+
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus