@openproject/primer-view-components 0.86.2 → 0.87.0-rc.c7348d13c

package/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -469,6 +469,7 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
     else {
         // multi-select mode allows unchecking a checked item
         item.setAttribute('aria-checked', `${checked}`);
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
     }
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
     this.dispatchEvent(new CustomEvent('itemActivated', {
@@ -498,21 +499,29 @@ _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     return this.popoverElement?.matches(':popover-open');
 };
 _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
-    if (this.selectVariant !== 'single')
-        return;
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;
     if (!invokerLabel)
         return;
     __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
-    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    let itemLabel;
+    if (this.selectVariant === 'single') {
+        itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')?.textContent?.trim();
+    }
+    else if (this.selectVariant === 'multiple') {
+        itemLabel = Array.from(this.querySelectorAll(`[aria-checked=true] .ActionListItem-label`))
+            .map(label => (label.textContent || '').trim())
+            .filter(Boolean)
+            .join(', ');
+    }
+    itemLabel || (itemLabel = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f"));
     if (itemLabel && this.dynamicLabel) {
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');
         const contentSpan = document.createElement('span');
-        prefixSpan.textContent = this.dynamicLabelPrefix;
-        contentSpan.textContent = itemLabel.textContent || '';
+        prefixSpan.textContent = this.dynamicLabelPrefix ? `${this.dynamicLabelPrefix} ` : '';
+        contentSpan.textContent = itemLabel;
         invokerLabel.replaceChildren(prefixSpan, contentSpan);
     }
     else {

package/app/components/primer/alpha/select_panel_element.js

@@ -866,6 +866,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
         else {
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_removeSelectedItem).call(this, item);
         }
+        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
     }
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
@@ -885,7 +886,16 @@ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLab
     if (!invokerLabel)
         return;
     __classPrivateFieldSet(this, _SelectPanelElement_originalLabel, __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
-    const itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f");
+    let itemLabel;
+    if (this.selectVariant === 'single') {
+        itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent;
+    }
+    else if (this.selectVariant === 'multiple') {
+        itemLabel = Array.from(this.querySelectorAll(`[${this.ariaSelectionType}=true] .ActionListItem-label`))
+            .map(label => label.textContent?.trim() ?? '')
+            .join(', ');
+    }
+    itemLabel || (itemLabel = __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f"));
     if (itemLabel) {
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.86.2",
+  "version": "0.87.0-rc.c7348d13c",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",