openproject-primer_view_components 0.70.4 → 0.71.0

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

@@ -0,0 +1,26 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new) 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") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Draco Malfoy") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Susan Bones") %>
+    <% end %>
+
+    <% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
+      <% hufflepuff.with_leaf(label: "Harry Potter") %>
+      <% hufflepuff.with_leaf(label: "Ronald Weasley") %>
+      <% hufflepuff.with_leaf(label: "Hermione Granger") %>
+    <% end %>
+  <% end %>
+
+  <% tree.with_leaf(label: "Albus Dumbledore") %>
+  <% tree.with_leaf(label: "Minerva McGonagall") %>
+  <% tree.with_leaf(label: "Severus Snape") %>
+  <% tree.with_leaf(label: "Rubeus Hagrid") %>
+<% end %>

data/previews/primer/open_project/filterable_tree_view_preview.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label FilterableTreeView
+    class FilterableTreeViewPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param expanded [Boolean] toggle
+      def playground(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Default
+      #
+      # @snapshot interactive
+      # @param expanded [Boolean] toggle
+      def default(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Form input
+      #
+      # @param expanded [Boolean] toggle
+      def form_input(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Custom segmented control
+      #
+      # @snapshot interactive
+      #
+      # ---------------------------
+      # ## Custom filter modes
+      #
+      # In addition to the default filter modes of `'all'` and `'selected'`, `FilterableTreeView` supports
+      # adding custom filter modes. Adding a filter mode will cause its label to appear in the `SegmentedControl` in the
+      # toolbar, and will be passed as the third argument to the filter function (see below).
+      #
+      # Here's how to add a custom filter mode in addition to the default ones:
+      #
+      # ```erb
+      # <%= render(Primer::OpenProject::FilterableTreeView.new) do |tree_view| %>
+      #   <%# remove this line to prevent adding the default modes %>
+      #   <% tree_view.with_default_filter_modes %>
+      #   <% tree_view.with_filter_mode(name: "Custom", system_arguments)
+      # <% end %>
+      # ```
+      #
+      # ### Customizing the filter function
+      #
+      # The filter function can be customized by setting the value of the `filterFn` property to a function with the
+      # following signature:
+      #
+      # ```typescript
+      # export type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null
+      # ```
+      #
+      # This function will be called once for each node in the tree every time filter controls change (i.e. when the
+      # filter mode or query string are altered). The function is called with the following arguments:
+      #
+      # |Argument    |Description                                                      |
+      # |:-----------|:----------------------------------------------------------------|
+      # |`node`      |The HTML node element, i.e. the element with `role=treeitem` set.|
+      # |`query`     |The query string.                                                |
+      # |`filterMode`|The filter mode, either `'all'` or `'selected'`.                 |
+      #
+      # The component expects the filter function to return specific values depending on the type of match:
+      #
+      # 1. No match - return `null`
+      # 2. Match but no highlights (eg. when the query string is empty) - return an empty array
+      # 3. Match with highlights - return a non-empty array of `Range` objects
+      #
+      # Example:
+      #
+      # ```javascript
+      # const filterableTreeView = document.querySelector('filterable-tree-view')
+      # filterableTreeView.filterFn = (node, query, filterMode) => {
+      #   // custom filter implementation here
+      # }
+      # ```
+      #
+      def custom_segmented_control(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Custom no results text
+      def custom_no_results_text(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Custom checkbox text
+      def custom_checkbox_text(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      private
+
+      def coerce_bool(value)
+        case value
+        when true, false
+          value
+        when "true"
+          true
+        when "false"
+          false
+        else
+          false
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/tree_view_preview/buttons.html.erb

@@ -1,10 +1,10 @@
 <div style="max-width: 400px">
   <%= render(Primer::OpenProject::TreeView.new(node_variant: :button)) do |tree_view| %>
-    <% tree_view.with_sub_tree(label: "Secrets", expanded: expanded, onclick: "alert('Shhhh')") do |sub_tree| %>
-      <% sub_tree.with_leaf(label: "Life and the universe", onclick: "alert(42)") %>
-      <% sub_tree.with_leaf(label: "Secret ingredient", onclick: "alert('Love')") %>
+    <% tree_view.with_sub_tree(label: "Secrets", expanded: expanded, onclick: "alert('Shhhh')", disabled: disabled) do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "Life and the universe", onclick: "alert(42)", disabled: disabled) %>
+      <% sub_tree.with_leaf(label: "Secret ingredient", onclick: "alert('Love')", disabled: disabled) %>
     <% end %>
 
-    <% tree_view.with_leaf(label: "What do you give a sick bird?", onclick: "alert('Tweetment')") %>
+    <% tree_view.with_leaf(label: "What do you give a sick bird?", onclick: "alert('Tweetment')", disabled: disabled) %>
   <% end %>
 </div>

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

@@ -1,6 +1,6 @@
 <div style="max-width: 400px">
   <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
-    <% tree_view.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, select_strategy: select_strategy) do |sub_tree| %>
+    <% tree_view.with_sub_tree(label: "src", expanded: expanded, disabled: disabled, select_variant: select_variant, select_strategy: select_strategy) do |sub_tree| %>
       <% sub_tree.with_leading_visual_icons(label: "Foobar") do |icons| %>
         <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
         <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
@@ -8,16 +8,16 @@
 
       <% sub_tree.with_trailing_visual_icon(icon: :"diff-modified") %>
 
-      <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant) do |item| %>
+      <% sub_tree.with_leaf(label: "button.rb", disabled: disabled, select_variant: select_variant) do |item| %>
         <% item.with_leading_visual_icon(icon: :file) %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant) do |item| %>
+      <% sub_tree.with_leaf(label: "icon_button.rb", disabled: disabled, current: true, select_variant: select_variant) do |item| %>
         <% item.with_leading_visual_icon(icon: :file) %>
       <% end %>
     <% end %>
 
-    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: select_variant) do |item| %>
+    <% tree_view.with_leaf(label: "action_menu.rb", disabled: disabled, select_variant: select_variant) do |item| %>
       <% item.with_leading_visual_icon(icon: :file) %>
     <% end %>
   <% end %>

data/previews/primer/open_project/tree_view_preview/leaf_node_playground.html.erb

@@ -1,5 +1,5 @@
 <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
-  <% tree.with_leaf(label: label, select_variant: select_variant) do |node| %>
+  <% tree.with_leaf(label: label, select_variant: select_variant, disabled: disabled) do |node| %>
     <% if leading_visual_icon && leading_visual_icon != :none %>
       <% node.with_leading_visual_icon(icon: leading_visual_icon) %>
     <% end %>

data/previews/primer/open_project/tree_view_preview/links.html.erb

@@ -1,16 +1,16 @@
 <div style="max-width: 400px">
   <%= render(Primer::OpenProject::TreeView.new(node_variant: :anchor)) do |tree_view| %>
-    <% tree_view.with_sub_tree(label: "Cloud Services", href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "blank", expanded: expanded) do |sub_tree| %>
-      <% sub_tree.with_leaf(label: "OpenProject", href: "https://www.openproject.org", target: "blank") do |node| %>
+    <% tree_view.with_sub_tree(label: "Cloud Services", href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "blank", expanded: expanded, disabled: disabled) do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "OpenProject", href: "https://www.openproject.org", target: "blank", disabled: disabled) do |node| %>
         <% node.with_trailing_visual_icon(icon: :"link-external") %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "Hetzner", href: "https://www.hetzner.com", target: "blank") do |node| %>
+      <% sub_tree.with_leaf(label: "Hetzner", href: "https://www.hetzner.com", target: "blank", disabled: disabled) do |node| %>
         <% node.with_trailing_visual_icon(icon: :"link-external") %>
       <% end %>
     <% end %>
 
-    <% tree_view.with_leaf(label: "GitHub", href: "https://github.com", target: "blank") do |node| %>
+    <% tree_view.with_leaf(label: "GitHub", href: "https://github.com", target: "blank", disabled: disabled) do |node| %>
       <% node.with_trailing_visual_icon(icon: :"link-external") %>
     <% end %>
   <% end %>

data/previews/primer/open_project/tree_view_preview.rb

@@ -8,15 +8,18 @@ module Primer
       #
       # @snapshot interactive
       # @param expanded [Boolean] toggle
+      # @param disabled [Boolean] toggle
       # @param select_variant [Symbol] select [multiple, none]
-      # @param select_strategy [Symbol] select [self, descendants]
+      # @param select_strategy [Symbol] select [self, descendants, mixed_descendants]
       def default(
         expanded: false,
+        disabled: false,
         select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT,
         select_strategy: Primer::OpenProject::TreeView::SubTreeNode::DEFAULT_SELECT_STRATEGY
       )
         render_with_template(locals: {
           expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled),
           select_variant: select_variant.to_sym,
           select_strategy: select_strategy.to_sym
         })
@@ -26,7 +29,7 @@ module Primer
       #
       # @param expanded [Boolean] toggle
       # @param select_variant [Symbol] select [multiple, none]
-      # @param select_strategy [Symbol] select [self, descendants]
+      # @param select_strategy [Symbol] select [self, descendants, mixed_descendants]
       def playground(
         expanded: false,
         select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT,
@@ -92,37 +95,44 @@ module Primer
       # @param leading_action_icon [Symbol] octicon
       # @param trailing_visual_icon [Symbol] octicon
       # @param select_variant [Symbol] select [multiple, none]
+      # @param disabled [Boolean] toggle
       def leaf_node_playground(
         label: "Leaf node",
         leading_visual_icon: nil,
         leading_action_icon: nil,
         trailing_visual_icon: nil,
-        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT
+        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT,
+        disabled: false
       )
         render_with_template(locals: {
           label: label,
           leading_visual_icon: leading_visual_icon,
           leading_action_icon: leading_action_icon,
           trailing_visual_icon: trailing_visual_icon,
-          select_variant: select_variant.to_sym
+          select_variant: select_variant.to_sym,
+          disabled: disabled
         })
       end
 
       # @label Links
       #
       # @param expanded [Boolean] toggle
-      def links(expanded: false)
+      # @param disabled [Boolean] toggle
+      def links(expanded: false, disabled: false)
         render_with_template(locals: {
-          expanded: coerce_bool(expanded)
+          expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled)
         })
       end
 
       # @label Buttons
       #
       # @param expanded [Boolean] toggle
-      def buttons(expanded: false)
+      # @param disabled [Boolean] toggle
+      def buttons(expanded: false, disabled: false)
         render_with_template(locals: {
-          expanded: coerce_bool(expanded)
+          expanded: coerce_bool(expanded),
+          disabled: coerce_bool(disabled)
         })
       end
 

data/static/arguments.json

@@ -2671,7 +2671,7 @@
         "name": "wrap",
         "type": "Symbol",
         "default": "`:nowrap`",
-        "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
+        "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, `:reverse`, or `:wrap`."
       },
       {
         "name": "justify",
@@ -5526,6 +5526,74 @@
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/file_tree_view/file_node/default/",
     "parameters": []
   },
+  {
+    "component": "OpenProject::FilterableTreeView",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFilterableTreeView",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/filterable_tree_view.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/filterable_tree_view/default/",
+    "parameters": [
+      {
+        "name": "tree_view_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments that will be passed to the underlying [OpenProject::TreeView](/components/openprojecttreeview) component."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Form arguments that will be passed to the underlying [OpenProject::TreeView](/components/openprojecttreeview) component. These arguments allow the selections made within a `FilterableTreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
+      },
+      {
+        "name": "filter_input_arguments",
+        "type": "Hash",
+        "default": "`DEFAULT_FILTER_INPUT_ARGUMENTS.dup`",
+        "description": "Arguments that will be passed to the [TextField](/components/alpha/textfield) component."
+      },
+      {
+        "name": "filter_mode_control_arguments",
+        "type": "Hash",
+        "default": "`DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.dup`",
+        "description": "Arguments that will be passed to the [SegmentedControl](/components/alpha/segmentedcontrol) component."
+      },
+      {
+        "name": "include_sub_items_check_box_arguments",
+        "type": "Hash",
+        "default": "`DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.dup`",
+        "description": "Arguments that will be passed to the [CheckBox](/components/alpha/checkbox) component."
+      },
+      {
+        "name": "no_results_node_arguments",
+        "type": "Hash",
+        "default": "`DEFAULT_NO_RESULTS_NODE_ARGUMENTS.dup`",
+        "description": "Arguments that will be passed to a [OpenProject::TreeView::LeafNode](/components/openprojecttreeviewleafnode) component that appears when no items match the filter criteria."
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::FilterableTreeView::SubTree",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectFilterableTreeViewSubTree",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/filterable_tree_view/sub_tree.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/filterable_tree_view/sub_tree/default/",
+    "parameters": [
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [OpenProject::TreeView::SubTreeContainer](/components/openprojecttreeviewsubtreecontainer)."
+      }
+    ]
+  },
   {
     "component": "OpenProject::FlexLayout",
     "status": "open_project",
@@ -6081,6 +6149,18 @@
         "default": "`false`",
         "description": "The checked state of the node's checkbox. One of `false`, `mixed`, or `true`."
       },
+      {
+        "name": "disabled",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not the node can be activated. Passing `false` here will cause the node to appear visually disabled but it is still keyboard-focusable."
+      },
+      {
+        "name": "value",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If this node is checked, this value will be sent to the server on form submission."
+      },
       {
         "name": "content_arguments",
         "type": "Hash",
@@ -6215,6 +6295,12 @@
         "default": "N/A",
         "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
       },
+      {
+        "name": "sub_tree_component_klass",
+        "type": "Class",
+        "default": "`SubTree`",
+        "description": "The class to use for the sub-tree instead of the default [OpenProject::TreeView::SubTree](/components/openprojecttreeviewsubtree)"
+      },
       {
         "name": "expanded",
         "type": "Boolean",
@@ -6224,8 +6310,8 @@
       {
         "name": "select_strategy",
         "type": "Symbol",
-        "default": "`:descendants`",
-        "description": "What should happen when this sub-tree node is checked. One of `:descendants` or `:self`."
+        "default": "`:mixed_descendants`",
+        "description": "What should happen when this sub-tree node is checked. One of `:descendants`, `:mixed_descendants`, or `:self`."
       },
       {
         "name": "system_arguments",

data/static/audited_at.json

@@ -135,6 +135,8 @@
   "Primer::OpenProject::FileTreeView": "",
   "Primer::OpenProject::FileTreeView::DirectoryNode": "",
   "Primer::OpenProject::FileTreeView::FileNode": "",
+  "Primer::OpenProject::FilterableTreeView": "",
+  "Primer::OpenProject::FilterableTreeView::SubTree": "",
   "Primer::OpenProject::FlexLayout": "",
   "Primer::OpenProject::GridLayout": "",
   "Primer::OpenProject::GridLayout::Area": "",

data/static/classes.json

@@ -496,6 +496,9 @@
   "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-description--underlined-links": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-leadingAction": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/constants.json

@@ -1653,6 +1653,44 @@
   "Primer::OpenProject::FileTreeView::FileNode": {
     "GeneratedSlotMethods": "Primer::OpenProject::FileTreeView::FileNode::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::FilterableTreeView": {
+    "DEFAULT_FILTER_INPUT_ARGUMENTS": {
+      "name": "filter",
+      "label": "Filter",
+      "type": "search",
+      "leading_visual": {
+        "icon": "search"
+      },
+      "visually_hide_label": true,
+      "show_clear_button": true
+    },
+    "DEFAULT_FILTER_MODES": {
+      "all": {
+        "label": "All",
+        "selected": true
+      },
+      "selected": {
+        "label": "Selected"
+      }
+    },
+    "DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS": {
+      "aria": {
+        "label": "Filter mode"
+      }
+    },
+    "DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS": {
+      "label": "Include sub-items",
+      "name": "include_sub_items"
+    },
+    "DEFAULT_NO_RESULTS_NODE_ARGUMENTS": {
+      "label": "No results"
+    },
+    "GeneratedSlotMethods": "Primer::OpenProject::FilterableTreeView::GeneratedSlotMethods",
+    "SubTree": "Primer::OpenProject::FilterableTreeView::SubTree"
+  },
+  "Primer::OpenProject::FilterableTreeView::SubTree": {
+    "GeneratedSlotMethods": "Primer::OpenProject::FilterableTreeView::SubTree::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::FlexLayout": {
     "GeneratedSlotMethods": "Primer::OpenProject::FlexLayout::GeneratedSlotMethods"
   },
@@ -1881,10 +1919,11 @@
     "GeneratedSlotMethods": "Primer::OpenProject::TreeView::SubTreeContainer::GeneratedSlotMethods"
   },
   "Primer::OpenProject::TreeView::SubTreeNode": {
-    "DEFAULT_SELECT_STRATEGY": "descendants",
+    "DEFAULT_SELECT_STRATEGY": "mixed_descendants",
     "GeneratedSlotMethods": "Primer::OpenProject::TreeView::SubTreeNode::GeneratedSlotMethods",
     "SELECT_STRATEGIES": [
       "self",
+      "mixed_descendants",
       "descendants"
     ]
   },