bpmn-js 18.6.5 → 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.5
+ * 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-19
+ * 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">
@@ -27875,6 +27897,10 @@
 
     const handleKeyDown = x(event => {
       if (event.key === 'Enter' && selectedEntry) {
+        if (selectedEntry.disabled) {
+          return;
+        }
+
         return onSelect(event, selectedEntry);
       }