openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,252 @@
+import {controller, target} from '@github/catalyst'
+import '@oddbird/popover-polyfill'
+import type {IncludeFragmentElement} from '@github/include-fragment-element'
+
+type SelectVariant = 'none' | 'single' | 'multiple' | null
+type SelectedItem = {
+  label: string | null | undefined
+  value: string | null | undefined
+  element: Element
+}
+
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+
+@controller
+export class ActionMenuElement extends HTMLElement {
+  @target includeFragment: IncludeFragmentElement
+
+  #abortController: AbortController
+  #originalLabel = ''
+  #inputName = ''
+
+  get selectVariant(): SelectVariant {
+    return this.getAttribute('data-select-variant') as SelectVariant
+  }
+
+  set selectVariant(variant: SelectVariant) {
+    if (variant) {
+      this.setAttribute('data-select-variant', variant)
+    } else {
+      this.removeAttribute('variant')
+    }
+  }
+
+  get dynamicLabelPrefix(): string {
+    const prefix = this.getAttribute('data-dynamic-label-prefix')
+    if (!prefix) return ''
+    return `${prefix}:`
+  }
+
+  set dynamicLabelPrefix(value: string) {
+    this.setAttribute('data-dynamic-label', value)
+  }
+
+  get dynamicLabel(): boolean {
+    return this.hasAttribute('data-dynamic-label')
+  }
+
+  set dynamicLabel(value: boolean) {
+    this.toggleAttribute('data-dynamic-label', value)
+  }
+
+  get popoverElement(): HTMLElement | null {
+    return this.invokerElement?.popoverTargetElement || null
+  }
+
+  get invokerElement(): HTMLButtonElement | null {
+    const id = this.querySelector('[role=menu]')?.id
+    if (!id) return null
+    for (const el of this.querySelectorAll(`[aria-controls]`)) {
+      if (el.getAttribute('aria-controls') === id) return el as HTMLButtonElement
+    }
+    return null
+  }
+
+  get invokerLabel(): HTMLElement | null {
+    if (!this.invokerElement) return null
+    return this.invokerElement.querySelector('.Button-label')
+  }
+
+  get selectedItems(): SelectedItem[] {
+    const selectedItems = this.querySelectorAll('[aria-checked=true]')
+    const results: SelectedItem[] = []
+
+    for (const selectedItem of selectedItems) {
+      const labelEl = selectedItem.querySelector('.ActionListItem-label')
+
+      results.push({
+        label: labelEl?.textContent,
+        value: selectedItem?.getAttribute('data-value'),
+        element: selectedItem
+      })
+    }
+
+    return results
+  }
+
+  connectedCallback() {
+    const {signal} = (this.#abortController = new AbortController())
+    this.addEventListener('keydown', this, {signal})
+    this.addEventListener('click', this, {signal})
+    this.addEventListener('mouseover', this, {signal})
+    this.addEventListener('focusout', this, {signal})
+    this.#setDynamicLabel()
+    this.#updateInput()
+
+    if (this.includeFragment) {
+      this.includeFragment.addEventListener('include-fragment-replaced', this, {signal})
+    }
+  }
+
+  disconnectedCallback() {
+    this.#abortController.abort()
+  }
+
+  handleEvent(event: Event) {
+    if (event.target === this.invokerElement && this.#isActivationKeydown(event)) {
+      if (this.#firstItem) {
+        event.preventDefault()
+        this.popoverElement?.showPopover()
+        this.#firstItem.focus()
+        return
+      }
+    }
+
+    if (!this.popoverElement?.matches(':popover-open')) return
+
+    if (event.type === 'include-fragment-replaced') {
+      if (this.#firstItem) this.#firstItem.focus()
+    } else if (this.#isActivationKeydown(event) || (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()
+          }
+        })
+      }
+
+      // 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
+
+      const item = (event.target as Element).closest(menuItemSelectors.join(','))
+      if (!item) return
+      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()
+
+      if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+        // prevent buttons from being clicked twice
+        event.preventDefault()
+      }
+    }
+  }
+
+  #setDynamicLabel() {
+    if (!this.dynamicLabel) return
+    const invokerLabel = this.invokerLabel
+    if (!invokerLabel) return
+    this.#originalLabel ||= invokerLabel.textContent || ''
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
+    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 || ''
+      invokerLabel.replaceChildren(prefixSpan, contentSpan)
+    } else {
+      invokerLabel.textContent = this.#originalLabel
+    }
+  }
+
+  #updateInput() {
+    if (this.selectVariant === 'single') {
+      const input = this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement | null
+      if (!input) return
+
+      const selectedItem = this.selectedItems[0]
+
+      if (selectedItem) {
+        input.value = (selectedItem.value || selectedItem.label || '').trim()
+        input.removeAttribute('disabled')
+      } else {
+        input.setAttribute('disabled', 'disabled')
+      }
+    } else if (this.selectVariant !== 'none') {
+      // multiple select variant
+      const inputList = this.querySelector('[data-list-inputs=true]')
+      if (!inputList) return
+
+      const inputs = inputList.querySelectorAll('input')
+
+      if (inputs.length > 0) {
+        this.#inputName ||= (inputs[0] as HTMLInputElement).name
+      }
+
+      for (const selectedItem of this.selectedItems) {
+        const newInput = document.createElement('input')
+        newInput.setAttribute('data-list-input', 'true')
+        newInput.type = 'hidden'
+        newInput.autocomplete = 'off'
+        newInput.name = this.#inputName
+        newInput.value = (selectedItem.value || selectedItem.label || '').trim()
+
+        inputList.append(newInput)
+      }
+
+      for (const input of inputs) {
+        input.remove()
+      }
+    }
+  }
+
+  #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(','))
+  }
+}
+
+if (!window.customElements.get('action-menu')) {
+  window.ActionMenuElement = ActionMenuElement
+  window.customElements.define('action-menu', ActionMenuElement)
+}
+
+declare global {
+  interface Window {
+    ActionMenuElement: typeof ActionMenuElement
+  }
+}

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

@@ -0,0 +1,123 @@
+# typed: true
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionMenu
+      # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
+      # used as a standalone component.
+      class List < Primer::Alpha::ActionList
+        DEFAULT_ITEM_TAG = :button
+        ITEM_TAG_OPTIONS = [:a, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
+
+        # Adds a new item to the list.
+        #
+        # @param data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
+        # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+        def with_item(data: {}, **system_arguments, &block)
+          system_arguments = organize_arguments(data: data, **system_arguments)
+
+          super(**system_arguments) do |item|
+            evaluate_block(item, &block)
+          end
+        end
+
+        # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
+        #
+        # @param src [String] The source url of the avatar image.
+        # @param username [String] The username associated with the avatar.
+        # @param full_name [String] Optional. The user's full name.
+        # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+        # @param data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
+        # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
+        # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+        def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, data: {}, avatar_arguments: {}, **system_arguments, &block)
+          system_arguments = organize_arguments(data: data, **system_arguments)
+
+          super(src: src, username: username, full_name: full_name, full_name_scheme: full_name_scheme, avatar_arguments: avatar_arguments, **system_arguments) do |item|
+            evaluate_block(item, &block)
+          end
+        end
+
+        # @param menu_id [String] ID of the parent menu.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
+        def initialize(menu_id:, **system_arguments, &block)
+          @menu_id = menu_id
+
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { labelledby: "#{@menu_id}-button" } }
+          )
+
+          system_arguments[:role] = :menu
+          system_arguments[:scheme] = :inset
+          system_arguments[:id] = "#{@menu_id}-list"
+
+          super(**system_arguments, &block)
+        end
+
+        private
+
+        def evaluate_block(*args, &block)
+          # Prevent double renders by using the capture method on the component
+          # that originally received the block.
+          #
+          # Handle blocks that originate from C code such as `&:method` by checking
+          # source_location. Such blocks don't allow access to their receiver.
+          return unless block&.source_location
+
+          block_context = block.binding.receiver
+
+          if block_context.class < ActionView::Base
+            block_context.capture(*args, &block)
+          else
+            capture(*args, &block)
+          end
+        end
+
+        def organize_arguments(data: {}, **system_arguments)
+          content_arguments = system_arguments.delete(:content_arguments) || {}
+
+          # rubocop:disable Style/IfUnlessModifier
+          if system_arguments[:tag] && ITEM_TAG_OPTIONS.include?(system_arguments[:tag])
+            content_arguments[:tag] = system_arguments[:tag]
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
+          # disallow setting item's tag
+          system_arguments.delete(:tag)
+
+          # rubocop:disable Style/IfUnlessModifier
+          if content_arguments[:tag] == :a
+            content_arguments[:href] ||= system_arguments.delete(:href)
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
+          content_arguments[:tabindex] = -1
+          system_arguments[:autofocus] = "" if system_arguments[:autofocus]
+
+          content_arguments[:data] = merge_data(
+            content_arguments,
+            { data: { value: data.delete(:value) || system_arguments.delete(:"data-value") } }
+          )
+
+          if system_arguments[:disabled]
+            content_arguments[:aria] = merge_aria(
+              content_arguments,
+              { aria: { disabled: true } }
+            )
+
+            system_arguments[:aria] = merge_aria(
+              system_arguments,
+              { aria: { disabled: true } }
+            )
+
+            content_arguments[:disabled] = "" if content_arguments[:tag] == :button
+          end
+
+          { data: data, **system_arguments, content_arguments: content_arguments }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <focus-group direction="vertical" mnemonics retain>
+    <%= render(@overlay) do |overlay| %>
+      <% if @src.present? %>
+        <include-fragment src="<%= @src %>" loading="<%= preload? ? "eager" : "lazy" %>" data-target="action-menu.includeFragment">
+          <%= render(Primer::Alpha::ActionMenu::List.new(id: "#{@menu_id}-list", menu_id: @menu_id)) do |list| %>
+            <% list.with_item(
+              aria: { disabled: true },
+              content_arguments: {
+                display: :flex,
+                align_items: :center,
+                justify_content: :center,
+                text_align: :center,
+                autofocus: true
+              }
+            ) do %>
+              <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }) %>
+            <% end %>
+          <% end %>
+        </include-fragment>
+      <% else %>
+        <%= render(@list) %>
+      <% end %>
+    <% end %>
+  </focus-group>
+<% end %>