camunda-bpmn-js 4.6.3 → 4.7.0

package/dist/camunda-cloud-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$4(() => 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' : ''
-    );
   }
 
   /**
@@ -125904,54 +125968,54 @@
     }
   };
 
-  /**
-   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
-   *
-   * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
-   */
-
-  /**
-   *
-   * @param {BaseViewerOptions} options
-   */
-  function Modeler$1(options = {}) {
-    Modeler$2.call(this, options);
-  }
-
-  e$7(Modeler$1, Modeler$2);
-
-  /**
-   * @param { {
-   *  disableAdjustOrigin?: boolean;
-   *  disableGrid?: boolean;
-   * } } [options]
-   *
-   * @returns {ModuleDeclaration[]}
-   */
-  Modeler$1.prototype.getModules = function(options = {}) {
-    const modules = Modeler$2.prototype.getModules.call(this, options);
-
-    return [
-      ...modules,
-      options.disableAdjustOrigin
-        ? diagramOriginModule
-        : alignToOriginModule,
-      options.disableGrid
-        ? {}
-        : index$5
-    ];
-  };
-
-  Modeler$1.prototype._extensionModules = [
-    index$6,
-    ExecutableFixModule,
-    index$3$1,
-    index$2$1
-  ];
-
-  Modeler$1.prototype._modules = [].concat(
-    Modeler$2.prototype._modules,
-    Modeler$1.prototype._extensionModules
+  /**
+   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
+   *
+   * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
+   */
+
+  /**
+   *
+   * @param {BaseViewerOptions} options
+   */
+  function Modeler$1(options = {}) {
+    Modeler$2.call(this, options);
+  }
+
+  e$7(Modeler$1, Modeler$2);
+
+  /**
+   * @param { {
+   *  disableAdjustOrigin?: boolean;
+   *  disableGrid?: boolean;
+   * } } [options]
+   *
+   * @returns {ModuleDeclaration[]}
+   */
+  Modeler$1.prototype.getModules = function(options = {}) {
+    const modules = Modeler$2.prototype.getModules.call(this, options);
+
+    return [
+      ...modules,
+      options.disableAdjustOrigin
+        ? diagramOriginModule
+        : alignToOriginModule,
+      options.disableGrid
+        ? {}
+        : index$5
+    ];
+  };
+
+  Modeler$1.prototype._extensionModules = [
+    index$6,
+    ExecutableFixModule,
+    index$3$1,
+    index$2$1
+  ];
+
+  Modeler$1.prototype._modules = [].concat(
+    Modeler$2.prototype._modules,
+    Modeler$1.prototype._extensionModules
   );
 
   /**
@@ -158399,17 +158463,17 @@
   	types: types
   };
 
-  const commonModules = [
-    iconRendererModule
-  ];
-
-  /**
-   * @type { {
-   *   zeebe: any
-   * } }
-   */
-  const commonModdleExtensions = {
-    zeebe: zeebeModdle
+  const commonModules = [
+    iconRendererModule
+  ];
+
+  /**
+   * @type { {
+   *   zeebe: any
+   * } }
+   */
+  const commonModdleExtensions = {
+    zeebe: zeebeModdle
   };
 
   /**
@@ -162257,58 +162321,58 @@
     ]
   };
 
-  /**
-   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
-   */
-
-  /**
-   * @param {BaseViewerOptions} options
-   */
-  function Modeler(options = {}) {
-
-    options = {
-      ...options,
-      moddleExtensions: {
-        ...commonModdleExtensions,
-        ...options.moddleExtensions
-      },
-      propertiesPanel: {
-        tooltip: TooltipProvider$1,
-        ...options.propertiesPanel
-      }
-    };
-
-    this._addElementTemplateChooserModule(options);
-
-    Modeler$1.call(this, options);
-  }
-
-  e$7(Modeler, Modeler$1);
-
-  Modeler.prototype._addElementTemplateChooserModule = function(options) {
-    const { elementTemplateChooser } = options;
-
-    if (elementTemplateChooser !== false) {
-      this._modules = [ ...this._modules, index$2 ];
-    }
-  };
-
-  Modeler.prototype._camundaCloudModules = [
-    ...commonModules,
-    behaviorsModule,
-    index$1$2,
-    index$1$1,
-    index$1,
-    index,
-    colorPickerModule,
-    ZeebeVariableResolverModule,
-    exampleDataPropertiesProviderModule,
-    index$3
-  ];
-
-  Modeler.prototype._modules = [].concat(
-    Modeler$1.prototype._modules,
-    Modeler.prototype._camundaCloudModules
+  /**
+   * @typedef {import('bpmn-js/lib/BaseViewer').BaseViewerOptions} BaseViewerOptions
+   */
+
+  /**
+   * @param {BaseViewerOptions} options
+   */
+  function Modeler(options = {}) {
+
+    options = {
+      ...options,
+      moddleExtensions: {
+        ...commonModdleExtensions,
+        ...options.moddleExtensions
+      },
+      propertiesPanel: {
+        tooltip: TooltipProvider$1,
+        ...options.propertiesPanel
+      }
+    };
+
+    this._addElementTemplateChooserModule(options);
+
+    Modeler$1.call(this, options);
+  }
+
+  e$7(Modeler, Modeler$1);
+
+  Modeler.prototype._addElementTemplateChooserModule = function(options) {
+    const { elementTemplateChooser } = options;
+
+    if (elementTemplateChooser !== false) {
+      this._modules = [ ...this._modules, index$2 ];
+    }
+  };
+
+  Modeler.prototype._camundaCloudModules = [
+    ...commonModules,
+    behaviorsModule,
+    index$1$2,
+    index$1$1,
+    index$1,
+    index,
+    colorPickerModule,
+    ZeebeVariableResolverModule,
+    exampleDataPropertiesProviderModule,
+    index$3
+  ];
+
+  Modeler.prototype._modules = [].concat(
+    Modeler$1.prototype._modules,
+    Modeler.prototype._camundaCloudModules
   );
 
   return Modeler;