primer_view_components 0.9.0 → 0.11.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,19 +107,69 @@ 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
+    }
+
+    if (targetIsInvoker && eventIsActivation) {
+      this.#handleInvokerActivated(event)
+      this.#invokerBeingClicked = false
+      return
     }
 
     // Ignore events within dialogs within menus
@@ -123,84 +177,161 @@ export class ActionMenuElement extends HTMLElement {
       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()
+        }
+      })
+    }
+
+    // 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.#updateInput()
+    const ariaChecked = item.getAttribute('aria-checked')
+    const checked = ariaChecked !== 'true'
 
-      if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
-        // prevent buttons from being clicked twice
-        event.preventDefault()
+    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()
+      return
     }
   }
 
+  #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() {
     if (!this.dynamicLabel) return
     const invokerLabel = this.invokerLabel
@@ -260,18 +391,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/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/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

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

@@ -3,104 +3,8 @@
 module Primer
   module Alpha
     class NavList
-      # A logical grouping of navigation links with an optional heading.
-      #
-      # See <%= link_to_component(Primer::Alpha::NavList) %> for usage examples.
-      class Group < ActionList
-        # A special "show more" list item that appears at the bottom of the group. Clicking
-        # the item will fetch the next page of results from the URL passed in the `src` argument
-        # and append the resulting chunk of HTML to the group.
-        #
-        # @param src [String] The URL to query for additional pages of list items.
-        # @param pages [Integer] The total number of pages in the result set.
-        # @param component_klass [Class] A component class to use instead of the default `Primer::Alpha::NavList::Item` class.
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
-        renders_one :show_more_item, lambda { |src:, pages:, component_klass: NavList::Item, **system_arguments|
-          system_arguments[:classes] = class_names(
-            @item_classes,
-            system_arguments[:classes]
-          )
-          system_arguments[:tag] = :div
-          system_arguments[:id] ||= self.class.generate_id(base_name: "item")
-          system_arguments[:hidden] = true
-          system_arguments[:href] = "#"
-          system_arguments[:data] ||= {}
-          system_arguments[:data][:target] = "nav-list.showMoreItem"
-          system_arguments[:data][:action] = "click:nav-list#showMore"
-          system_arguments[:data][:current_page] = "1"
-          system_arguments[:data][:total_pages] = pages.to_s
-          system_arguments[:label_arguments] = {
-            **system_arguments[:label_arguments] || {},
-            color: :accent
-          }
-
-          system_arguments[:content_arguments] = {
-            **system_arguments[:content_arguments] || {},
-            tag: :button
-          }
-
-          system_arguments[:content_arguments][:data] = merge_data(
-            system_arguments[:content_arguments],
-            data: { list_id: id }
-          )
-
-          component_klass.new(list: self, src: src, **system_arguments)
-        }
-
-        # @private
-        def self.custom_element_name
-          Primer::Alpha::NavList.custom_element_name
-        end
-
-        # @param selected_item_id [Symbol] The ID of the currently selected item. Used internally.
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(selected_item_id: nil, **system_arguments)
-          @system_arguments = system_arguments
-          @selected_item_id = selected_item_id
-
-          super(**@system_arguments)
-        end
-
-        # Cause this group to show its list of sub items when rendered.
-        # :nocov:
-        def expand!
-          @expanded = true
-        end
-        # :nocov:
-
-        # @!parse
-        #   # Items.
-        #   #
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Item) %>.
-        #   renders_many :items
-
-        # @private
-        def build_item(component_klass: NavList::Item, **system_arguments)
-          super(
-            component_klass: component_klass,
-            selected_item_id: @selected_item_id,
-            **system_arguments
-          )
-        end
-
-        # @private
-        def build_avatar_item(component_klass: NavList::Item, **system_arguments)
-          super(
-            component_klass: component_klass,
-            selected_item_id: @selected_item_id,
-            **system_arguments
-          )
-        end
-
-        def kind
-          :group
-        end
-
-        def before_render
-          super
-
-          raise ArgumentError, "NavList groups are required to have headings" unless heading?
-        end
+      class Group < Beta::NavList::Group
+        status :deprecated
       end
     end
   end

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

@@ -3,33 +3,8 @@
 module Primer
   module Alpha
     class NavList
-      # The heading placed above a `NavList`'s items.
-      #
-      # See <%= link_to_component(Primer::Alpha::NavList) %> for usage examples.
-      class Heading < Primer::Component
-        attr_reader :title, :id, :heading_level, :system_arguments
-
-        # @param title [String] The text content of the heading.
-        # @param id [String] The value of the ID HTML attribute. Auto-generated by default.
-        # @param heading_level [Integer] The heading level, i.e. 2 for an `<h2>`, 3 for an `<h3>`, etc.
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(title:, id: self.class.generate_id, heading_level: 2, **system_arguments)
-          @title = title
-          @id = id
-          @heading_level = heading_level
-          @system_arguments = system_arguments
-        end
-
-        def call
-          render(
-            Primer::BaseComponent.new(
-              tag: :"h#{heading_level}",
-              id: id,
-              classes: "ActionListHeader",
-              **system_arguments
-            ).with_content(title)
-          )
-        end
+      class Heading < Beta::NavList::Heading
+        status :deprecated
       end
     end
   end