primer_view_components 0.38.0 → 0.39.0

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

@@ -1,4 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if required_form_arguments_given? %>
+    <span data-select-panel-inputs="true">
+        <%= @form_builder.hidden_field(@input_name, multiple: multi_select?, skip_default_ids: true, value: @value) %>
+    </span>
+  <% end %>
   <dialog-helper>
     <%= show_button %>
     <%= render(@dialog) do %>

data/app/components/primer/alpha/select_panel.rb

@@ -152,27 +152,6 @@ module Primer
     #   end
     # end
     # ```
-    #
-    # If items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call
-    # happens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the
-    # view that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:
-    #
-    # ```erb
-    # <% builder = ActionView::Helpers::FormBuilder.new(
-    #   "address",  # the name of the model, used to wrap input names, eg 'address[country]'
-    #   nil,        # object (eg. the Address instance, which we can omit)
-    #   self,       # template
-    #   {}          # options
-    # ) %>
-    # <%= render(Primer::Alpha::SelectPanel::ItemList.new(
-    #   form_arguments: { builder: builder, name: "country" }
-    # )) do |list| %>
-    #   <% countries.each do |country| %>
-    #     <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>
-    #   <% end %>
-    # <% end %>
-    # ```
-    #
     # ### JavaScript API
     #
     # `SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.
@@ -375,7 +354,9 @@ module Primer
       # @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button.
       # @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix.
       # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
-      # @param form_arguments [Hash] Form arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
+      # @param form_arguments [Hash] Form arguments
+
+      # @param use_experimental_non_local_form [Boolean] A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values.
       # @param show_filter [Boolean] Whether or not to show the filter input.
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
@@ -397,6 +378,7 @@ module Primer
         dynamic_label_prefix: nil,
         dynamic_aria_label_prefix: nil,
         body_id: nil,
+        use_experimental_non_local_form: false,
         list_arguments: {},
         form_arguments: {},
         show_filter: true,
@@ -429,6 +411,15 @@ module Primer
         @dynamic_aria_label_prefix = dynamic_aria_label_prefix
         @loading_label = loading_label
         @loading_description_id = nil
+
+        if use_experimental_non_local_form
+          @form_builder = form_arguments[:builder]
+          @value = form_arguments[:value]
+          @input_name = form_arguments[:name]
+        end
+
+        @list_form_arguments = use_experimental_non_local_form ? {} : form_arguments
+
         if loading_description.present?
           @loading_description_id = "#{@panel_id}-loading-description"
         end
@@ -471,7 +462,7 @@ module Primer
 
         @list = Primer::Alpha::SelectPanel::ItemList.new(
           **list_arguments,
-          form_arguments: form_arguments,
+          form_arguments: @list_form_arguments, 
           id: "#{@panel_id}-list",
           select_variant: @select_variant,
           aria: {
@@ -546,6 +537,14 @@ module Primer
       def before_render
         content
       end
+
+      def required_form_arguments_given?
+        @input_name  && @form_builder
+      end
+
+      def multi_select?
+        select_variant == :multiple
+      end
     end
   end
-end
+end

data/app/components/primer/alpha/select_panel_element.js

@@ -893,7 +893,8 @@ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLab
 };
 _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
     if (this.selectVariant === 'single') {
-        const input = this.querySelector(`[data-list-inputs=true] input`);
+        const input = this.querySelector(`[data-select-panel-inputs=true] input`) ??
+            this.querySelector(`[data-list-inputs=true] input`);
         if (!input)
             return;
         const selectedItem = this.selectedItems[0];
@@ -903,13 +904,14 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
                 input.name = selectedItem.inputName;
             input.removeAttribute('disabled');
         }
-        else {
+        else if (__classPrivateFieldGet(this, _SelectPanelElement_hasLoadedData, "f")) {
             input.setAttribute('disabled', 'disabled');
         }
     }
     else if (this.selectVariant !== 'none') {
         // multiple select variant
-        const inputList = this.querySelector('[data-list-inputs=true]');
+        const isRemoteInput = !!this.querySelector('[data-select-panel-inputs=true]');
+        const inputList = this.querySelector('[data-select-panel-inputs=true]') ?? this.querySelector('[data-list-inputs=true]');
         if (!inputList)
             return;
         const inputs = inputList.querySelectorAll('input');
@@ -918,7 +920,7 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
         }
         for (const selectedItem of this.selectedItems) {
             const newInput = document.createElement('input');
-            newInput.setAttribute('data-list-input', 'true');
+            newInput.setAttribute(`${isRemoteInput ? 'data-select-panel-input' : 'data-list-input'}`, 'true');
             newInput.type = 'hidden';
             newInput.autocomplete = 'off';
             newInput.name = selectedItem.inputName || __classPrivateFieldGet(this, _SelectPanelElement_inputName, "f");

data/app/components/primer/alpha/select_panel_element.ts

@@ -959,7 +959,9 @@ export class SelectPanelElement extends HTMLElement {
 
   #updateInput() {
     if (this.selectVariant === 'single') {
-      const input = this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement
+      const input =
+        (this.querySelector(`[data-select-panel-inputs=true] input`) as HTMLInputElement) ??
+        (this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement)
       if (!input) return
 
       const selectedItem = this.selectedItems[0]
@@ -968,12 +970,14 @@ export class SelectPanelElement extends HTMLElement {
         input.value = (selectedItem.value || selectedItem.label || '').trim()
         if (selectedItem.inputName) input.name = selectedItem.inputName
         input.removeAttribute('disabled')
-      } else {
+      } else if (this.#hasLoadedData) {
         input.setAttribute('disabled', 'disabled')
       }
     } else if (this.selectVariant !== 'none') {
       // multiple select variant
-      const inputList = this.querySelector('[data-list-inputs=true]')
+      const isRemoteInput = !!this.querySelector('[data-select-panel-inputs=true]')
+      const inputList =
+        this.querySelector('[data-select-panel-inputs=true]') ?? this.querySelector('[data-list-inputs=true]')
       if (!inputList) return
 
       const inputs = inputList.querySelectorAll('input')
@@ -984,7 +988,7 @@ export class SelectPanelElement extends HTMLElement {
 
       for (const selectedItem of this.selectedItems) {
         const newInput = document.createElement('input')
-        newInput.setAttribute('data-list-input', 'true')
+        newInput.setAttribute(`${isRemoteInput ? 'data-select-panel-input' : 'data-list-input'}`, 'true')
         newInput.type = 'hidden'
         newInput.autocomplete = 'off'
         newInput.name = selectedItem.inputName || this.#inputName

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 38
+      MINOR = 39
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb

@@ -0,0 +1,34 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
+  <%= render(Primer::Alpha::SelectPanel.new(
+    data: { interaction_subject: subject_id },
+    select_variant: :single,
+    src: select_panel_items_path(
+        select_variant: :single,
+        selected_items: selected_items,
+    ),
+    open_on_load: open_on_load,
+    dynamic_label: true,
+    dynamic_label_prefix: "Item",
+    use_experimental_non_local_form: true,
+    form_arguments: {
+      name: :item,
+      builder: builder,
+      value: 3,
+    }
+  )) do |panel| %>
+    <% panel.with_show_button { "Sci-fi equipment" } %>
+    <% panel.with_footer(show_divider: true) do %>
+        I'm a footer!
+    <% end %>
+  <% end %>
+
+  <hr>
+
+  <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
+    Submit
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview.rb

@@ -259,6 +259,15 @@ module Primer
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
       end
 
+      # @label Remote fetch form
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      # @param selected_items text
+      def remote_fetch_form(open_on_load: false, selected_items: "Phaser",  route_format: :html)
+        render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items, route_format: route_format })
+      end
+
       # @label Multi-select form
       #
       # @snapshot interactive

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.38.0
+  version: 0.39.0
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-13 00:00:00.000000000 Z
+date: 2025-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -821,6 +821,7 @@ files:
 - previews/primer/alpha/select_panel_preview/playground.html.erb
 - previews/primer/alpha/select_panel_preview/remote_fetch.html.erb
 - previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb
+- previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb
 - previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb
 - previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb
 - previews/primer/alpha/select_panel_preview/scroll_container.html.erb