primer_view_components 0.1.4 → 0.1.6

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

@@ -0,0 +1,165 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
+import '@github/include-fragment-element';
+const popoverSelector = (() => {
+    try {
+        document.querySelector(':open');
+        return ':open';
+    }
+    catch (_a) {
+        return '.\\:open';
+    }
+})();
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
+export class ActionMenuElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionMenuElement_instances.add(this);
+        _ActionMenuElement_abortController.set(this, void 0);
+        _ActionMenuElement_originalLabel.set(this, '');
+    }
+    get selectVariant() {
+        return this.getAttribute('data-select-variant');
+    }
+    set selectVariant(variant) {
+        if (variant) {
+            this.setAttribute('data-select-variant', variant);
+        }
+        else {
+            this.removeAttribute('variant');
+        }
+    }
+    get dynamicLabelPrefix() {
+        const prefix = this.getAttribute('data-dynamic-label-prefix');
+        if (!prefix)
+            return '';
+        return `${prefix}:`;
+    }
+    set dynamicLabelPrefix(value) {
+        this.setAttribute('data-dynamic-label', value);
+    }
+    get dynamicLabel() {
+        return this.hasAttribute('data-dynamic-label');
+    }
+    set dynamicLabel(value) {
+        this.toggleAttribute('data-dynamic-label', value);
+    }
+    get popoverElement() {
+        return this.querySelector('[popover]');
+    }
+    get invokerElement() {
+        var _a;
+        const id = (_a = this.querySelector('[role=menu]')) === null || _a === void 0 ? void 0 : _a.id;
+        if (!id)
+            return null;
+        for (const el of this.querySelectorAll(`[aria-controls]`)) {
+            if (el.getAttribute('aria-controls') === id)
+                return el;
+        }
+        return null;
+    }
+    get invokerLabel() {
+        if (!this.invokerElement)
+            return null;
+        return this.invokerElement.querySelector('.Button-label');
+    }
+    connectedCallback() {
+        const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
+        this.addEventListener('keydown', this, { signal });
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('mouseover', this, { signal });
+        this.addEventListener('focusout', this, { signal });
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
+    }
+    handleEvent(event) {
+        var _a, _b, _c, _d;
+        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event)) {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
+                event.preventDefault();
+                (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+                return;
+            }
+        }
+        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(popoverSelector)))
+            return;
+        if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
+            (_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.hidePopover();
+        }
+        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+            const item = (_d = event.target.closest(menuItemSelectors.join(','))) === null || _d === void 0 ? void 0 : _d.closest('li');
+            if (!item)
+                return;
+            const ariaChecked = item.getAttribute('aria-checked');
+            const checked = ariaChecked !== 'true';
+            item.setAttribute('aria-checked', `${checked}`);
+            if (this.selectVariant === 'single') {
+                const selector = menuItemSelectors.map(s => `li[aria-checked] ${s}`).join(',');
+                for (const checkedItemContent of this.querySelectorAll(selector)) {
+                    const checkedItem = checkedItemContent.closest('li');
+                    if (checkedItem !== item) {
+                        checkedItem.setAttribute('aria-checked', 'false');
+                    }
+                }
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
+            }
+            if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+                // prevent buttons from being clicked twice
+                event.preventDefault();
+            }
+            // 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(() => { var _a; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
+            }
+        }
+    }
+}
+_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+    if (!this.dynamicLabel)
+        return;
+    const invokerLabel = this.invokerLabel;
+    if (!invokerLabel)
+        return;
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    if (itemLabel && this.dynamicLabel) {
+        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
+        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 = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
+    }
+}, _ActionMenuElement_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter');
+}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
+    return this.querySelector(menuItemSelectors.join(','));
+};
+if (!window.customElements.get('action-menu')) {
+    window.ActionMenuElement = ActionMenuElement;
+    window.customElements.define('action-menu', ActionMenuElement);
+}

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

@@ -0,0 +1,168 @@
+import '@github/include-fragment-element'
+
+const popoverSelector = (() => {
+  try {
+    document.querySelector(':open')
+    return ':open'
+  } catch {
+    return '.\\:open'
+  }
+})()
+
+type SelectVariant = 'single' | 'multiple' | null
+
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+
+export class ActionMenuElement extends HTMLElement {
+  #abortController: AbortController
+  #originalLabel = ''
+
+  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.querySelector<HTMLElement>('[popover]')
+  }
+
+  get invokerElement(): HTMLElement | 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 HTMLElement
+    }
+    return null
+  }
+
+  get invokerLabel(): HTMLElement | null {
+    if (!this.invokerElement) return null
+    return this.invokerElement.querySelector('.Button-label')
+  }
+
+  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()
+  }
+
+  disconnectedCallback() {
+    this.#abortController.abort()
+  }
+
+  handleEvent(event: Event) {
+    if (event.target === this.invokerElement && this.#isEnterKeydown(event)) {
+      if (this.#firstItem) {
+        event.preventDefault()
+        this.popoverElement?.showPopover()
+        this.#firstItem.focus()
+        return
+      }
+    }
+
+    if (!this.popoverElement?.matches(popoverSelector)) return
+
+    if (event.type === 'focusout' && !this.contains((event as FocusEvent).relatedTarget as Node)) {
+      this.popoverElement?.hidePopover()
+    } else if (this.#isEnterKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
+      const item = (event.target as Element).closest(menuItemSelectors.join(','))?.closest('li')
+      if (!item) return
+      const ariaChecked = item.getAttribute('aria-checked')
+      const checked = ariaChecked !== 'true'
+      item.setAttribute('aria-checked', `${checked}`)
+      if (this.selectVariant === 'single') {
+        const selector = menuItemSelectors.map(s => `li[aria-checked] ${s}`).join(',')
+        for (const checkedItemContent of this.querySelectorAll(selector)) {
+          const checkedItem = checkedItemContent.closest('li')!
+          if (checkedItem !== item) {
+            checkedItem.setAttribute('aria-checked', 'false')
+          }
+        }
+        this.#setDynamicLabel()
+      }
+      if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+        // prevent buttons from being clicked twice
+        event.preventDefault()
+      }
+      // 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(() => this.popoverElement?.hidePopover())
+      }
+    }
+  }
+
+  #setDynamicLabel() {
+    if (!this.dynamicLabel) return
+    const invokerLabel = this.invokerLabel
+    if (!invokerLabel) return
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
+    if (itemLabel && this.dynamicLabel) {
+      this.#originalLabel ||= invokerLabel.textContent || ''
+      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
+    }
+  }
+
+  #isEnterKeydown(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === 'Enter'
+    )
+  }
+
+  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,91 @@
+# 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, :button, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
+
+        # Adds a new item to the list.
+        #
+        # @param system_arguments [Hash] The same arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+        def with_item(**system_arguments, &block)
+          content_arguments = system_arguments.delete(:content_arguments) || {}
+
+          content_arguments[:tag] =
+            if system_arguments[:tag] && ITEM_TAG_OPTIONS.include?(system_arguments[:tag])
+              system_arguments[:tag]
+            elsif system_arguments[:href] && !system_arguments[:disabled]
+              :a
+            else
+              DEFAULT_ITEM_TAG
+            end
+
+          # 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]
+
+          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
+
+          super(**system_arguments, content_arguments: content_arguments) do |item|
+            # 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.
+            if block&.source_location
+              block_context = block.binding.receiver
+
+              if block_context.class < ActionView::Base
+                block_context.capture(item, &block)
+              else
+                capture(item, &block)
+              end
+            end
+          end
+        end
+
+        # @param menu_id [String] ID of the parent menu.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        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
+      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 %>