openproject-primer_view_components 0.68.0 → 0.69.0

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

@@ -0,0 +1,67 @@
+import AnchoredPositionElement from '../../anchored_position'
+import {FocusKeys, focusTrap, focusZone} from '@primer/behaviors'
+import {ActionMenuElement} from './action_menu_element'
+
+type StackEntry = {
+  element: AnchoredPositionElement
+  abortController?: AbortController
+}
+
+export class ActionMenuFocusZoneStack {
+  #stack: StackEntry[]
+
+  constructor() {
+    this.#stack = []
+  }
+
+  get current(): StackEntry | undefined {
+    return this.#stack[this.#stack.length - 1]
+  }
+
+  push(next: AnchoredPositionElement, options: {trapFocus: boolean} = {trapFocus: true}) {
+    const {trapFocus} = options
+    this.#stack.push({element: next, abortController: this.#setupFocusZone(next, trapFocus)})
+  }
+
+  pop(target?: AnchoredPositionElement) {
+    if (target) {
+      while (this.#stack.length > 0 && this.current?.element !== target) {
+        const entry = this.#stack.pop()
+        entry?.abortController?.abort()
+      }
+    }
+
+    const entry = this.#stack.pop()
+    entry?.abortController?.abort()
+  }
+
+  #setupFocusZone(containerEl: AnchoredPositionElement, trapFocus: boolean): AbortController | undefined {
+    const focusZoneAbortController = focusZone(containerEl, {
+      bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Backspace,
+      focusOutBehavior: 'wrap',
+
+      focusableElementFilter: (element: HTMLElement): boolean => {
+        return this.elementIsMenuItem(element) && element.closest('anchored-position') === containerEl
+      },
+    })
+
+    if (trapFocus) {
+      const {signal: focusZoneSignal} = focusZoneAbortController
+      return focusTrap(containerEl, undefined, focusZoneSignal)
+    } else {
+      return focusZoneAbortController
+    }
+  }
+
+  elementIsMenuItem(element: HTMLElement): boolean {
+    return this.#validItemRoles.includes(element.getAttribute('role') || '')
+  }
+
+  get #validItemRoles(): string[] {
+    return ActionMenuElement.validItemRoles
+  }
+
+  get isEmpty(): boolean {
+    return this.#stack.length === 0
+  }
+}

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

@@ -11,7 +11,9 @@ module Primer
 
         attr_reader :items
 
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
+        delegate :acts_as_form_input?, to: :@list
+
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::ListWrapper) %>
         def initialize(**system_arguments)
           @items = []
           @has_group = false

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

@@ -6,6 +6,37 @@ module Primer
       # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
       # used as a standalone component.
       class ListWrapper < Primer::Alpha::ActionList
+        # @!parse
+        #   # Adds an item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_item(**system_arguments)
+        #   end
+        #
+        #   # Adds an avatar item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_avatar_item(**system_arguments)
+        #   end
+        #
+        #   # Adds a divider to the list. Dividers visually separate items.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+        #   def with_divider(**system_arguments)
+        #   end
+        #
+        #   # Adds a group to the menu. Groups are a logical set of items with a header.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::Group) %>.
+        #   def with_group(**system_arguments)
+        #   end
+        #
+        #   # Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.
+        #   #
+        #   # @return [Array<ViewComponent::Slot>]
+        #   def items
+        #   end
+
         add_polymorphic_slot_type(
           slot_name: :items,
           type: :group,

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

@@ -0,0 +1,24 @@
+<%= render(@overlay) do |overlay| %>
+  <% overlay.with_body(padding: :none) do %>
+    <% if @src.present? %>
+      <%= render(Primer::Alpha::IncludeFragment.new(src: @src, loading: preload? ? :eager : :lazy, "data-target": "action-menu.includeFragment")) do %>
+        <%= 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 %>
+      <% end %>
+    <% else %>
+      <%= render(@list) %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,136 @@
+# typed: false
+# 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 Menu < Primer::Component
+        DEFAULT_PRELOAD = false
+
+        DEFAULT_SELECT_VARIANT = :none
+        SELECT_VARIANT_OPTIONS = [
+          :single,
+          :multiple,
+          DEFAULT_SELECT_VARIANT
+        ].freeze
+
+        attr_reader :menu_id, :anchor_side, :anchor_align, :list, :preload, :src, :select_variant, :form_arguments
+
+        delegate :with_item, :with_avatar_item, :with_divider, :with_group, :items, :acts_as_form_input?, to: :@list
+
+        alias preload? preload
+
+        # @!parse
+        #   # Adds an item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_item(**system_arguments)
+        #   end
+        #
+        #   # Adds an avatar item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_avatar_item(**system_arguments)
+        #   end
+        #
+        #   # Adds a divider to the list. Dividers visually separate items.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+        #   def with_divider(**system_arguments)
+        #   end
+        #
+        #   # Adds a group to the menu. Groups are a logical set of items with a header.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::Group) %>.
+        #   def with_group(**system_arguments)
+        #   end
+        #
+        #   # Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.
+        #   #
+        #   # @return [Array<ViewComponent::Slot>]
+        #   def items
+        #   end
+
+        # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
+        # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+        # @param menu_id [String] Id of the menu.
+        # @param size [Symbol] <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>
+        # @param src [String] Used with an `include-fragment` element to load menu content from the given source URL.
+        # @param preload [Boolean] When true, and src is present, loads the `include-fragment` on trigger hover.
+        # @param select_variant [Symbol] <%= one_of(Primer::Alpha::ActionMenu::Menu::SELECT_VARIANT_OPTIONS) %>
+        # @param form_arguments [Hash] Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
+        # @param overlay_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::Overlay) %>
+        # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionMenu::List) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
+        def initialize(
+          anchor_align:,
+          anchor_side:,
+          menu_id: self.class.generate_id,
+          size: Primer::Alpha::Overlay::DEFAULT_SIZE,
+          src: nil,
+          preload: DEFAULT_PRELOAD,
+          select_variant: DEFAULT_SELECT_VARIANT,
+          form_arguments: {},
+          overlay_arguments: {},
+          list_arguments: {},
+          **system_arguments
+        )
+          @menu_id = menu_id
+          @src = src
+          @preload = fetch_or_fallback_boolean(preload, DEFAULT_PRELOAD)
+          @anchor_side = anchor_side
+          @anchor_align = anchor_align
+
+          @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+          @form_arguments = form_arguments
+
+          overlay_arguments[:data] = merge_data(
+            overlay_arguments, data: {
+              target: "action-menu.overlay"
+            }
+          )
+
+          @overlay = Primer::Alpha::Overlay.new(
+            id: "#{@menu_id}-overlay",
+            title: "Menu",
+            visually_hide_title: true,
+            anchor_align: anchor_align,
+            anchor_side: anchor_side,
+            size: size,
+            **overlay_arguments
+          )
+
+          @list = Primer::Alpha::ActionMenu::List.new(
+            menu_id: @menu_id,
+            select_variant: select_variant,
+            form_arguments: form_arguments,
+            **list_arguments
+          )
+
+          system_arguments # rubocop:disable Lint/Void
+        end
+
+        # Adds a sub-menu to the menu.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::SubMenuItem) %>.
+        def with_sub_menu_item(**system_arguments, &block)
+          @list.with_item(
+            component_klass: SubMenuItem,
+            select_variant: select_variant,
+            form_arguments: form_arguments,
+            **system_arguments,
+            &block
+          )
+        end
+
+        private
+
+        def before_render
+          raise ArgumentError, "`items` cannot be set when `src` is specified" if src.present? && items.any?
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,86 @@
+# typed: false
+# 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 PrimaryMenu < Menu
+        DEFAULT_ANCHOR_ALIGN = :start
+        DEFAULT_ANCHOR_SIDE = :outside_bottom
+
+        attr_reader :dynamic_label, :dynamic_label_prefix
+
+        # @!parse
+        #   # Adds an item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_item(**system_arguments)
+        #   end
+        #
+        #   # Adds an avatar item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_avatar_item(**system_arguments)
+        #   end
+        #
+        #   # Adds a divider to the list. Dividers visually separate items.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+        #   def with_divider(**system_arguments)
+        #   end
+        #
+        #   # Adds a group to the menu. Groups are a logical set of items with a header.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::Group) %>.
+        #   def with_group(**system_arguments)
+        #   end
+        #
+        #   # Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.
+        #   #
+        #   # @return [Array<ViewComponent::Slot>]
+        #   def items
+        #   end
+
+        # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
+        # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+        # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button.
+        # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
+        def initialize(
+          anchor_align: DEFAULT_ANCHOR_ALIGN,
+          anchor_side: DEFAULT_ANCHOR_SIDE,
+          dynamic_label: false,
+          dynamic_label_prefix: nil,
+          **system_arguments
+        )
+          @dynamic_label = dynamic_label
+          @dynamic_label_prefix = dynamic_label_prefix
+
+          system_arguments[:list_arguments] ||= {}
+
+          system_arguments[:list_arguments][:data] = merge_data(
+            system_arguments[:list_arguments],
+            { data: { target: "action-menu.list" } }
+          )
+
+          super(
+            anchor_align: anchor_align,
+            anchor_side: anchor_side,
+            **system_arguments
+          )
+        end
+
+        # Button to activate the menu.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
+        def with_show_button(**system_arguments, &block)
+          @overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list") do |button|
+            evaluate_block(button, &block)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,74 @@
+# typed: false
+# 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 SubMenu < Menu
+        DEFAULT_ANCHOR_ALIGN = :start
+        DEFAULT_ANCHOR_SIDE = :outside_right
+
+        # @!parse
+        #   # Adds an item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_item(**system_arguments)
+        #   end
+        #
+        #   # Adds an avatar item to the menu.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+        #   def with_avatar_item(**system_arguments)
+        #   end
+        #
+        #   # Adds a divider to the list. Dividers visually separate items.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+        #   def with_divider(**system_arguments)
+        #   end
+        #
+        #   # Adds a group to the menu. Groups are a logical set of items with a header.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::Group) %>.
+        #   def with_group(**system_arguments)
+        #   end
+        #
+        #   # Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.
+        #   #
+        #   # @return [Array<ViewComponent::Slot>]
+        #   def items
+        #   end
+
+        # @param menu_id [String] Id of the menu.
+        # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
+        # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+        # @param overlay_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::Overlay) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
+        def initialize(
+          menu_id:,
+          anchor_align: DEFAULT_ANCHOR_ALIGN,
+          anchor_side: DEFAULT_ANCHOR_SIDE,
+          overlay_arguments: {},
+          **system_arguments
+        )
+          overlay_arguments[:anchor] = "#{menu_id}-button"
+          super
+        end
+
+        # Adds a sub-menu to the menu.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::SubMenuItem) %>.
+        def with_sub_menu_item(**system_arguments, &block)
+          super(
+            anchor_align: anchor_align, # carry over to sub-menus
+            anchor_side: anchor_side, # carry over to sub-menus
+            **system_arguments,
+            &block
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<% with_trailing_visual_icon(icon: :"chevron-right") %>
+
+<%= render_parent %>
+
+<%= render(@sub_menu) %>

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

@@ -0,0 +1,54 @@
+# 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 SubMenuItem < ::Primer::Alpha::ActionList::Item
+        def initialize(content_arguments: {}, form_arguments: {}, **system_arguments)
+          # We extract form_arguments from system_arguments here to avoid passing them to the
+          # ActionList::Item base class or to the SubMenu instance. Doing so prevents a form
+          # input from being emitted for sub-menu items, which prevents an extra empty value
+          # from being sent to the server on form submit.
+          @menu_id = self.class.generate_id
+          @sub_menu = SubMenu.allocate
+          system_arguments = @sub_menu.send(:initialize, **system_arguments, menu_id: @menu_id)
+          system_arguments[:id] = "#{@menu_id}-button"
+
+          @form_arguments = form_arguments
+
+          content_arguments[:tag] = :button
+          content_arguments[:popovertarget] = "#{@sub_menu.menu_id}-overlay"
+
+          content_arguments[:aria] = merge_aria(
+            content_arguments, {
+              aria: {
+                controls: "#{@sub_menu.menu_id}-list",
+                haspopup: true
+              }
+            }
+          )
+
+          super
+        end
+
+        def with_item(**system_arguments, &block)
+          @sub_menu.with_item(form_arguments: @form_arguments, **system_arguments, &block)
+        end
+
+        def with_avatar_item(**system_arguments, &block)
+          @sub_menu.with_avatar_item(form_arguments: @form_arguments, **system_arguments, &block)
+        end
+
+        def with_sub_menu_item(**system_arguments, &block)
+          @sub_menu.with_sub_menu_item(form_arguments: @form_arguments, **system_arguments, &block)
+        end
+
+        def with_group(**system_arguments, &block)
+          @sub_menu.with_group(form_arguments: @form_arguments, **system_arguments, &block)
+        end
+      end
+    end
+  end
+end

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

@@ -1,28 +1,3 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <focus-group direction="vertical" mnemonics retain>
-    <%= render(@overlay) do |overlay| %>
-      <% overlay.with_body(padding: :none) do %>
-        <% if @src.present? %>
-          <%= render(Primer::Alpha::IncludeFragment.new(src: @src, loading: preload? ? :eager : :lazy, "data-target": "action-menu.includeFragment")) do %>
-            <%= 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 %>
-          <% end %>
-        <% else %>
-          <%= render(@list) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  </focus-group>
+  <%= render(@primary_menu) %>
 <% end %>