openproject-primer_view_components 0.11.0 → 0.13.0

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

@@ -9,7 +9,8 @@ type SelectedItem = {
   element: Element
 }
 
-const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
 
 @controller
 export class ActionMenuElement extends HTMLElement {
@@ -19,6 +20,7 @@ export class ActionMenuElement extends HTMLElement {
   #abortController: AbortController
   #originalLabel = ''
   #inputName = ''
+  #invokerBeingClicked = false
 
   get selectVariant(): SelectVariant {
     return this.getAttribute('data-select-variant') as SelectVariant
@@ -51,7 +53,7 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   get popoverElement(): HTMLElement | null {
-    return this.invokerElement?.popoverTargetElement || null
+    return (this.invokerElement?.popoverTargetElement as HTMLElement) || null
   }
 
   get invokerElement(): HTMLButtonElement | null {
@@ -93,8 +95,10 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('click', this, {signal})
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
+    this.addEventListener('mousedown', this, {signal})
     this.#setDynamicLabel()
     this.#updateInput()
+    this.#softDisableItems()
 
     if (this.includeFragment) {
       this.includeFragment.addEventListener('include-fragment-replaced', this, {
@@ -103,102 +107,218 @@ export class ActionMenuElement extends HTMLElement {
     }
   }
 
+  #softDisableItems() {
+    const {signal} = this.#abortController
+
+    for (const item of this.#items) {
+      item.addEventListener('click', this.#potentiallyDisallowActivation.bind(this), {signal})
+      item.addEventListener('keydown', this.#potentiallyDisallowActivation.bind(this), {signal})
+    }
+  }
+
+  #potentiallyDisallowActivation(event: Event) {
+    if (!this.#isActivation(event)) return
+
+    const item = (event.target as HTMLElement).closest(menuItemSelectors.join(','))
+    if (!item) return
+
+    if (item.getAttribute('aria-disabled')) {
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+    }
+  }
+
   disconnectedCallback() {
     this.#abortController.abort()
   }
 
+  #isKeyboardActivation(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      (event.key === 'Enter' || event.key === ' ')
+    )
+  }
+
+  #isMouseActivation(event: Event): boolean {
+    return event instanceof MouseEvent && event.type === 'click'
+  }
+
+  #isActivation(event: Event): boolean {
+    return this.#isMouseActivation(event) || this.#isKeyboardActivation(event)
+  }
+
   handleEvent(event: Event) {
-    const activation = this.#isActivationKeydown(event)
-    if (event.target === this.invokerElement && activation) {
-      if (this.#firstItem) {
-        event.preventDefault()
-        this.popoverElement?.showPopover()
-        this.#firstItem.focus()
-        return
-      }
+    const targetIsInvoker = this.invokerElement?.contains(event.target as HTMLElement)
+    const eventIsActivation = this.#isActivation(event)
+
+    if (targetIsInvoker && event.type === 'mousedown') {
+      this.#invokerBeingClicked = true
+      return
+    }
+
+    // Prevent safari bug that dismisses menu on mousedown instead of allowing
+    // the click event to propagate to the button
+    if (event.type === 'mousedown') {
+      event.preventDefault()
+      return
     }
 
-    // Ignore events within dialogs within menus
-    if ((event.target as Element)?.closest('dialog') || (event.target as Element)?.closest('modal-dialog')) {
+    if (targetIsInvoker && eventIsActivation) {
+      this.#handleInvokerActivated(event)
+      this.#invokerBeingClicked = false
       return
     }
 
-    // If a dialog has been rendered within the menu, we do not want to hide
-    // the entire menu, as that will also hide the Dialog. Instead we want to
-    // show the Dialog while hiding just the visible part of the menu.
-    if ((activation || event.type === 'click') && (event.target as HTMLElement)?.closest('[data-show-dialog-id]')) {
-      const dialogInvoker = (event.target as HTMLElement)!.closest('[data-show-dialog-id]')
-      const dialog = this.ownerDocument.getElementById(dialogInvoker?.getAttribute('data-show-dialog-id') || '')
-      if (dialogInvoker && dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
-        this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = 'none'
-        const dialog_controller = new AbortController()
-        const {signal} = dialog_controller
-        const handleDialogClose = () => {
-          dialog_controller.abort()
-          this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = ''
-          if (this.popoverElement?.matches(':popover-open')) {
-            this.popoverElement?.hidePopover()
-          }
+    if (event.type === 'focusout') {
+      if (this.#invokerBeingClicked) return
+
+      // Give the browser time to focus the next element
+      requestAnimationFrame(() => {
+        if (!this.contains(document.activeElement) || document.activeElement === this.invokerElement) {
+          this.#handleFocusOut()
         }
-        dialog.addEventListener('close', handleDialogClose, {signal})
-        dialog.addEventListener('cancel', handleDialogClose, {signal})
-        return
-      }
+      })
+
+      return
     }
 
-    if (!this.popoverElement?.matches(':popover-open')) return
+    const item = (event.target as Element).closest(menuItemSelectors.join(','))
+    const targetIsItem = item !== null
 
-    if (event.type === 'include-fragment-replaced') {
-      if (this.#firstItem) this.#firstItem.focus()
-    } else if (activation || (event instanceof MouseEvent && event.type === 'click')) {
-      // Hide popover after current event loop to prevent changes in focus from
-      // altering the target of the event. Not doing this specifically affects
-      // <a> tags. It causes the event to be sent to the currently focused element
-      // instead of the anchor, which effectively prevents navigation, i.e. it
-      // appears as if hitting enter does nothing. Curiously, clicking instead
-      // works fine.
-      if (this.selectVariant !== 'multiple') {
-        setTimeout(() => {
-          if (this.popoverElement?.matches(':popover-open')) {
-            this.popoverElement?.hidePopover()
-          }
-        })
+    if (targetIsItem && eventIsActivation) {
+      const dialogInvoker = item.closest('[data-show-dialog-id]')
+
+      if (dialogInvoker) {
+        const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '')
+
+        if (dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
+          this.#handleDialogItemActivated(event, dialog)
+          return
+        }
       }
 
-      // The rest of the code below deals with single/multiple selection behavior, and should not
-      // interfere with events fired by menu items whose behavior is specified outside the library.
-      if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single') return
+      this.#activateItem(event, item)
+      this.#handleItemActivated(event, item)
+      return
+    }
 
-      const item = (event.target as Element).closest(menuItemSelectors.join(','))
-      if (!item) return
-      const ariaChecked = item.getAttribute('aria-checked')
-      const checked = ariaChecked !== 'true'
+    if (event.type === 'include-fragment-replaced') {
+      this.#handleIncludeFragmentReplaced()
+    }
+  }
 
-      if (this.selectVariant === 'single') {
-        // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
-        if (checked) {
-          item.setAttribute('aria-checked', 'true')
-        }
+  #handleInvokerActivated(event: Event) {
+    event.preventDefault()
+    event.stopPropagation()
 
-        for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
-          if (checkedItem !== item) {
-            checkedItem.setAttribute('aria-checked', 'false')
-          }
-        }
+    if (this.#isOpen()) {
+      this.#hide()
+    } else {
+      this.#show()
+      this.#firstItem?.focus()
+    }
+  }
 
-        this.#setDynamicLabel()
-      } else {
-        // multi-select mode allows unchecking a checked item
-        item.setAttribute('aria-checked', `${checked}`)
+  #handleDialogItemActivated(event: Event, dialog: HTMLElement) {
+    this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = 'none'
+    const dialog_controller = new AbortController()
+    const {signal} = dialog_controller
+    const handleDialogClose = () => {
+      dialog_controller.abort()
+      this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = ''
+      if (this.#isOpen()) {
+        this.#hide()
       }
+    }
+    dialog.addEventListener('close', handleDialogClose, {signal})
+    dialog.addEventListener('cancel', handleDialogClose, {signal})
+  }
+
+  #handleItemActivated(event: Event, item: Element) {
+    // Hide popover after current event loop to prevent changes in focus from
+    // altering the target of the event. Not doing this specifically affects
+    // <a> tags. It causes the event to be sent to the currently focused element
+    // instead of the anchor, which effectively prevents navigation, i.e. it
+    // appears as if hitting enter does nothing. Curiously, clicking instead
+    // works fine.
+    if (this.selectVariant !== 'multiple') {
+      setTimeout(() => {
+        if (this.#isOpen()) {
+          this.#hide()
+        }
+      })
+    }
 
-      this.#updateInput()
+    // The rest of the code below deals with single/multiple selection behavior, and should not
+    // interfere with events fired by menu items whose behavior is specified outside the library.
+    if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single') return
 
-      if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
-        // prevent buttons from being clicked twice
-        event.preventDefault()
+    const ariaChecked = item.getAttribute('aria-checked')
+    const checked = ariaChecked !== 'true'
+
+    if (this.selectVariant === 'single') {
+      // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+      if (checked) {
+        item.setAttribute('aria-checked', 'true')
+      }
+
+      for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
+        if (checkedItem !== item) {
+          checkedItem.setAttribute('aria-checked', 'false')
+        }
       }
+
+      this.#setDynamicLabel()
+    } else {
+      // multi-select mode allows unchecking a checked item
+      item.setAttribute('aria-checked', `${checked}`)
     }
+
+    this.#updateInput()
+  }
+
+  #activateItem(event: Event, item: Element) {
+    const eventWillActivateByDefault =
+      (event instanceof MouseEvent && event.type === 'click') ||
+      (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter')
+
+    // if the event will result in activating the current item by default, i.e. is a
+    // mouse click or keyboard enter, bail out
+    if (eventWillActivateByDefault) return
+
+    // otherwise, event will not result in activation by default, so we stop it and
+    // simulate a click
+    event.stopPropagation()
+    const elem = item as HTMLElement
+    elem.click()
+  }
+
+  #handleIncludeFragmentReplaced() {
+    if (this.#firstItem) this.#firstItem.focus()
+    this.#softDisableItems()
+  }
+
+  // Close when focus leaves menu
+  #handleFocusOut() {
+    this.#hide()
+  }
+
+  #show() {
+    this.popoverElement?.showPopover()
+  }
+
+  #hide() {
+    this.popoverElement?.hidePopover()
+  }
+
+  #isOpen() {
+    return this.popoverElement?.matches(':popover-open')
   }
 
   #setDynamicLabel() {
@@ -260,18 +380,13 @@ export class ActionMenuElement extends HTMLElement {
     }
   }
 
-  #isActivationKeydown(event: Event): boolean {
-    return (
-      event instanceof KeyboardEvent &&
-      event.type === 'keydown' &&
-      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-      (event.key === 'Enter' || event.key === ' ')
-    )
-  }
-
   get #firstItem(): HTMLElement | null {
     return this.querySelector(menuItemSelectors.join(','))
   }
+
+  get #items(): HTMLElement[] {
+    return Array.from(this.querySelectorAll(menuItemSelectors.join(',')))
+  }
 }
 
 if (!window.customElements.get('action-menu')) {

data/app/components/primer/alpha/action_menu/list.rb

@@ -111,8 +111,6 @@ module Primer
               system_arguments,
               { aria: { disabled: true } }
             )
-
-            content_arguments[:disabled] = "" if content_arguments[:tag] == :button
           end
 
           { data: data, **system_arguments, content_arguments: content_arguments }

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

@@ -3,14 +3,131 @@
 
 module Primer
   module Alpha
-    # ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.
+    # ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when
+    # users interact with buttons, actions, or other controls.
     #
     # The only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.
     #
+    # ### Select variants
+    #
+    # While `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support
+    # `single` and `multiple` select variants. The single select variant allows a single item to be "selected" (i.e. marked "active")
+    # when clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,
+    # multiple items may be selected and check marks will appear next to each selected item.
+    #
+    # Use the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on
+    # supported arguments below.
+    #
+    # ### Dynamic labels
+    #
+    # When using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.
+    # Dynamic labels can also be prefixed with custom text.
+    #
+    # Pass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: "<string>"` to set a custom prefix.
+    # For more information, see the documentation on supported arguments below.
+    #
+    # ### `ActionMenu`s as form inputs
+    #
+    # When using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very
+    # similarly to how HTML `<select>` boxes behave, and play nicely with Rails' built-in form mechanisms. Pass arguments via the
+    # `form_arguments:` argument, including the Rails form builder object and the name of the field:
+    #
+    # ```erb
+    # <% form_with(url: update_merge_strategy_path) do |f| %>
+    #   <%= render(Primer::Alpha::ActionMenu.new(form_arguments: { builder: f, name: "merge_strategy" })) do |menu| %>
+    #     <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+    #     <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+    #     <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+    #     <% menu.with_item(label: "Theirs", data: { value: "theirs" }) %>
+    #   <% end %>
+    # <% end %>
+    # ```
+    #
+    # The value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above
+    # (eg. `"merge_strategy"`). If no value is provided for an item, the value of that item is the item's label.  Here's the
+    # corresponding `MergeStrategyController` that might be written to handle the form above:
+    #
+    # ```ruby
+    # class MergeStrategyController < ApplicationController
+    #   def update
+    #     puts "You chose #{merge_strategy_params[:merge_strategy]}"
+    #   end
+    #
+    #   private
+    #
+    #   def merge_strategy_params
+    #     params.permit(:merge_strategy)
+    #   end
+    # end
+    # ```
+    #
+    # ### `ActionMenu` items that submit forms
+    #
+    # Whereas `ActionMenu` items normally permit navigation via `<a>` tags which make HTTP `get` requests, `ActionMenu` items
+    # also permit navigation via `POST` requests. To enable this behavior, include the `href:` argument as normal, but also pass
+    # the `form_arguments:` argument to the appropriate item:
+    #
+    # ```erb
+    # <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+    #   <% menu.with_item(
+    #     label: "Repository",
+    #     href: update_repo_grouping_path,
+    #     form_arguments: {
+    #       method: :post,
+    #       name: "group_by",
+    #       value: "repository"
+    #     }
+    #   ) %>
+    # <% end %>
+    # ```
+    #
+    # Make sure to specify `method: :post`, as the default is `:get`. When clicked, the list item will submit a POST request to
+    # the URL passed in the `href:` argument, including a parameter named `"group_by"` with a value of `"repository"`. If no value
+    # is given, the name, eg. `"group_by"`, will be used as the value.
+    #
+    # It is possible to include multiple fields on submit. Instead of passing the `name:` and `value:` arguments, pass an array via
+    # the `inputs:` argument:
+    #
+    # ```erb
+    # <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+    #   <% menu.with_show_button { "Group By" } %>
+    #   <% menu.with_item(
+    #     label: "Repository",
+    #     href: update_repo_grouping_path,
+    #     form_arguments: {
+    #       method: :post,
+    #       inputs: [{
+    #         name: "group_by",
+    #         value: "repository"
+    #       }, {
+    #         name: "some_other_field",
+    #         value: "some value",
+    #       }],
+    #     }
+    #   ) %>
+    # <% end %>
+    # ```
+    #
+    # ### Form arguments
+    #
+    # The following table summarizes the arguments allowed in the `form_arguments:` hash mentioned above.
+    #
+    # |Name             |Type          |Default|Description|
+    # |:----------------|:-------------|:------|:----------|
+    # |`method`         |`Symbol`      |`:get` |The HTTP request method to use to submit the form. One of `:get`, `:post`, `:patch`, `:put`, `:delete`, or `:head`|
+    # |`name`           |`String`      |`nil`  |The name of the field that will be sent to the server on submit.|
+    # |`value`          |`String`      |`nil`  |The value of the field that will be sent to the server on submit.|
+    # |`input_arguments`|`Hash`        |`{}`   |Additional key/value pairs to emit as HTML attributes on the `<input type="hidden">` element.|
+    # |`inputs`         |`Array<Hash>` |`[]`   |An array of hashes representing HTML `<input type="hidden">` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `<input>` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|
+    #
+    # The elements of the `inputs:` array will be emitted as HTML `<input type="hidden">` elements.
+    #
     # @accessibility
-    #   The action for the menu item needs to be on the element with `role="menuitem"`. Semantics are removed for everything nested inside of it. When a menu item is selected, the menu will close immediately.
+    #   The action for the menu item needs to be on the element with `role="menuitem"`. Semantics are removed for everything
+    #   nested inside of it. When a menu item is selected, the menu will close immediately.
     #
-    #   Additional information around the keyboard functionality and implementation can be found on the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
+    #   Additional information around the keyboard functionality and implementation can be found on the
+    #   [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
     class ActionMenu < Primer::Component
       status :alpha
 

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

@@ -23,6 +23,8 @@ module Primer
       # @param label [String] Label text displayed above the input.
       # @param hidden [Boolean] When set to `true`, visually hides the group.
       # @param caption [String] A string describing the field and what sorts of input it expects. Displayed below the group.
+      # @param invalid [Boolean] If set to `true`, the input will be marked as invalid. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect.
+      # @param validation_message [String] A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object.
       # @param label_arguments [Hash] Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag.
 
       # @!method check_box

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

@@ -9,10 +9,19 @@ module Primer
         status :alpha
         audited_at "2022-10-10"
 
+        DEFAULT_VARIANT = :medium
+        VARIANT_MAPPINGS = {
+          DEFAULT_VARIANT => "",
+          :large => "Overlay-header--large"
+        }.freeze
+        VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+        # @param id [String] The HTML element's ID value.
         # @param title [String] Describes the content of the dialog.
         # @param subtitle [String] Provides dditional context for the dialog, also setting the `aria-describedby` attribute.
         # @param show_divider [Boolean] Show a divider between the header and body.
         # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
+        # @param variant [Symbol] <%= one_of(Primer::Alpha::Dialog::Header::VARIANT_OPTIONS) %>
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(
           id:,
@@ -20,6 +29,7 @@ module Primer
           subtitle: nil,
           show_divider: false,
           visually_hide_title: false,
+          variant: DEFAULT_VARIANT,
           **system_arguments
         )
           @id = id
@@ -28,8 +38,10 @@ module Primer
           @visually_hide_title = visually_hide_title
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :div
+
           @system_arguments[:classes] = class_names(
             "Overlay-header",
+            VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
             { "Overlay-header--divided": show_divider },
             system_arguments[:classes]
           )

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

@@ -74,7 +74,7 @@ module Primer
       #
       # @param show_divider [Boolean] Show a divider between the header and body.
       # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Dialog::Header) %>.
       renders_one :header, lambda { |show_divider: false, visually_hide_title: @visually_hide_title, **system_arguments|
         Primer::Alpha::Dialog::Header.new(
           id: @id,

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

@@ -38,19 +38,16 @@ function clickHandler(event) {
             return;
         }
     }
-    // Find the top level dialog that is open.
-    const topLevelDialog = overlayStack[overlayStack.length - 1];
-    if (!topLevelDialog)
+    if (!overlayStack.length)
         return;
-    dialogId = button.getAttribute('data-close-dialog-id');
-    if (dialogId === topLevelDialog.id) {
-        overlayStack.pop();
-        topLevelDialog.close();
-    }
-    dialogId = button.getAttribute('data-submit-dialog-id');
-    if (dialogId === topLevelDialog.id) {
-        overlayStack.pop();
-        topLevelDialog.close(true);
+    dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
+    if (dialogId) {
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof ModalDialogElement) {
+            const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId);
+            overlayStack.splice(dialogIndex, 1);
+            dialog.close(button.hasAttribute('data-submit-dialog-id'));
+        }
     }
 }
 function keydownHandler(event) {
@@ -107,7 +104,7 @@ export class ModalDialogElement extends HTMLElement {
             if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
                 __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
             }
-            focusTrap(this, undefined, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+            focusTrap(this, this.querySelector('[autofocus]'), __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
             overlayStack.push(this);
         }
         else {

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

@@ -30,20 +30,17 @@ function clickHandler(event: Event) {
       return
     }
   }
-  // Find the top level dialog that is open.
-  const topLevelDialog = overlayStack[overlayStack.length - 1]
-  if (!topLevelDialog) return
 
-  dialogId = button.getAttribute('data-close-dialog-id')
-  if (dialogId === topLevelDialog.id) {
-    overlayStack.pop()
-    topLevelDialog.close()
-  }
+  if (!overlayStack.length) return
 
-  dialogId = button.getAttribute('data-submit-dialog-id')
-  if (dialogId === topLevelDialog.id) {
-    overlayStack.pop()
-    topLevelDialog.close(true)
+  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
+  if (dialogId) {
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof ModalDialogElement) {
+      const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId)
+      overlayStack.splice(dialogIndex, 1)
+      dialog.close(button.hasAttribute('data-submit-dialog-id'))
+    }
   }
 }
 
@@ -107,7 +104,7 @@ export class ModalDialogElement extends HTMLElement {
       if (this.#focusAbortController.signal.aborted) {
         this.#focusAbortController = new AbortController()
       }
-      focusTrap(this, undefined, this.#focusAbortController.signal)
+      focusTrap(this, this.querySelector('[autofocus]') as HTMLElement, this.#focusAbortController.signal)
       overlayStack.push(this)
     } else {
       if (!this.open) return

data/app/components/primer/alpha/nav_list/divider.rb

@@ -3,11 +3,8 @@
 module Primer
   module Alpha
     class NavList
-      # Separator with optional text rendered above groups or between individual items.
-      class Divider < Primer::Alpha::ActionList::Divider
-        def kind
-          :divider
-        end
+      class Divider < Beta::NavList::Divider
+        status :deprecated
       end
     end
   end