openproject-primer_view_components 0.90.1 → 0.91.1

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

@@ -480,6 +480,7 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
 _ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
+    this.overlay?.update();
     // async items have loaded, so component is ready
     this.setAttribute('data-ready', 'true');
 };

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

@@ -472,6 +472,7 @@ export class ActionMenuElement extends HTMLElement {
   #handleIncludeFragmentReplaced() {
     this.#firstItem?.focus()
     this.#softDisableItems()
+    this.overlay?.update()
 
     // async items have loaded, so component is ready
     this.setAttribute('data-ready', 'true')

data/app/components/primer/alpha/tree_view/sub_tree_node.rb

@@ -185,8 +185,8 @@ module Primer
         def render_in(*args, **_kwargs, &block)
           super.tap do
             # check this _after_ rendering so @sub_tree's slots are defined
-            if @node.select_variant != :none && @sub_tree.defer?
-              raise ArgumentError, "TreeView does not currently support select variants for sub-trees loaded asynchronously."
+            if @node.select_variant == :multiple && @sub_tree.defer? && @select_strategy != :self
+              raise ArgumentError, "TreeView does not currently support the multiple select variant with #{@select_strategy.inspect} select strategy for sub-trees loaded asynchronously."
             end
           end
         end

data/app/controllers/primer/view_components/action_menu_controller.rb

@@ -10,6 +10,7 @@ module Primer
       def landing; end
 
       def deferred
+        sleep params[:delay].to_f if params[:delay].present?
         render "primer/view_components/action_menu/deferred"
       end
 

data/app/controllers/primer/view_components/tree_view_items_controller.rb

@@ -46,7 +46,8 @@ module Primer
 
         render(
           locals: {
-            action_menu_expanded: params[:action_menu_expanded] == "true"
+            action_menu_expanded: params[:action_menu_expanded] == "true",
+            select_variant: (params[:select_variant] || :none).to_sym
           }
         )
       end

data/app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb

@@ -1,21 +1,21 @@
 <%= render(Primer::Alpha::TreeView::SubTree.new(path: ["primer"], node_variant: :div)) do |tree| %>
-  <% tree.with_sub_tree(label: "alpha") do |sub_tree| %>
+  <% tree.with_sub_tree(label: "alpha", select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
     <% sub_tree.with_leading_visual_icons do |icons| %>
       <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
       <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
     <% end %>
 
-    <% sub_tree.with_sub_tree(label: "action_menu", expanded: action_menu_expanded) do |sub_tree| %>
+    <% sub_tree.with_sub_tree(label: "action_menu", expanded: action_menu_expanded, select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
       <% sub_tree.with_leading_visual_icons do |icons| %>
         <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
         <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "group.rb") do |item| %>
+      <% sub_tree.with_leaf(label: "group.rb", select_variant: select_variant) do |item| %>
         <% item.with_leading_visual_icon(icon: :file) %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "heading.rb") do |item| %>
+      <% sub_tree.with_leaf(label: "heading.rb", select_variant: select_variant) do |item| %>
         <% item.with_leading_visual_icon(icon: :file) %>
       <% end %>
     <% end %>

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/action_menu_preview/with_deferred_content_near_bottom_of_viewport.html.erb

@@ -0,0 +1,10 @@
+<%# The invoker is pinned near the bottom of the viewport, leaving enough room for the loading %>
+<%# spinner placeholder to fit below it but not enough for the full deferred content, reproducing %>
+<%# the scenario from DREAM-729. The `delay` param forces the fragment response to arrive after the %>
+<%# overlay has already been positioned using the placeholder's size, instead of racing the fetch %>
+<%# against the initial position calculation. %>
+<div style="position: fixed; bottom: 100px; right: 0;">
+  <%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-bottom", src: primer_view_components.action_menu_deferred_path(delay: 0.3))) do |menu| %>
+    <% menu.with_show_button { "Menu with deferred content" } %>
+  <% end %>
+</div>

data/previews/primer/alpha/action_menu_preview.rb

@@ -310,6 +310,13 @@ module Primer
         render_with_template(locals: { nest_in_sub_menu: nest_in_sub_menu })
       end
 
+      # @label With deferred content near the bottom of the viewport
+      #
+      # @hidden
+      def with_deferred_content_near_bottom_of_viewport
+        render_with_template
+      end
+
       # @label With deferred preloaded content
       #
       def with_deferred_preloaded_content

data/previews/primer/alpha/tree_view_preview/async_alpha.html.erb

@@ -1,12 +1,12 @@
 <div style="max-width: 400px">
   <%= render(Primer::Alpha::TreeView.new) do |tree_view| %>
-    <% tree_view.with_sub_tree(label: "primer") do |sub_tree| %>
+    <% tree_view.with_sub_tree(label: "primer", select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
       <% sub_tree.with_leading_visual_icons do |icons| %>
         <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
         <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
       <% end %>
 
-      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(action_menu_expanded: action_menu_expanded)) %>
+      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(action_menu_expanded: action_menu_expanded, select_variant: select_variant)) %>
     <% end %>
   <% end %>
 </div>

data/previews/primer/alpha/tree_view_preview/async_form_input.html.erb

@@ -0,0 +1,16 @@
+<%= form_with(url: primer_view_components.generic_form_submission_path(format: :json)) do |f| %>
+  <%= render(Primer::Alpha::Stack.new) do %>
+    <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
+      <% tree.with_sub_tree(label: "primer", select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
+        <% sub_tree.with_leading_visual_icons do |icons| %>
+          <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+          <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+        <% end %>
+
+        <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(select_variant: select_variant)) %>
+      <% end %>
+    <% end %>
+
+    <%= render(Primer::Alpha::SubmitButton.new(name: :submit, label: "Submit")) %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tree_view_preview.rb

@@ -114,9 +114,11 @@ module Primer
       # @label Async alpha
       #
       # @param action_menu_expanded [Boolean] toggle
-      def async_alpha(action_menu_expanded: false)
+      # @param select_variant [Symbol] select [none, single, multiple]
+      def async_alpha(action_menu_expanded: false, select_variant: :none)
         render_with_template(locals: {
-          action_menu_expanded: coerce_bool(action_menu_expanded)
+          action_menu_expanded: coerce_bool(action_menu_expanded),
+          select_variant: select_variant.to_sym
         })
       end
 
@@ -197,6 +199,15 @@ module Primer
         })
       end
 
+      # @label Async form input
+      # @hidden
+      # @param select_variant [Symbol] select [single, multiple]
+      def async_form_input(select_variant: :single)
+        render_with_template(locals: {
+          select_variant: select_variant.to_sym
+        })
+      end
+
       # @label Doubled paths
       # @hidden
       def doubled_path

data/static/info_arch.json

@@ -1438,6 +1438,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/with_deferred_content_near_bottom_of_viewport",
+        "name": "with_deferred_content_near_bottom_of_viewport",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/with_deferred_preloaded_content",
         "name": "with_deferred_preloaded_content",
@@ -10870,6 +10883,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/tree_view/async_form_input",
+        "name": "async_form_input",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/tree_view/doubled_path",
         "name": "doubled_path",

data/static/previews.json

@@ -632,6 +632,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/with_deferred_content_near_bottom_of_viewport",
+        "name": "with_deferred_content_near_bottom_of_viewport",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/with_deferred_preloaded_content",
         "name": "with_deferred_preloaded_content",
@@ -4932,6 +4945,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/tree_view/async_form_input",
+        "name": "async_form_input",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/tree_view/doubled_path",
         "name": "doubled_path",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.90.1
+  version: 0.91.1
 platform: ruby
 authors:
 - GitHub Open Source
@@ -985,6 +985,7 @@ files:
 - previews/primer/alpha/action_menu_preview/two_menus.html.erb
 - previews/primer/alpha/action_menu_preview/with_actions.html.erb
 - previews/primer/alpha/action_menu_preview/with_deferred_content.html.erb
+- previews/primer/alpha/action_menu_preview/with_deferred_content_near_bottom_of_viewport.html.erb
 - previews/primer/alpha/auto_complete_preview.rb
 - previews/primer/alpha/banner_preview.rb
 - previews/primer/alpha/banner_preview/with_action_button.html.erb
@@ -1097,6 +1098,7 @@ files:
 - previews/primer/alpha/tooltip_preview/with_right_most_position.html.erb
 - previews/primer/alpha/tree_view_preview.rb
 - previews/primer/alpha/tree_view_preview/async_alpha.html.erb
+- previews/primer/alpha/tree_view_preview/async_form_input.html.erb
 - previews/primer/alpha/tree_view_preview/buttons.html.erb
 - previews/primer/alpha/tree_view_preview/default.html.erb
 - previews/primer/alpha/tree_view_preview/doubled_path.html.erb