Upstream the SelectPanel component from dotcom

.changeset/tidy-kings-do.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Upstream the SelectPanel component from dotcom

.eslintrc.json

@@ -50,7 +50,8 @@
         "filenames/match-regex": 0,
         "import/no-namespace": 0,
         "no-shadow": 0,
-        "no-unused-vars": [
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
           "error",
           {
             "ignoreRestSiblings": true

app/components/primer/alpha/action_menu.rb

@@ -131,9 +131,7 @@ module Alpha
     #
     # ### JavaScript API
     #
-    # `ActionList`s render an `<action-list>` custom element that exposes behavior to the client. For all these methods,
-    # `itemId` refers to the value of the `item_id:` argument (see below) that is used to populate the `data-item-id` HTML
-    # attribute.
+    # `ActionMenu`s render an `<action-menu>` custom element that exposes behavior to the client.
     #
     # #### Query methods
     #
@@ -142,6 +140,15 @@ module Alpha
     # * `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.
     # * `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.
     #
+    # NOTE: Item IDs are special values provided by the user that are attached to `ActionMenu` items as the `data-item-id`
+    # HTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the list, eg:
+    #
+    # ```erb
+    # <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+    #   <% menu.with_item(item_id: "my-id") %>
+    # <% end %>
+    # ```
+    #
     # #### State methods
     #
     # * `showItem(item: Element)`: Shows the item, i.e. makes it visible.
@@ -156,9 +163,9 @@ module Alpha
     # The `<action-menu>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.
     #
     # ```typescript
-    # document.querySelector("action-menu").addEventListener("itemActivated", (event: ItemActivatedEvent) => {
-    #   event.item  // Element: the <li> item that was activated
-    #   event.checked  // boolean: whether or not the result of the activation checked the item
+    # document.querySelector("action-menu").addEventListener("itemActivated", (event: CustomEvent<ItemActivatedEvent>) => {
+    #   event.detail.item     // Element: the <li> item that was activated
+    #   event.detail.checked  // boolean: whether or not the result of the activation checked the item
     # })
     # ```
     class ActionMenu < Primer::Component

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

@@ -12,17 +12,6 @@ type SelectedItem = {
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
 
-export type ItemActivatedEvent = {
-  item: Element
-  checked: boolean
-}
-
-declare global {
-  interface HTMLElementEventMap {
-    itemActivated: CustomEvent<ItemActivatedEvent>
-  }
-}
-
 @controller
 export class ActionMenuElement extends HTMLElement {
   @target

app/components/primer/alpha/select_panel.html.erb

@@ -0,0 +1,100 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <dialog-helper>
+    <%= show_button %>
+    <%= render(@dialog) do %>
+      <%= render Primer::Alpha::Dialog::Header.new(id: "#{@panel_id}-dialog", title: @title) do |header| %>
+        <% if subtitle? %>
+          <% header.with_subtitle do %>
+            <%= subtitle %>
+          <% end %>
+        <% end %>
+        <% if show_filter? %>
+          <% header.with_filter do %>
+            <%= render(Primer::BaseComponent.new(
+              tag: :"remote-input",
+              aria: { owns: @body_id },
+              **(@fetch_strategy == :remote ? { src: @src } : {}),
+              data: {
+                target: "select-panel.remoteInput"
+              }
+            )) do %>
+              <%= render(Primer::Alpha::TextField.new(
+                id: "#{@panel_id}-filter",
+                name: :filter,
+                label: "Filter",
+                type: :search,
+                leading_visual: { icon: :search },
+                leading_spinner: true,
+                autofocus: true,
+                visually_hide_label: true,
+                data: { target: "select-panel.filterInputTextField" },
+                label_arguments: {
+                  position: :absolute
+                }
+              )) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <div data-target="select-panel.errorBannerElement" hidden>
+        <%= render Primer::Alpha::Banner.new(scheme: :danger, full: true, mt: 2) do %>
+          <% if error_content? %>
+            <%= error_content %>
+          <% else %>
+            <h2 class="f5">Sorry, something went wrong.</h2>
+          <% end %>
+        <% end %>
+      </div>
+      <%= render Primer::Alpha::Dialog::Body.new(mt: 2, p: 0) do %>
+        <focus-group direction="vertical" mnemonics retain>
+          <div class="sr-only" aria-live="polite" aria-atomic="true" data-target="select-panel.ariaLiveContainer"></div>
+          <%= render(Primer::BaseComponent.new(
+            tag: :div,
+            data: {
+              fetch_strategy: @fetch_strategy,
+              target: "select-panel.list"
+            }
+          )) do %>
+            <div id="<%= @body_id %>">
+              <% if @src.present? %>
+                <%= render(Primer::ConditionalWrapper.new(condition: @fetch_strategy == :eventually_local, tag: "include-fragment", data: { target: "select-panel.includeFragment" }, src: @src, loading: preload? ? "eager" : "lazy", accept: "text/fragment+html")) do %>
+                  <%= render(Primer::BaseComponent.new(
+                    tag: :div,
+                    id: "#{@panel_id}-list",
+                    mt: 2,
+                    mb: 2,
+                    aria: { disabled: true, busy: true },
+                    display: :flex,
+                    align_items: :center,
+                    justify_content: :center,
+                    text_align: :center
+                  )) do %>
+                    <div data-hide-on-error>
+                      <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }, data: { target: "select-panel.bodySpinner" }) %>
+                    </div>
+                    <div data-show-on-error hidden data-target="select-panel.fragmentErrorElement">
+                      <% if preload_error_content? %>
+                        <%= preload_error_content %>
+                      <% else %>
+                        <div class="pt-2 pb-2">
+                          <%= render Primer::Beta::Octicon.new(icon: :alert, color: :danger) %>
+                          <h2 class="f5">Sorry, something went wrong.</h2>
+                        </div>
+                      <% end %>
+                    </div>
+                  <% end %>
+                <% end %>
+              <% else %>
+                <%= render(@list) %>
+              <% end %>
+            </div>
+            <div data-target="select-panel.noResults" class="color-border-muted text-center" hidden>
+              <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
+            </div>
+          <% end %>
+        </focus-group>
+      <% end %>
+      <%= footer %>
+    <% end %>
+  </dialog-helper>
+<% end %>