openproject-primer_view_components 0.89.0 → 0.89.1

data/app/components/primer/open_project/filterable_tree_view.js

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_clientHighlightsEnabled_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
+var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_clientHighlightsEnabled_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleFilterInputKeyDown, _FilterableTreeViewElement_handleTreeKeyDown, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
 import { controller, target } from '@github/catalyst';
 import { TreeViewElement } from '../alpha/tree_view/tree_view';
 import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
@@ -57,6 +57,7 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
         this.addEventListener('treeViewNodeChecked', this, { signal });
         this.addEventListener('itemActivated', this, { signal });
         this.addEventListener('input', this, { signal });
+        this.addEventListener('keydown', this, { signal });
         if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get)) {
             void __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_fetchAndReplaceTree).call(this);
         }
@@ -72,7 +73,12 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterModeEvent).call(this, event);
         }
         else if (event.target === this.filterInput) {
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputEvent).call(this, event);
+            if (event.type === 'keydown') {
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputKeyDown).call(this, event);
+            }
+            else {
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputEvent).call(this, event);
+            }
         }
         else if (event.target === this.includeSubItemsCheckBox) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent).call(this, event);
@@ -80,6 +86,9 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
         else if (event.target instanceof TreeViewElement || event.target instanceof TreeViewSubTreeNodeElement) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeViewEvent).call(this, event);
         }
+        else if (event.type === 'keydown' && this.treeViewList?.contains(event.target)) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeKeyDown).call(this, event);
+        }
     }
     get filterModeControl() {
         return this.filterModeControlList.closest('segmented-control');
@@ -321,6 +330,23 @@ _FilterableTreeViewElement_handleFilterInputEvent = function _FilterableTreeView
         __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
     }
 };
+_FilterableTreeViewElement_handleFilterInputKeyDown = function _FilterableTreeViewElement_handleFilterInputKeyDown(event) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+        return;
+    const treeitems = [...(this.treeViewList?.querySelectorAll('[role=treeitem]') ?? [])];
+    const visibleItems = treeitems.filter(item => !item.closest('[hidden]'));
+    if (visibleItems.length === 0)
+        return;
+    event.preventDefault();
+    const focusTarget = event.key === 'ArrowDown' ? visibleItems[0] : visibleItems[visibleItems.length - 1];
+    focusTarget.focus();
+};
+_FilterableTreeViewElement_handleTreeKeyDown = function _FilterableTreeViewElement_handleTreeKeyDown(event) {
+    if (event.key !== 'Escape')
+        return;
+    event.preventDefault();
+    this.filterInput.focus();
+};
 _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent = function _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent(event) {
     if (!this.treeView)
         return;

data/app/components/primer/open_project/filterable_tree_view.ts

@@ -49,6 +49,7 @@ export class FilterableTreeViewElement extends HTMLElement {
     this.addEventListener('treeViewNodeChecked', this, {signal})
     this.addEventListener('itemActivated', this, {signal})
     this.addEventListener('input', this, {signal})
+    this.addEventListener('keydown', this, {signal})
 
     if (this.#isAsyncMode) {
       void this.#fetchAndReplaceTree()
@@ -77,11 +78,17 @@ export class FilterableTreeViewElement extends HTMLElement {
     if (event.target === this.filterModeControl) {
       this.#handleFilterModeEvent(event)
     } else if (event.target === this.filterInput) {
-      this.#handleFilterInputEvent(event)
+      if (event.type === 'keydown') {
+        this.#handleFilterInputKeyDown(event as KeyboardEvent)
+      } else {
+        this.#handleFilterInputEvent(event)
+      }
     } else if (event.target === this.includeSubItemsCheckBox) {
       this.#handleIncludeSubItemsCheckBoxEvent(event)
     } else if (event.target instanceof TreeViewElement || event.target instanceof TreeViewSubTreeNodeElement) {
       this.#handleTreeViewEvent(event)
+    } else if (event.type === 'keydown' && this.treeViewList?.contains(event.target as Node)) {
+      this.#handleTreeKeyDown(event as KeyboardEvent)
     }
   }
 
@@ -231,6 +238,25 @@ export class FilterableTreeViewElement extends HTMLElement {
     }
   }
 
+  #handleFilterInputKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+
+    const treeitems = [...(this.treeViewList?.querySelectorAll<HTMLElement>('[role=treeitem]') ?? [])]
+    const visibleItems = treeitems.filter(item => !item.closest('[hidden]'))
+
+    if (visibleItems.length === 0) return
+
+    event.preventDefault()
+    const focusTarget = event.key === 'ArrowDown' ? visibleItems[0] : visibleItems[visibleItems.length - 1]
+    focusTarget.focus()
+  }
+
+  #handleTreeKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return
+    event.preventDefault()
+    this.filterInput.focus()
+  }
+
   #handleIncludeSubItemsCheckBoxEvent(event: Event) {
     if (!this.treeView) return
     if (event.type !== 'input') return

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 89
-      PATCH = 0
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/segmented_control_preview.rb

@@ -58,7 +58,6 @@ module Primer
       # @!endgroup
 
       # @!group Icons and text
-      # @label Size small
       # @snapshot
       def icons_and_text_small
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
@@ -69,7 +68,6 @@ module Primer
       end
 
       # @label Size medium
-      # @snapshot
       def icons_and_text_medium
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -81,7 +79,6 @@ module Primer
 
       # @!group Trailing Label
       # @label Size small
-      # @snapshot
       def trailing_label_width_small
         render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :small)) do |component|
           component.with_item(label: "Monthly")
@@ -92,7 +89,6 @@ module Primer
       end
 
       # @label Size medium
-      # @snapshot
       def trailing_label_width_medium
         render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :medium)) do |component|
           component.with_item(label: "Monthly")

data/previews/primer/open_project/filterable_tree_view_preview/default.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
+<%= render(Primer::OpenProject::FilterableTreeView.new(filter_input_arguments: {autocomplete: "off"})) do |tree| %>
   <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
     <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
       <% ravenclaw.with_leaf(label: "Luna Lovegood") %>

data/previews/primer/open_project/filterable_tree_view_preview.rb

@@ -21,7 +21,7 @@ module Primer
 
       # @label Default
       #
-      # @snapshot interactive
+      # @snapshot
       # @param expanded [Boolean] toggle
       def default(expanded: true)
         render_with_template(locals: {

data/static/arguments.json

@@ -6173,6 +6173,12 @@
         "default": "`nil`",
         "description": "URL of the server endpoint that returns a filtered `<tree-view>` HTML fragment. When set, activates async (server-side) filtering mode. See \"Async loading strategy\" above."
       },
+      {
+        "name": "show_search_highlighting",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Only relevant in async mode (`src:` must be set). When `true` (default), the client highlights matching text using the CSS Custom Highlight API or `<mark>` elements. When `false`, the client skips highlighting entirely; the server is responsible for including highlight markup (e.g. `<mark>` tags) in the returned HTML fragment."
+      },
       {
         "name": "tree_view_arguments",
         "type": "Hash",
@@ -6498,7 +6504,7 @@
       {
         "name": "collapsed_search",
         "type": "Boolean",
-        "default": "`false`",
+        "default": "`true`",
         "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
       },
       {

data/static/info_arch.json

@@ -7301,7 +7301,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/icons_and_text_medium",
         "name": "icons_and_text_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7314,7 +7314,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
         "name": "trailing_label_width_small",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7327,7 +7327,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
         "name": "trailing_label_width_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -10869,6 +10869,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tree_view/doubled_path",
+        "name": "doubled_path",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -20368,6 +20381,12 @@
         "default": "`nil`",
         "description": "URL of the server endpoint that returns a filtered `<tree-view>` HTML fragment. When set, activates async (server-side) filtering mode. See \"Async loading strategy\" above."
       },
+      {
+        "name": "show_search_highlighting",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Only relevant in async mode (`src:` must be set). When `true` (default), the client highlights matching text using the CSS Custom Highlight API or `<mark>` elements. When `false`, the client skips highlighting entirely; the server is responsible for including highlight markup (e.g. `<mark>` tags) in the returned HTML fragment."
+      },
       {
         "name": "tree_view_arguments",
         "type": "Hash",
@@ -20424,7 +20443,7 @@
       {
         "preview_path": "primer/open_project/filterable_tree_view/default",
         "name": "default",
-        "snapshot": "interactive",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -20499,6 +20518,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/filterable_tree_view/async_server_highlights",
+        "name": "async_server_highlights",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/filterable_tree_view/async_form_input",
         "name": "async_form_input",
@@ -21787,7 +21819,7 @@
       {
         "name": "collapsed_search",
         "type": "Boolean",
-        "default": "`false`",
+        "default": "`true`",
         "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
       },
       {
@@ -21938,8 +21970,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/sub_header/collapsed_search",
-        "name": "collapsed_search",
+        "preview_path": "primer/open_project/sub_header/expanded_search",
+        "name": "expanded_search",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

data/static/previews.json

@@ -4440,7 +4440,7 @@
       {
         "preview_path": "primer/open_project/filterable_tree_view/default",
         "name": "default",
-        "snapshot": "interactive",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -4515,6 +4515,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/filterable_tree_view/async_server_highlights",
+        "name": "async_server_highlights",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/filterable_tree_view/async_form_input",
         "name": "async_form_input",
@@ -4889,12 +4902,12 @@
   },
   {
     "name": "heading",
-    "component": "OpenProject::Heading",
-    "status": "open_project",
-    "lookup_path": "primer/open_project/heading",
+    "component": "Heading",
+    "status": "beta",
+    "lookup_path": "primer/beta/heading",
     "examples": [
       {
-        "preview_path": "primer/open_project/heading/playground",
+        "preview_path": "primer/beta/heading/playground",
         "name": "playground",
         "snapshot": "false",
         "skip_rules": {
@@ -4907,7 +4920,7 @@
         }
       },
       {
-        "preview_path": "primer/open_project/heading/default",
+        "preview_path": "primer/beta/heading/default",
         "name": "default",
         "snapshot": "true",
         "skip_rules": {
@@ -4923,12 +4936,12 @@
   },
   {
     "name": "heading",
-    "component": "Heading",
-    "status": "beta",
-    "lookup_path": "primer/beta/heading",
+    "component": "OpenProject::Heading",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/heading",
     "examples": [
       {
-        "preview_path": "primer/beta/heading/playground",
+        "preview_path": "primer/open_project/heading/playground",
         "name": "playground",
         "snapshot": "false",
         "skip_rules": {
@@ -4941,7 +4954,7 @@
         }
       },
       {
-        "preview_path": "primer/beta/heading/default",
+        "preview_path": "primer/open_project/heading/default",
         "name": "default",
         "snapshot": "true",
         "skip_rules": {
@@ -7190,7 +7203,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/icons_and_text_medium",
         "name": "icons_and_text_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7203,7 +7216,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
         "name": "trailing_label_width_small",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7216,7 +7229,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
         "name": "trailing_label_width_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8235,8 +8248,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/sub_header/collapsed_search",
-        "name": "collapsed_search",
+        "preview_path": "primer/open_project/sub_header/expanded_search",
+        "name": "expanded_search",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -9808,6 +9821,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tree_view/doubled_path",
+        "name": "doubled_path",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

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