@openproject/primer-view-components 0.22.1 → 0.22.2-rc.e4bf80fc

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

@@ -140,12 +140,20 @@ _ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
     return foundItem;
 };
 _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
-    this.items[index].style.setProperty('visibility', 'visible');
-    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
+    const item = this.items[index];
+    const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
+    if (!item || !menuItem)
+        return;
+    item.style.setProperty('visibility', 'visible');
+    menuItem.hidden = true;
 };
 _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
-    this.items[index].style.setProperty('visibility', 'hidden');
-    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = false;
+    const item = this.items[index];
+    const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
+    if (!item || !menuItem)
+        return;
+    item.style.setProperty('visibility', 'hidden');
+    menuItem.hidden = false;
 };
 _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
     return this.moreMenu.querySelectorAll('[role="menu"] > li');

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

@@ -265,7 +265,9 @@ _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_p
         return false;
     if (item.getAttribute('aria-disabled')) {
         event.preventDefault();
+        /* eslint-disable-next-line no-restricted-syntax */
         event.stopPropagation();
+        /* eslint-disable-next-line no-restricted-syntax */
         event.stopImmediatePropagation();
         return true;
     }
@@ -294,6 +296,7 @@ _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event
 };
 _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
     event.preventDefault();
+    /* eslint-disable-next-line no-restricted-syntax */
     event.stopPropagation();
     if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
@@ -320,7 +323,6 @@ _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handl
         }
     };
     // a modal <dialog> element will close all popovers
-    setTimeout(() => __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_show).call(this), 0);
     dialog.addEventListener('close', handleDialogClose, { signal });
     dialog.addEventListener('cancel', handleDialogClose, { signal });
 };
@@ -377,6 +379,7 @@ _ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event
         return;
     // otherwise, event will not result in activation by default, so we stop it and
     // simulate a click
+    /* eslint-disable-next-line no-restricted-syntax */
     event.stopPropagation();
     const elem = item;
     elem.click();

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

@@ -26,6 +26,7 @@ function clickHandler(event) {
     // If the user is clicking a valid dialog trigger
     let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
     if (dialogId) {
+        /* eslint-disable-next-line no-restricted-syntax */
         event.stopPropagation();
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof ModalDialogElement) {
@@ -169,11 +170,13 @@ _ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_in
         case 'Escape':
             this.close();
             event.preventDefault();
+            /* eslint-disable-next-line no-restricted-syntax */
             event.stopPropagation();
             break;
         case 'Enter': {
             const target = event.target;
             if (target.getAttribute('data-close-dialog-id') === this.id) {
+                /* eslint-disable-next-line no-restricted-syntax */
                 event.stopPropagation();
             }
             break;

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

@@ -134,9 +134,9 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
                 credentials: 'same-origin',
                 method: 'POST',
                 headers: {
-                    'Requested-With': 'XMLHttpRequest'
+                    'Requested-With': 'XMLHttpRequest',
                 },
-                body
+                body,
             });
         }
         catch (error) {

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

@@ -310,6 +310,7 @@ class ToolTipElement extends HTMLElement {
         const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
         if (showing && isEscapeKeydown) {
+            /* eslint-disable-next-line no-restricted-syntax */
             event.stopImmediatePropagation();
             event.preventDefault();
         }

package/app/components/primer/beta/nav_list.js

@@ -77,6 +77,7 @@ let NavListElement = class NavListElement extends HTMLElement {
         else {
             this.expandItem(button);
         }
+        /* eslint-disable-next-line no-restricted-syntax */
         e.stopPropagation();
     }
     // collapse item
@@ -97,6 +98,7 @@ let NavListElement = class NavListElement extends HTMLElement {
         if (this.itemIsExpanded(button) && e.key === 'Escape') {
             this.collapseItem(button);
         }
+        /* eslint-disable-next-line no-restricted-syntax */
         e.stopPropagation();
     }
 };

package/app/components/primer/dialog_helper.js

@@ -11,6 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _DialogHelperElement_abortController;
 function dialogInvokerButtonHandler(event) {
+    var _a;
     const target = event.target;
     const button = target === null || target === void 0 ? void 0 : target.closest('button');
     if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
@@ -25,6 +26,41 @@ function dialogInvokerButtonHandler(event) {
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
+            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+            // any popover that is currently open, regardless of whether or not another top layer element,
+            // such as a <dialog> is nested inside.
+            // See https://github.com/whatwg/html/issues/9998.
+            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
+            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            let node = button;
+            let fixed = false;
+            while (node) {
+                node = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('[popover]:not(:popover-open)');
+                if (node && node.popover === 'auto') {
+                    node.classList.add('dialog-inside-popover-fix');
+                    node.popover = 'manual';
+                    node.showPopover();
+                    fixed = true;
+                }
+            }
+            if (fixed) {
+                // We need to re-open the dialog as modal, and also ensure no close event listeners
+                // are trying to act on the close
+                /* eslint-disable-next-line no-restricted-syntax */
+                dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
+                dialog.close();
+                dialog.showModal();
+                dialog.addEventListener('close', () => {
+                    for (const el of dialog.ownerDocument.querySelectorAll('.dialog-inside-popover-fix')) {
+                        if (el.contains(dialog)) {
+                            el.classList.remove('dialog-inside-popover-fix');
+                            el.popover = 'auto';
+                            el.showPopover();
+                        }
+                    }
+                }, { once: true });
+            }
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -52,21 +88,6 @@ export class DialogHelperElement extends HTMLElement {
             for (const record of records) {
                 if (record.target === this.dialog) {
                     this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
-                    // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-                    // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-                    // any popover that is currently open, regardless of whether or not another top layer element,
-                    // such as a <dialog> is nested inside.
-                    // See https://github.com/whatwg/html/issues/9998.
-                    // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
-                    // we must undo the work they did to hide ancestral popovers of the dialog:
-                    if (this.dialog.hasAttribute('open')) {
-                        let node = this.dialog;
-                        while (node) {
-                            node = node.closest('[popover]:not(:popover-open)');
-                            if (node)
-                                node.showPopover();
-                        }
-                    }
                 }
             }
         }).observe(this, { subtree: true, attributeFilter: ['open'] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.22.1",
+  "version": "0.22.2-rc.e4bf80fc",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -80,12 +80,12 @@
     "mocha": "^10.0.0",
     "playwright": "^1.35.1",
     "postcss": "^8.4.16",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
     "postcss-custom-properties-fallback": "^1.0.2",
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^16.1.0",

package/static/info_arch.json

@@ -2232,7 +2232,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::Banner",
     "description": "Use `Banner` to highlight important information.",
-    "accessibility_docs": null,
+    "accessibility_docs": "Depending on the scenario, some Banners may need to receive focus when they appear. This helps to maximize discoverability of the message, especially in critical scenarios. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility) or defer to the accessibility team to determine if your scenario requires focusing the banner.\n\nTo properly focus a banner, add a `tabindex=\"-1\"` to the Banner container, and focus that container (one way is using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).\n\nFor more information about the focus management technique, visit the [Accessible Banner Prototype docs](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#consideration). This guidance is subject to change.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -3379,7 +3379,7 @@
       {
         "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
         "name": "dialog_inside_overlay",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"

package/static/previews.json

@@ -3190,7 +3190,7 @@
       {
         "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
         "name": "dialog_inside_overlay",
-        "snapshot": "false",
+        "snapshot": "interactive",
         "skip_rules": {
           "wont_fix": [
             "region"