openproject-primer_view_components 0.22.1 → 0.22.2

data/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');

data/app/components/primer/alpha/action_bar_element.ts

@@ -145,13 +145,19 @@ class ActionBarElement extends HTMLElement {
   }
 
   #showItem(index: number) {
-    this.items[index].style.setProperty('visibility', 'visible')
-    this.#menuItems[index]!.hidden = true
+    const item = this.items[index]
+    const menuItem = this.#menuItems[index]
+    if (!item || !menuItem) return
+    item.style.setProperty('visibility', 'visible')
+    menuItem.hidden = true
   }
 
   #hideItem(index: number) {
-    this.items[index].style.setProperty('visibility', 'hidden')
-    this.#menuItems[index]!.hidden = false
+    const item = this.items[index]
+    const menuItem = this.#menuItems[index]
+    if (!item || !menuItem) return
+    item.style.setProperty('visibility', 'hidden')
+    menuItem.hidden = false
   }
 
   get #menuItems(): NodeListOf<HTMLElement> {

data/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();

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -141,7 +141,9 @@ export class ActionMenuElement extends HTMLElement {
 
     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
     }
@@ -260,6 +262,7 @@ export class ActionMenuElement extends HTMLElement {
 
   #handleInvokerActivated(event: Event) {
     event.preventDefault()
+    /* eslint-disable-next-line no-restricted-syntax */
     event.stopPropagation()
 
     if (this.#isOpen()) {
@@ -287,7 +290,6 @@ export class ActionMenuElement extends HTMLElement {
       }
     }
     // a modal <dialog> element will close all popovers
-    setTimeout(() => this.#show(), 0)
     dialog.addEventListener('close', handleDialogClose, {signal})
     dialog.addEventListener('cancel', handleDialogClose, {signal})
   }
@@ -354,6 +356,7 @@ export class ActionMenuElement extends HTMLElement {
 
     // 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 as HTMLElement
     elem.click()

data/app/components/primer/alpha/banner.html.erb

@@ -23,8 +23,7 @@
             scheme: :invisible,
             icon: :x,
             aria: { label: @dismiss_label },
-            data: { action: catalyst_action(event: "click", function: "dismiss") },
-            autofocus: true
+            data: { action: catalyst_action(event: "click", function: "dismiss") }
           )
         ) %>
       </div>

data/app/components/primer/alpha/banner.rb

@@ -3,6 +3,13 @@
 module Primer
   module Alpha
     # Use `Banner` to highlight important information.
+    #
+    # @accessibility
+    #   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.
+    #
+    #   To 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)).
+    #
+    #   For 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.
     class Banner < Primer::Component
       status :alpha
 

data/app/components/primer/alpha/dialog.rb

@@ -131,7 +131,6 @@ module Primer
         @system_arguments[:aria] = merge_aria(
           @system_arguments, {
             aria: {
-              disabled: true,
               labelledby: labelledby,
               describedby: "#{@id}-description"
             }

data/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;

data/app/components/primer/alpha/modal_dialog.ts

@@ -18,6 +18,7 @@ function clickHandler(event: Event) {
   // If the user is clicking a valid dialog trigger
   let dialogId = 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) {
@@ -170,12 +171,14 @@ export class ModalDialogElement extends HTMLElement {
       case 'Escape':
         this.close()
         event.preventDefault()
+        /* eslint-disable-next-line no-restricted-syntax */
         event.stopPropagation()
         break
       case 'Enter': {
         const target = event.target as HTMLElement
 
         if (target.getAttribute('data-close-dialog-id') === this.id) {
+          /* eslint-disable-next-line no-restricted-syntax */
           event.stopPropagation()
         }
         break

data/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) {

data/app/components/primer/alpha/toggle_switch.ts

@@ -163,9 +163,9 @@ class ToggleSwitchElement extends HTMLElement {
         credentials: 'same-origin',
         method: 'POST',
         headers: {
-          'Requested-With': 'XMLHttpRequest'
+          'Requested-With': 'XMLHttpRequest',
         },
-        body
+        body,
       })
     } catch (error) {
       throw new Error('A network error occurred, please try again.')

data/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();
         }

data/app/components/primer/alpha/tool_tip.ts

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

data/app/components/primer/beta/clipboard_copy.ts

@@ -50,6 +50,6 @@ document.addEventListener('clipboard-copy', ({target}) => {
     setTimeout(() => {
       showCopy(target)
       clipboardCopyElementTimers.delete(target)
-    }, CLIPBOARD_COPY_TIMER_DURATION)
+    }, CLIPBOARD_COPY_TIMER_DURATION),
   )
 })

data/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();
     }
 };

data/app/components/primer/beta/nav_list.ts

@@ -74,6 +74,7 @@ export class NavListElement extends HTMLElement {
       this.expandItem(button)
     }
 
+    /* eslint-disable-next-line no-restricted-syntax */
     e.stopPropagation()
   }
 
@@ -96,6 +97,7 @@ export class NavListElement extends HTMLElement {
       this.collapseItem(button)
     }
 
+    /* eslint-disable-next-line no-restricted-syntax */
     e.stopPropagation()
   }
 

data/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'] });

data/app/components/primer/dialog_helper.ts

@@ -14,6 +14,46 @@ function dialogInvokerButtonHandler(event: 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: HTMLElement | null | undefined = button
+      let fixed = false
+      while (node) {
+        node = node.parentElement?.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<HTMLElement>('.dialog-inside-popover-fix')) {
+              if (el.contains(dialog)) {
+                el.classList.remove('dialog-inside-popover-fix')
+                el.popover = 'auto'
+                el.showPopover()
+              }
+            }
+          },
+          {once: true},
+        )
+      }
     }
   }
 
@@ -44,20 +84,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: HTMLElement | null = this.dialog
-            while (node) {
-              node = node.closest('[popover]:not(:popover-open)')
-              if (node) node.showPopover()
-            }
-          }
         }
       }
     }).observe(this, {subtree: true, attributeFilter: ['open']})

data/app/components/primer/focus_group.ts

@@ -85,7 +85,7 @@ export default class FocusGroupElement extends HTMLElement {
                   }
                 }
               },
-              {signal}
+              {signal},
             )
           }
         }

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 22
-      PATCH = 1
+      PATCH = 2
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb

@@ -1,9 +1,20 @@
-<%= render(Primer::Alpha::Overlay.new(title: "An overlay")) do |o| %>
+<%= render(Primer::Alpha::Overlay.new(title: "An overlay", id: "first-overlay")) do |o| %>
   <% o.with_show_button() { "Show overlay" } %>
   <% o.with_body() do %>
     <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
       <% d.with_show_button { button_text } %>
-      <% d.with_body { body_text} %>
+      <% d.with_body { body_text } %>
+      <% d.with_footer(show_divider: true) do %>
+        <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "dialog-one" })) { "Cancel" } %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>
+
+<script type="module">
+document.getElementById('overlay-show-first-overlay')?.addEventListener('click', e => {
+    setTimeout(() => {
+        document.getElementById('first-overlay').querySelector('button')?.click()
+    });
+  });
+</script>

data/previews/primer/alpha/dialog_preview.rb

@@ -259,6 +259,7 @@ module Primer
       # @param visually_hide_title [Boolean] toggle
       # @param button_text [String] text
       # @param body_text [String] text
+      # @snapshot interactive
       def dialog_inside_overlay(title: "Test Dialog", subtitle: nil, position: :center, size: :medium, button_text: "Show Dialog", body_text: "Content", position_narrow: :fullscreen, visually_hide_title: false)
         render_with_template(locals: {
                                title: title,

data/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"

data/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"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.22.1
+  version: 0.22.2
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-02-05 00:00:00.000000000 Z
+date: 2024-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -916,7 +916,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.6.0
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="