openproject-primer_view_components 0.38.0 → 0.39.0

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

@@ -250,10 +250,22 @@ module Primer
     # )
     # ```
     class SelectPanel < Primer::Component
-      status :alpha
-
       # The component that should be used to render the list of items in the body of a SelectPanel.
-      ItemList = Primer::Alpha::ActionList
+      class ItemList < Primer::Alpha::ActionList
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>.
+        def initialize(**system_arguments)
+          select_variant = system_arguments[:select_variant] || Primer::Alpha::ActionList::DEFAULT_SELECT_VARIANT
+
+          super(
+            p: 2,
+            role: "listbox",
+            aria_selection_variant: select_variant == :single ? :selected : :checked,
+            **system_arguments
+          )
+        end
+      end
+
+      status :alpha
 
       DEFAULT_PRELOAD = false
 
@@ -328,6 +340,7 @@ module Primer
       # @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) %>
       # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         src: nil,
         title: "Menu",

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

@@ -184,6 +184,9 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
                 const elem = entry.target;
                 if (entry.isIntersecting && elem === this.dialog) {
                     this.updateAnchorPosition();
+                    if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
+                        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
+                    }
                 }
             }
         }), "f");

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

@@ -216,6 +216,10 @@ export class SelectPanelElement extends HTMLElement {
         const elem = entry.target
         if (entry.isIntersecting && elem === this.dialog) {
           this.updateAnchorPosition()
+
+          if (this.#fetchStrategy === FetchStrategy.LOCAL) {
+            this.#updateItemVisibility()
+          }
         }
       }
     })

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/playground.html.erb

@@ -5,7 +5,11 @@
 
 <%= render(Primer::Alpha::SelectPanel.new(
   data: { interaction_subject: subject_id },
-  src: select_panel_items_path(show_results: !simulate_no_results, fail: simulate_failure),
+  src: select_panel_items_path(
+    select_variant: :single,
+    show_results: !simulate_no_results,
+    fail: simulate_failure
+  ),
   select_variant: :single,
   fetch_strategy: :remote,
   **system_arguments

data/static/arguments.json

@@ -2467,6 +2467,28 @@
         "type": "Symbol",
         "default": "`:outside_bottom`",
         "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "SelectPanel::ItemList",
+    "status": "alpha",
+    "a11y_reviewed": true,
+    "short_name": "SelectPanelItemList",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)."
       }
     ]
   },

data/static/audited_at.json

@@ -53,6 +53,7 @@
   "Primer::Alpha::SegmentedControl::Item": "2023-02-01",
   "Primer::Alpha::Select": "",
   "Primer::Alpha::SelectPanel": "",
+  "Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
   "Primer::Alpha::SubmitButton": "",
   "Primer::Alpha::TabContainer": "",
   "Primer::Alpha::TabNav": "",

data/static/constants.json

@@ -606,13 +606,15 @@
       "eventually_local",
       "local"
     ],
-    "ItemList": "Primer::Alpha::ActionList",
+    "ItemList": "Primer::Alpha::SelectPanel::ItemList",
     "SELECT_VARIANT_OPTIONS": [
       "single",
       "multiple",
       "none"
     ]
   },
+  "Primer::Alpha::SelectPanel::ItemList": {
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {

data/static/info_arch.json

@@ -7630,6 +7630,12 @@
         "type": "Symbol",
         "default": "`:outside_bottom`",
         "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
       }
     ],
     "slots": [
@@ -8080,7 +8086,64 @@
       }
     ],
     "subcomponents": [
+      {
+        "fully_qualified_name": "Primer::Alpha::SelectPanel::ItemList",
+        "description": "The component that should be used to render the list of items in the body of a SelectPanel.",
+        "accessibility_docs": null,
+        "is_form_component": false,
+        "is_published": true,
+        "requires_js": true,
+        "component": "SelectPanel::ItemList",
+        "status": "alpha",
+        "a11y_reviewed": true,
+        "short_name": "SelectPanelItemList",
+        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
+        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}."
+          }
+        ],
+        "slots": [
+          {
+            "name": "heading",
+            "description": "Heading text rendered above the list of items.",
+            "parameters": [
+              {
+                "name": "component_klass",
+                "type": "Class",
+                "default": "N/A",
+                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
+              },
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "The arguments accepted by `component_klass`."
+              }
+            ]
+          },
+          {
+            "name": "items",
+            "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
+            "parameters": [
+
+            ]
+          }
+        ],
+        "methods": [
+
+        ],
+        "previews": [
 
+        ],
+        "subcomponents": [
+
+        ]
+      }
     ]
   },
   {

data/static/statuses.json

@@ -53,6 +53,7 @@
   "Primer::Alpha::SegmentedControl::Item": "alpha",
   "Primer::Alpha::Select": "alpha",
   "Primer::Alpha::SelectPanel": "alpha",
+  "Primer::Alpha::SelectPanel::ItemList": "alpha",
   "Primer::Alpha::SubmitButton": "alpha",
   "Primer::Alpha::TabContainer": "alpha",
   "Primer::Alpha::TabNav": "alpha",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.38.0
+  version: 0.39.0
 platform: ruby
 authors:
 - GitHub Open Source