openproject-primer_view_components 0.89.0 → 0.89.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (177) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +22 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_bar.css +1 -1
  8. data/app/components/primer/alpha/action_bar.css.map +1 -1
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.json +4 -10
  11. data/app/components/primer/alpha/action_list.css.map +1 -1
  12. data/app/components/primer/alpha/auto_complete.css +1 -1
  13. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  14. data/app/components/primer/alpha/banner.css +1 -1
  15. data/app/components/primer/alpha/banner.css.map +1 -1
  16. data/app/components/primer/alpha/button_marketing.css +1 -1
  17. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  18. data/app/components/primer/alpha/dialog.css +1 -1
  19. data/app/components/primer/alpha/dialog.css.json +2 -1
  20. data/app/components/primer/alpha/dialog.css.map +1 -1
  21. data/app/components/primer/alpha/dialog.pcss +4 -1
  22. data/app/components/primer/alpha/dropdown.css +1 -1
  23. data/app/components/primer/alpha/dropdown.css.map +1 -1
  24. data/app/components/primer/alpha/layout.css +1 -1
  25. data/app/components/primer/alpha/layout.css.json +10 -14
  26. data/app/components/primer/alpha/layout.css.map +1 -1
  27. data/app/components/primer/alpha/menu.css +1 -1
  28. data/app/components/primer/alpha/menu.css.map +1 -1
  29. data/app/components/primer/alpha/overlay.css +1 -1
  30. data/app/components/primer/alpha/overlay.css.map +1 -1
  31. data/app/components/primer/alpha/segmented_control.css +1 -1
  32. data/app/components/primer/alpha/segmented_control.css.json +1 -2
  33. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  34. data/app/components/primer/alpha/select_panel.css +1 -1
  35. data/app/components/primer/alpha/select_panel.css.map +1 -1
  36. data/app/components/primer/alpha/select_panel_element.ts +1 -1
  37. data/app/components/primer/alpha/skeleton_box.css +1 -1
  38. data/app/components/primer/alpha/skeleton_box.css.map +1 -1
  39. data/app/components/primer/alpha/stack.css +1 -1
  40. data/app/components/primer/alpha/stack.css.map +1 -1
  41. data/app/components/primer/alpha/tab_nav.css +1 -1
  42. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  43. data/app/components/primer/alpha/text_field.css +1 -1
  44. data/app/components/primer/alpha/text_field.css.json +1 -2
  45. data/app/components/primer/alpha/text_field.css.map +1 -1
  46. data/app/components/primer/alpha/toggle_switch.css +1 -1
  47. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  48. data/app/components/primer/alpha/tree_view/sub_tree_node.rb +1 -1
  49. data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.js +1 -1
  50. data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.ts +1 -1
  51. data/app/components/primer/alpha/tree_view/visual.rb +1 -1
  52. data/app/components/primer/alpha/tree_view.css +1 -1
  53. data/app/components/primer/alpha/tree_view.css.json +2 -2
  54. data/app/components/primer/alpha/tree_view.css.map +1 -1
  55. data/app/components/primer/alpha/underline_nav.css +1 -1
  56. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  57. data/app/components/primer/beta/avatar.css +1 -1
  58. data/app/components/primer/beta/avatar.css.map +1 -1
  59. data/app/components/primer/beta/avatar_stack.css +1 -1
  60. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  61. data/app/components/primer/beta/blankslate.css +1 -1
  62. data/app/components/primer/beta/blankslate.css.map +1 -1
  63. data/app/components/primer/beta/border_box.css +1 -1
  64. data/app/components/primer/beta/border_box.css.map +1 -1
  65. data/app/components/primer/beta/border_box.rb +18 -7
  66. data/app/components/primer/beta/breadcrumbs.css +1 -1
  67. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  68. data/app/components/primer/beta/button.css +1 -1
  69. data/app/components/primer/beta/button.css.map +1 -1
  70. data/app/components/primer/beta/button_group.css +1 -1
  71. data/app/components/primer/beta/button_group.css.map +1 -1
  72. data/app/components/primer/beta/button_group.rb +1 -1
  73. data/app/components/primer/beta/counter.css +1 -1
  74. data/app/components/primer/beta/counter.css.map +1 -1
  75. data/app/components/primer/beta/flash.css +1 -1
  76. data/app/components/primer/beta/flash.css.map +1 -1
  77. data/app/components/primer/beta/label.css +1 -1
  78. data/app/components/primer/beta/label.css.map +1 -1
  79. data/app/components/primer/beta/link.css +1 -1
  80. data/app/components/primer/beta/link.css.map +1 -1
  81. data/app/components/primer/beta/popover.css +1 -1
  82. data/app/components/primer/beta/popover.css.map +1 -1
  83. data/app/components/primer/beta/progress_bar.css +1 -1
  84. data/app/components/primer/beta/progress_bar.css.map +1 -1
  85. data/app/components/primer/beta/state.css +1 -1
  86. data/app/components/primer/beta/state.css.map +1 -1
  87. data/app/components/primer/beta/subhead.css +1 -1
  88. data/app/components/primer/beta/subhead.css.map +1 -1
  89. data/app/components/primer/beta/timeline_item.css +1 -1
  90. data/app/components/primer/beta/timeline_item.css.map +1 -1
  91. data/app/components/primer/beta/truncate.css +1 -1
  92. data/app/components/primer/beta/truncate.css.map +1 -1
  93. data/app/components/primer/dialog_helper.js +10 -1
  94. data/app/components/primer/dialog_helper.ts +16 -1
  95. data/app/components/primer/open_project/border_box/collapsible_header.css +1 -1
  96. data/app/components/primer/open_project/border_box/collapsible_header.css.json +1 -3
  97. data/app/components/primer/open_project/border_box/collapsible_header.css.map +1 -1
  98. data/app/components/primer/open_project/border_grid.css +1 -1
  99. data/app/components/primer/open_project/border_grid.css.map +1 -1
  100. data/app/components/primer/open_project/drag_handle.css +1 -1
  101. data/app/components/primer/open_project/drag_handle.css.map +1 -1
  102. data/app/components/primer/open_project/filterable_tree_view.css +1 -1
  103. data/app/components/primer/open_project/filterable_tree_view.css.map +1 -1
  104. data/app/components/primer/open_project/filterable_tree_view.html.erb +9 -5
  105. data/app/components/primer/open_project/filterable_tree_view.js +28 -2
  106. data/app/components/primer/open_project/filterable_tree_view.rb +9 -1
  107. data/app/components/primer/open_project/filterable_tree_view.ts +27 -1
  108. data/app/components/primer/open_project/inline_message.css +1 -1
  109. data/app/components/primer/open_project/inline_message.css.map +1 -1
  110. data/app/components/primer/open_project/page_header/dialog.rb +1 -1
  111. data/app/components/primer/open_project/page_header/menu.rb +1 -1
  112. data/app/components/primer/open_project/page_header.css +1 -1
  113. data/app/components/primer/open_project/page_header.css.map +1 -1
  114. data/app/components/primer/open_project/pagination.css +1 -1
  115. data/app/components/primer/open_project/pagination.css.map +1 -1
  116. data/app/components/primer/open_project/side_panel/section.css +1 -1
  117. data/app/components/primer/open_project/side_panel/section.css.map +1 -1
  118. data/app/components/primer/open_project/sub_header.css +1 -1
  119. data/app/components/primer/open_project/sub_header.css.map +1 -1
  120. data/app/lib/primer/forms/acts_as_component.rb +1 -1
  121. data/app/lib/primer/forms/toggle_switch_form.rb +1 -1
  122. data/lib/primer/form_components.rb +1 -1
  123. data/lib/primer/view_components/version.rb +1 -1
  124. data/previews/primer/alpha/segmented_control_preview.rb +0 -4
  125. data/previews/primer/beta/border_box_preview.rb +3 -3
  126. data/previews/primer/open_project/filterable_tree_view_preview/async_custom_loading_indicator.html.erb +9 -0
  127. data/previews/primer/open_project/filterable_tree_view_preview/default.html.erb +1 -1
  128. data/previews/primer/open_project/filterable_tree_view_preview.rb +8 -1
  129. data/static/arguments.json +19 -1
  130. data/static/info_arch.json +72 -9
  131. data/static/previews.json +55 -16
  132. metadata +2 -46
  133. data/app/assets/javascripts/components/primer/alpha/action_bar_element.d.ts +0 -17
  134. data/app/assets/javascripts/components/primer/alpha/action_list.d.ts +0 -16
  135. data/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -49
  136. data/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_focus_zone_stack.d.ts +0 -17
  137. data/app/assets/javascripts/components/primer/alpha/dropdown/menu.d.ts +0 -1
  138. data/app/assets/javascripts/components/primer/alpha/dropdown.d.ts +0 -1
  139. data/app/assets/javascripts/components/primer/alpha/modal_dialog.d.ts +0 -18
  140. data/app/assets/javascripts/components/primer/alpha/segmented_control.d.ts +0 -12
  141. data/app/assets/javascripts/components/primer/alpha/select_panel_element.d.ts +0 -65
  142. data/app/assets/javascripts/components/primer/alpha/tab_container.d.ts +0 -1
  143. data/app/assets/javascripts/components/primer/alpha/toggle_switch.d.ts +0 -34
  144. data/app/assets/javascripts/components/primer/alpha/tool_tip.d.ts +0 -27
  145. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view.d.ts +0 -47
  146. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_icon_pair_element.d.ts +0 -15
  147. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_include_fragment_element.d.ts +0 -9
  148. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_roving_tab_index.d.ts +0 -3
  149. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.d.ts +0 -47
  150. data/app/assets/javascripts/components/primer/alpha/x_banner.d.ts +0 -18
  151. data/app/assets/javascripts/components/primer/anchored_position.d.ts +0 -27
  152. data/app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts +0 -1
  153. data/app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts +0 -1
  154. data/app/assets/javascripts/components/primer/beta/details_toggle_element.d.ts +0 -40
  155. data/app/assets/javascripts/components/primer/beta/nav_list.d.ts +0 -20
  156. data/app/assets/javascripts/components/primer/beta/nav_list_group_element.d.ts +0 -19
  157. data/app/assets/javascripts/components/primer/beta/relative_time.d.ts +0 -1
  158. data/app/assets/javascripts/components/primer/dialog_helper.d.ts +0 -15
  159. data/app/assets/javascripts/components/primer/focus_group.d.ts +0 -19
  160. data/app/assets/javascripts/components/primer/open_project/avatar_fallback.d.ts +0 -28
  161. data/app/assets/javascripts/components/primer/open_project/border_box/collapsible_header.d.ts +0 -11
  162. data/app/assets/javascripts/components/primer/open_project/collapsible.d.ts +0 -13
  163. data/app/assets/javascripts/components/primer/open_project/collapsible_section.d.ts +0 -10
  164. data/app/assets/javascripts/components/primer/open_project/danger_dialog_form_helper.d.ts +0 -18
  165. data/app/assets/javascripts/components/primer/open_project/filterable_tree_view.d.ts +0 -29
  166. data/app/assets/javascripts/components/primer/open_project/page_header_element.d.ts +0 -9
  167. data/app/assets/javascripts/components/primer/open_project/sub_header_element.d.ts +0 -17
  168. data/app/assets/javascripts/components/primer/open_project/zen_mode_button.d.ts +0 -18
  169. data/app/assets/javascripts/components/primer/primer.d.ts +0 -42
  170. data/app/assets/javascripts/components/primer/scrollable_region.d.ts +0 -13
  171. data/app/assets/javascripts/components/primer/shared_events.d.ts +0 -26
  172. data/app/assets/javascripts/components/primer/utils.d.ts +0 -1
  173. data/app/assets/javascripts/lib/primer/forms/character_counter.d.ts +0 -41
  174. data/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +0 -10
  175. data/app/assets/javascripts/lib/primer/forms/primer_text_area.d.ts +0 -13
  176. data/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +0 -30
  177. data/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +0 -5
@@ -0,0 +1,9 @@
1
+ <%= render(Primer::OpenProject::FilterableTreeView.new(
2
+ src: primer_view_components.filterable_tree_view_items_tree_path(select_variant: :single)
3
+ )) do |tree_view| %>
4
+ <% tree_view.with_loading_indicator do %>
5
+ <%= render(Primer::Alpha::Stack.new(align: :center, p: 3)) do %>
6
+ <%= render(Primer::Beta::Spinner.new) %>
7
+ <% end %>
8
+ <% end %>
9
+ <% end %>
@@ -1,4 +1,4 @@
1
- <%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
1
+ <%= render(Primer::OpenProject::FilterableTreeView.new(filter_input_arguments: {autocomplete: "off"})) do |tree| %>
2
2
  <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
3
3
  <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
4
4
  <% ravenclaw.with_leaf(label: "Luna Lovegood") %>
@@ -21,7 +21,7 @@ module Primer
21
21
 
22
22
  # @label Default
23
23
  #
24
- # @snapshot interactive
24
+ # @snapshot
25
25
  # @param expanded [Boolean] toggle
26
26
  def default(expanded: true)
27
27
  render_with_template(locals: {
@@ -123,6 +123,13 @@ module Primer
123
123
  })
124
124
  end
125
125
 
126
+ # @label Async (with custom loading indicator)
127
+ #
128
+ # Demonstrates replacing the default skeleton loader with arbitrary content.
129
+ def async_custom_loading_indicator
130
+ render_with_template
131
+ end
132
+
126
133
  # @label Async (with server-side highlighting)
127
134
  #
128
135
  # Demonstrates `show_search_highlighting: false`: the client skips its own highlight logic
@@ -4250,6 +4250,18 @@
4250
4250
  "default": "`:default`",
4251
4251
  "description": "One of `:condensed`, `:default`, or `:spacious`."
4252
4252
  },
4253
+ {
4254
+ "name": "list_arguments",
4255
+ "type": "Hash",
4256
+ "default": "`{}`",
4257
+ "description": "[System arguments](/system-arguments)"
4258
+ },
4259
+ {
4260
+ "name": "list_id",
4261
+ "type": "String",
4262
+ "default": "N/A",
4263
+ "description": "Deprecated. Use <code>list_arguments: { id: ... }</code> instead."
4264
+ },
4253
4265
  {
4254
4266
  "name": "system_arguments",
4255
4267
  "type": "Hash",
@@ -6173,6 +6185,12 @@
6173
6185
  "default": "`nil`",
6174
6186
  "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."
6175
6187
  },
6188
+ {
6189
+ "name": "show_search_highlighting",
6190
+ "type": "Boolean",
6191
+ "default": "`true`",
6192
+ "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."
6193
+ },
6176
6194
  {
6177
6195
  "name": "tree_view_arguments",
6178
6196
  "type": "Hash",
@@ -6498,7 +6516,7 @@
6498
6516
  {
6499
6517
  "name": "collapsed_search",
6500
6518
  "type": "Boolean",
6501
- "default": "`false`",
6519
+ "default": "`true`",
6502
6520
  "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
6503
6521
  },
6504
6522
  {
@@ -7301,7 +7301,7 @@
7301
7301
  {
7302
7302
  "preview_path": "primer/alpha/segmented_control/icons_and_text_medium",
7303
7303
  "name": "icons_and_text_medium",
7304
- "snapshot": "true",
7304
+ "snapshot": "false",
7305
7305
  "skip_rules": {
7306
7306
  "wont_fix": [
7307
7307
  "region"
@@ -7314,7 +7314,7 @@
7314
7314
  {
7315
7315
  "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
7316
7316
  "name": "trailing_label_width_small",
7317
- "snapshot": "true",
7317
+ "snapshot": "false",
7318
7318
  "skip_rules": {
7319
7319
  "wont_fix": [
7320
7320
  "region"
@@ -7327,7 +7327,7 @@
7327
7327
  {
7328
7328
  "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
7329
7329
  "name": "trailing_label_width_medium",
7330
- "snapshot": "true",
7330
+ "snapshot": "false",
7331
7331
  "skip_rules": {
7332
7332
  "wont_fix": [
7333
7333
  "region"
@@ -10869,6 +10869,19 @@
10869
10869
  "color-contrast"
10870
10870
  ]
10871
10871
  }
10872
+ },
10873
+ {
10874
+ "preview_path": "primer/alpha/tree_view/doubled_path",
10875
+ "name": "doubled_path",
10876
+ "snapshot": "false",
10877
+ "skip_rules": {
10878
+ "wont_fix": [
10879
+ "region"
10880
+ ],
10881
+ "will_fix": [
10882
+ "color-contrast"
10883
+ ]
10884
+ }
10872
10885
  }
10873
10886
  ],
10874
10887
  "subcomponents": [
@@ -13496,6 +13509,18 @@
13496
13509
  "default": "`:default`",
13497
13510
  "description": "One of `:condensed`, `:default`, or `:spacious`."
13498
13511
  },
13512
+ {
13513
+ "name": "list_arguments",
13514
+ "type": "Hash",
13515
+ "default": "`{}`",
13516
+ "description": "{{link_to_system_arguments_docs}}"
13517
+ },
13518
+ {
13519
+ "name": "list_id",
13520
+ "type": "String",
13521
+ "default": "N/A",
13522
+ "description": "Deprecated. Use <code>list_arguments: { id: ... }</code> instead."
13523
+ },
13499
13524
  {
13500
13525
  "name": "system_arguments",
13501
13526
  "type": "Hash",
@@ -20350,7 +20375,7 @@
20350
20375
  },
20351
20376
  {
20352
20377
  "fully_qualified_name": "Primer::OpenProject::FilterableTreeView",
20353
- "description": "A TreeView and associated filter controls for searching nested hierarchies.\n\n## Filter controls\n\n`FilterableTreeView`s can be filtered using two controls, both present in the toolbar above the tree:\n\n1. A free-form query string from a text input field.\n2. A `SegmentedControl` with two options (by default):\n 1. The \"Selected\" option causes the component to only show checked nodes, provided they also satisfy the other\n filter criteria described here.\n 2. The \"All\" option causes the component to show all nodes, provided they also satisfy the other filter\n criteria described here.\n\n## Custom filter modes\n\nIn addition to the default filter modes of `'all'` and `'selected'` described above, `FilterableTreeView` supports\nadding custom filter modes. Adding a filter mode will cause its label to appear in the `SegmentedControl` in the\ntoolbar, and will be passed as the third argument to the filter function (see below).\n\nHere's how to add a custom filter mode in addition to the default ones:\n\n```erb\n<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree_view| %>\n <%# remove this line to prevent adding the default modes %>\n <% tree_view.with_default_filter_modes %>\n <% tree_view.with_filter_mode(name: \"Custom\", system_arguments)\n<% end %>\n```\n\n## Filter behavior\n\nBy default, matching node text is identified by looking for an exact substring match, operating on a lowercased\nversion of both the query string and the node text. For more information, and to provide a customized filter\nfunction, please see the section titled \"Customizing the filter function\" below.\n\nNodes that match the filter appear as normal; nodes that do not match are presented as follows:\n\n1. Leaf nodes are hidden.\n2. Sub-tree nodes with no matching children are hidden.\n3. Sub-tree nodes with at least one matching child are disabled but still visible.\n\n## Checking behavior\n\nBy default, checking a node in a `FilterableTreeView` checks only that node (i.e. no child nodes are checked).\nTo aide in checking children in deeply nested or highly populated hierarchies, a third control exists in the\ntoolbar: the \"Include sub-items\" check box. If this feature is turned on, checking sub-tree nodes causes all\nchildren, both leaf and sub-tree nodes, to also be checked recursively. Moreover, turning this feature on will\ncause the children of any previously checked nodes to be checked recursively. Unchecking a node while in\n\"Include sub-items\" mode will restore that sub-tree and all its children to their previously checked state, so as\nnot to permanently override a user's selections. Unchecking the \"Include sub-items\" check box has a similar effect,\ni.e. restores all previous user selections under currently checked sub-trees.\n\n## JavaScript API\n\n`FilterableTreeView` does not yet have an extensive JavaScript API, but this may change in the future as the\ncomponent is further developed to fit additional use-cases.\n\n### Customizing the filter function\n\nThe filter function can be customized by setting the value of the `filterFn` property to a function with the\nfollowing signature:\n\n```typescript\nexport type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null\n```\n\nThis function will be called once for each node in the tree every time filter controls change (i.e. when the\nfilter mode or query string are altered). The function is called with the following arguments:\n\n|Argument |Description |\n|:-----------|:----------------------------------------------------------------|\n|`node` |The HTML node element, i.e. the element with `role=treeitem` set.|\n|`query` |The query string. |\n|`filterMode`|The filter mode, either `'all'` or `'selected'`. |\n\nThe component expects the filter function to return specific values depending on the type of match:\n\n1. No match - return `null`\n2. Match but no highlights (eg. when the query string is empty) - return an empty array\n3. Match with highlights - return a non-empty array of `Range` objects\n\nExample:\n\n```javascript\nconst filterableTreeView = document.querySelector('filterable-tree-view')\nfilterableTreeView.filterFn = (node, query, filterMode) => {\n // custom filter implementation here\n}\n```\n\nYou can read about `Range` objects here: https://developer.mozilla.org/en-US/docs/Web/API/Range.\n\nFor a complete example demonstrating how to implement a working filter function complete with range highlighting,\nsee the default filter function available in the `FilterableTreeViewElement` JavaScript class, which is part of\nthe Primer source code.\n\n### Events\n\nCurrently `FilterableTreeView` does not emit any events aside from the events already emitted by the `TreeView`\ncomponent.\n\n## Async loading strategy\n\nWhen `src` is set on the component, all filter interactions (text input, filter mode changes) trigger a debounced\nserver request instead of client-side filtering. The server is responsible for returning a filtered `<tree-view>`\nHTML fragment that replaces the current tree.\n\n### Behavior\n\n- The full tree is loaded initially from the server via `src`.\n- Each filter input event triggers a debounced (300 ms) request to the server.\n- The server returns a filtered `<tree-view>` element which replaces the existing one.\n- All matching results and their full ancestor hierarchy are expanded automatically.\n- Matching text is highlighted using the CSS Custom Highlight API (or `<mark>` fallback).\n- When the filter is cleared, the tree is replaced with the full (unfiltered) result from\n the server and the expansion state from before the search is restored.\n- Checked nodes are preserved across tree replacements using `data-node-id` attributes.\n- When \"include sub-items\" is active and the tree is filtered, clicking a parent node\n selects ALL its descendants (not just the visible filtered ones). Therefore, \"include_sub_items\" is passed\n to the server, since it holds the only truth about the data.\n\n### Server endpoint\n\nThe server endpoint must return a `<tree-view>` HTML fragment. Each node must have a stable\n`data-node-id` on its `[role=treeitem]` element.\n\n### Usage\n\n```erb\n<%= render(Primer::OpenProject::FilterableTreeView.new(\n src: my_path\n)) %>\n```",
20378
+ "description": "A TreeView and associated filter controls for searching nested hierarchies.\n\n## Filter controls\n\n`FilterableTreeView`s can be filtered using two controls, both present in the toolbar above the tree:\n\n1. A free-form query string from a text input field.\n2. A `SegmentedControl` with two options (by default):\n 1. The \"Selected\" option causes the component to only show checked nodes, provided they also satisfy the other\n filter criteria described here.\n 2. The \"All\" option causes the component to show all nodes, provided they also satisfy the other filter\n criteria described here.\n\n## Custom filter modes\n\nIn addition to the default filter modes of `'all'` and `'selected'` described above, `FilterableTreeView` supports\nadding custom filter modes. Adding a filter mode will cause its label to appear in the `SegmentedControl` in the\ntoolbar, and will be passed as the third argument to the filter function (see below).\n\nHere's how to add a custom filter mode in addition to the default ones:\n\n```erb\n<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree_view| %>\n <%# remove this line to prevent adding the default modes %>\n <% tree_view.with_default_filter_modes %>\n <% tree_view.with_filter_mode(name: \"Custom\", system_arguments)\n<% end %>\n```\n\n## Filter behavior\n\nBy default, matching node text is identified by looking for an exact substring match, operating on a lowercased\nversion of both the query string and the node text. For more information, and to provide a customized filter\nfunction, please see the section titled \"Customizing the filter function\" below.\n\nNodes that match the filter appear as normal; nodes that do not match are presented as follows:\n\n1. Leaf nodes are hidden.\n2. Sub-tree nodes with no matching children are hidden.\n3. Sub-tree nodes with at least one matching child are disabled but still visible.\n\n## Checking behavior\n\nBy default, checking a node in a `FilterableTreeView` checks only that node (i.e. no child nodes are checked).\nTo aide in checking children in deeply nested or highly populated hierarchies, a third control exists in the\ntoolbar: the \"Include sub-items\" check box. If this feature is turned on, checking sub-tree nodes causes all\nchildren, both leaf and sub-tree nodes, to also be checked recursively. Moreover, turning this feature on will\ncause the children of any previously checked nodes to be checked recursively. Unchecking a node while in\n\"Include sub-items\" mode will restore that sub-tree and all its children to their previously checked state, so as\nnot to permanently override a user's selections. Unchecking the \"Include sub-items\" check box has a similar effect,\ni.e. restores all previous user selections under currently checked sub-trees.\n\n## JavaScript API\n\n`FilterableTreeView` does not yet have an extensive JavaScript API, but this may change in the future as the\ncomponent is further developed to fit additional use-cases.\n\n### Customizing the filter function\n\nThe filter function can be customized by setting the value of the `filterFn` property to a function with the\nfollowing signature:\n\n```typescript\nexport type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null\n```\n\nThis function will be called once for each node in the tree every time filter controls change (i.e. when the\nfilter mode or query string are altered). The function is called with the following arguments:\n\n|Argument |Description |\n|:-----------|:----------------------------------------------------------------|\n|`node` |The HTML node element, i.e. the element with `role=treeitem` set.|\n|`query` |The query string. |\n|`filterMode`|The filter mode, either `'all'` or `'selected'`. |\n\nThe component expects the filter function to return specific values depending on the type of match:\n\n1. No match - return `null`\n2. Match but no highlights (eg. when the query string is empty) - return an empty array\n3. Match with highlights - return a non-empty array of `Range` objects\n\nExample:\n\n```javascript\nconst filterableTreeView = document.querySelector('filterable-tree-view')\nfilterableTreeView.filterFn = (node, query, filterMode) => {\n // custom filter implementation here\n}\n```\n\nYou can read about `Range` objects here: https://developer.mozilla.org/en-US/docs/Web/API/Range.\n\nFor a complete example demonstrating how to implement a working filter function complete with range highlighting,\nsee the default filter function available in the `FilterableTreeViewElement` JavaScript class, which is part of\nthe Primer source code.\n\n### Events\n\nCurrently `FilterableTreeView` does not emit any events aside from the events already emitted by the `TreeView`\ncomponent.\n\n## Async loading strategy\n\nWhen `src` is set on the component, all filter interactions (text input, filter mode changes) trigger a debounced\nserver request instead of client-side filtering. The server is responsible for returning a filtered `<tree-view>`\nHTML fragment that replaces the current tree.\n\n### Behavior\n\n- The full tree is loaded initially from the server via `src`.\n- Each filter input event triggers a debounced (300 ms) request to the server.\n- The server returns a filtered `<tree-view>` element which replaces the existing one.\n- All matching results and their full ancestor hierarchy are expanded automatically.\n- Matching text is highlighted using the CSS Custom Highlight API (or `<mark>` fallback).\n- When the filter is cleared, the tree is replaced with the full (unfiltered) result from\n the server and the expansion state from before the search is restored.\n- Checked nodes are preserved across tree replacements using `data-node-id` attributes.\n- When \"include sub-items\" is active and the tree is filtered, clicking a parent node\n selects ALL its descendants (not just the visible filtered ones). Therefore, \"include_sub_items\" is passed\n to the server, since it holds the only truth about the data.\n\n### Server endpoint\n\nThe server endpoint must return a `<tree-view>` HTML fragment. Each node must have a stable\n`data-node-id` on its `[role=treeitem]` element.\n\n### Usage\n\n```erb\n<%= render(Primer::OpenProject::FilterableTreeView.new(\n src: my_path\n)) do |tree_view| %>\n <% tree_view.with_loading_indicator do %>\n <%= render(Primer::Beta::Spinner.new) %>\n <% end %>\n<% end %>\n```",
20354
20379
  "accessibility_docs": null,
20355
20380
  "is_form_component": false,
20356
20381
  "is_published": true,
@@ -20368,6 +20393,12 @@
20368
20393
  "default": "`nil`",
20369
20394
  "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."
20370
20395
  },
20396
+ {
20397
+ "name": "show_search_highlighting",
20398
+ "type": "Boolean",
20399
+ "default": "`true`",
20400
+ "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."
20401
+ },
20371
20402
  {
20372
20403
  "name": "tree_view_arguments",
20373
20404
  "type": "Hash",
@@ -20405,7 +20436,13 @@
20405
20436
  "description": "Arguments that will be passed to a {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}} component that appears when no items match the filter criteria."
20406
20437
  }
20407
20438
  ],
20408
- "slots": [],
20439
+ "slots": [
20440
+ {
20441
+ "name": "loading_indicator",
20442
+ "description": "An optional loading indicator shown while an async filter request is in progress. When omitted, a skeleton\nloader is rendered. This slot is only used when `src` is set.",
20443
+ "parameters": []
20444
+ }
20445
+ ],
20409
20446
  "methods": [],
20410
20447
  "previews": [
20411
20448
  {
@@ -20424,7 +20461,7 @@
20424
20461
  {
20425
20462
  "preview_path": "primer/open_project/filterable_tree_view/default",
20426
20463
  "name": "default",
20427
- "snapshot": "interactive",
20464
+ "snapshot": "true",
20428
20465
  "skip_rules": {
20429
20466
  "wont_fix": [
20430
20467
  "region"
@@ -20499,6 +20536,32 @@
20499
20536
  ]
20500
20537
  }
20501
20538
  },
20539
+ {
20540
+ "preview_path": "primer/open_project/filterable_tree_view/async_custom_loading_indicator",
20541
+ "name": "async_custom_loading_indicator",
20542
+ "snapshot": "false",
20543
+ "skip_rules": {
20544
+ "wont_fix": [
20545
+ "region"
20546
+ ],
20547
+ "will_fix": [
20548
+ "color-contrast"
20549
+ ]
20550
+ }
20551
+ },
20552
+ {
20553
+ "preview_path": "primer/open_project/filterable_tree_view/async_server_highlights",
20554
+ "name": "async_server_highlights",
20555
+ "snapshot": "false",
20556
+ "skip_rules": {
20557
+ "wont_fix": [
20558
+ "region"
20559
+ ],
20560
+ "will_fix": [
20561
+ "color-contrast"
20562
+ ]
20563
+ }
20564
+ },
20502
20565
  {
20503
20566
  "preview_path": "primer/open_project/filterable_tree_view/async_form_input",
20504
20567
  "name": "async_form_input",
@@ -21787,7 +21850,7 @@
21787
21850
  {
21788
21851
  "name": "collapsed_search",
21789
21852
  "type": "Boolean",
21790
- "default": "`false`",
21853
+ "default": "`true`",
21791
21854
  "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
21792
21855
  },
21793
21856
  {
@@ -21938,8 +22001,8 @@
21938
22001
  }
21939
22002
  },
21940
22003
  {
21941
- "preview_path": "primer/open_project/sub_header/collapsed_search",
21942
- "name": "collapsed_search",
22004
+ "preview_path": "primer/open_project/sub_header/expanded_search",
22005
+ "name": "expanded_search",
21943
22006
  "snapshot": "false",
21944
22007
  "skip_rules": {
21945
22008
  "wont_fix": [
data/static/previews.json CHANGED
@@ -4440,7 +4440,7 @@
4440
4440
  {
4441
4441
  "preview_path": "primer/open_project/filterable_tree_view/default",
4442
4442
  "name": "default",
4443
- "snapshot": "interactive",
4443
+ "snapshot": "true",
4444
4444
  "skip_rules": {
4445
4445
  "wont_fix": [
4446
4446
  "region"
@@ -4515,6 +4515,32 @@
4515
4515
  ]
4516
4516
  }
4517
4517
  },
4518
+ {
4519
+ "preview_path": "primer/open_project/filterable_tree_view/async_custom_loading_indicator",
4520
+ "name": "async_custom_loading_indicator",
4521
+ "snapshot": "false",
4522
+ "skip_rules": {
4523
+ "wont_fix": [
4524
+ "region"
4525
+ ],
4526
+ "will_fix": [
4527
+ "color-contrast"
4528
+ ]
4529
+ }
4530
+ },
4531
+ {
4532
+ "preview_path": "primer/open_project/filterable_tree_view/async_server_highlights",
4533
+ "name": "async_server_highlights",
4534
+ "snapshot": "false",
4535
+ "skip_rules": {
4536
+ "wont_fix": [
4537
+ "region"
4538
+ ],
4539
+ "will_fix": [
4540
+ "color-contrast"
4541
+ ]
4542
+ }
4543
+ },
4518
4544
  {
4519
4545
  "preview_path": "primer/open_project/filterable_tree_view/async_form_input",
4520
4546
  "name": "async_form_input",
@@ -4889,12 +4915,12 @@
4889
4915
  },
4890
4916
  {
4891
4917
  "name": "heading",
4892
- "component": "OpenProject::Heading",
4893
- "status": "open_project",
4894
- "lookup_path": "primer/open_project/heading",
4918
+ "component": "Heading",
4919
+ "status": "beta",
4920
+ "lookup_path": "primer/beta/heading",
4895
4921
  "examples": [
4896
4922
  {
4897
- "preview_path": "primer/open_project/heading/playground",
4923
+ "preview_path": "primer/beta/heading/playground",
4898
4924
  "name": "playground",
4899
4925
  "snapshot": "false",
4900
4926
  "skip_rules": {
@@ -4907,7 +4933,7 @@
4907
4933
  }
4908
4934
  },
4909
4935
  {
4910
- "preview_path": "primer/open_project/heading/default",
4936
+ "preview_path": "primer/beta/heading/default",
4911
4937
  "name": "default",
4912
4938
  "snapshot": "true",
4913
4939
  "skip_rules": {
@@ -4923,12 +4949,12 @@
4923
4949
  },
4924
4950
  {
4925
4951
  "name": "heading",
4926
- "component": "Heading",
4927
- "status": "beta",
4928
- "lookup_path": "primer/beta/heading",
4952
+ "component": "OpenProject::Heading",
4953
+ "status": "open_project",
4954
+ "lookup_path": "primer/open_project/heading",
4929
4955
  "examples": [
4930
4956
  {
4931
- "preview_path": "primer/beta/heading/playground",
4957
+ "preview_path": "primer/open_project/heading/playground",
4932
4958
  "name": "playground",
4933
4959
  "snapshot": "false",
4934
4960
  "skip_rules": {
@@ -4941,7 +4967,7 @@
4941
4967
  }
4942
4968
  },
4943
4969
  {
4944
- "preview_path": "primer/beta/heading/default",
4970
+ "preview_path": "primer/open_project/heading/default",
4945
4971
  "name": "default",
4946
4972
  "snapshot": "true",
4947
4973
  "skip_rules": {
@@ -7190,7 +7216,7 @@
7190
7216
  {
7191
7217
  "preview_path": "primer/alpha/segmented_control/icons_and_text_medium",
7192
7218
  "name": "icons_and_text_medium",
7193
- "snapshot": "true",
7219
+ "snapshot": "false",
7194
7220
  "skip_rules": {
7195
7221
  "wont_fix": [
7196
7222
  "region"
@@ -7203,7 +7229,7 @@
7203
7229
  {
7204
7230
  "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
7205
7231
  "name": "trailing_label_width_small",
7206
- "snapshot": "true",
7232
+ "snapshot": "false",
7207
7233
  "skip_rules": {
7208
7234
  "wont_fix": [
7209
7235
  "region"
@@ -7216,7 +7242,7 @@
7216
7242
  {
7217
7243
  "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
7218
7244
  "name": "trailing_label_width_medium",
7219
- "snapshot": "true",
7245
+ "snapshot": "false",
7220
7246
  "skip_rules": {
7221
7247
  "wont_fix": [
7222
7248
  "region"
@@ -8235,8 +8261,8 @@
8235
8261
  }
8236
8262
  },
8237
8263
  {
8238
- "preview_path": "primer/open_project/sub_header/collapsed_search",
8239
- "name": "collapsed_search",
8264
+ "preview_path": "primer/open_project/sub_header/expanded_search",
8265
+ "name": "expanded_search",
8240
8266
  "snapshot": "false",
8241
8267
  "skip_rules": {
8242
8268
  "wont_fix": [
@@ -9808,6 +9834,19 @@
9808
9834
  "color-contrast"
9809
9835
  ]
9810
9836
  }
9837
+ },
9838
+ {
9839
+ "preview_path": "primer/alpha/tree_view/doubled_path",
9840
+ "name": "doubled_path",
9841
+ "snapshot": "false",
9842
+ "skip_rules": {
9843
+ "wont_fix": [
9844
+ "region"
9845
+ ],
9846
+ "will_fix": [
9847
+ "color-contrast"
9848
+ ]
9849
+ }
9811
9850
  }
9812
9851
  ]
9813
9852
  },
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: openproject-primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.89.0
4
+ version: 0.89.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
@@ -79,51 +79,6 @@ files:
79
79
  - CHANGELOG.md
80
80
  - LICENSE.txt
81
81
  - README.md
82
- - app/assets/javascripts/components/primer/alpha/action_bar_element.d.ts
83
- - app/assets/javascripts/components/primer/alpha/action_list.d.ts
84
- - app/assets/javascripts/components/primer/alpha/action_menu/action_menu_element.d.ts
85
- - app/assets/javascripts/components/primer/alpha/action_menu/action_menu_focus_zone_stack.d.ts
86
- - app/assets/javascripts/components/primer/alpha/dropdown.d.ts
87
- - app/assets/javascripts/components/primer/alpha/dropdown/menu.d.ts
88
- - app/assets/javascripts/components/primer/alpha/modal_dialog.d.ts
89
- - app/assets/javascripts/components/primer/alpha/segmented_control.d.ts
90
- - app/assets/javascripts/components/primer/alpha/select_panel_element.d.ts
91
- - app/assets/javascripts/components/primer/alpha/tab_container.d.ts
92
- - app/assets/javascripts/components/primer/alpha/toggle_switch.d.ts
93
- - app/assets/javascripts/components/primer/alpha/tool_tip.d.ts
94
- - app/assets/javascripts/components/primer/alpha/tree_view/tree_view.d.ts
95
- - app/assets/javascripts/components/primer/alpha/tree_view/tree_view_icon_pair_element.d.ts
96
- - app/assets/javascripts/components/primer/alpha/tree_view/tree_view_include_fragment_element.d.ts
97
- - app/assets/javascripts/components/primer/alpha/tree_view/tree_view_roving_tab_index.d.ts
98
- - app/assets/javascripts/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.d.ts
99
- - app/assets/javascripts/components/primer/alpha/x_banner.d.ts
100
- - app/assets/javascripts/components/primer/anchored_position.d.ts
101
- - app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts
102
- - app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts
103
- - app/assets/javascripts/components/primer/beta/details_toggle_element.d.ts
104
- - app/assets/javascripts/components/primer/beta/nav_list.d.ts
105
- - app/assets/javascripts/components/primer/beta/nav_list_group_element.d.ts
106
- - app/assets/javascripts/components/primer/beta/relative_time.d.ts
107
- - app/assets/javascripts/components/primer/dialog_helper.d.ts
108
- - app/assets/javascripts/components/primer/focus_group.d.ts
109
- - app/assets/javascripts/components/primer/open_project/avatar_fallback.d.ts
110
- - app/assets/javascripts/components/primer/open_project/border_box/collapsible_header.d.ts
111
- - app/assets/javascripts/components/primer/open_project/collapsible.d.ts
112
- - app/assets/javascripts/components/primer/open_project/collapsible_section.d.ts
113
- - app/assets/javascripts/components/primer/open_project/danger_dialog_form_helper.d.ts
114
- - app/assets/javascripts/components/primer/open_project/filterable_tree_view.d.ts
115
- - app/assets/javascripts/components/primer/open_project/page_header_element.d.ts
116
- - app/assets/javascripts/components/primer/open_project/sub_header_element.d.ts
117
- - app/assets/javascripts/components/primer/open_project/zen_mode_button.d.ts
118
- - app/assets/javascripts/components/primer/primer.d.ts
119
- - app/assets/javascripts/components/primer/scrollable_region.d.ts
120
- - app/assets/javascripts/components/primer/shared_events.d.ts
121
- - app/assets/javascripts/components/primer/utils.d.ts
122
- - app/assets/javascripts/lib/primer/forms/character_counter.d.ts
123
- - app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts
124
- - app/assets/javascripts/lib/primer/forms/primer_text_area.d.ts
125
- - app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts
126
- - app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts
127
82
  - app/assets/javascripts/primer_view_components.js
128
83
  - app/assets/javascripts/primer_view_components.js.map
129
84
  - app/assets/styles/primer_view_components.css
@@ -1279,6 +1234,7 @@ files:
1279
1234
  - previews/primer/open_project/filterable_tree_view_preview.rb
1280
1235
  - previews/primer/open_project/filterable_tree_view_preview/_custom_select_js.html.erb
1281
1236
  - previews/primer/open_project/filterable_tree_view_preview/async.html.erb
1237
+ - previews/primer/open_project/filterable_tree_view_preview/async_custom_loading_indicator.html.erb
1282
1238
  - previews/primer/open_project/filterable_tree_view_preview/async_form_input.html.erb
1283
1239
  - previews/primer/open_project/filterable_tree_view_preview/async_server_highlights.html.erb
1284
1240
  - previews/primer/open_project/filterable_tree_view_preview/custom_checkbox_text.html.erb
@@ -1,17 +0,0 @@
1
- import { ActionMenuElement } from './action_menu/action_menu_element';
2
- declare class ActionBarElement extends HTMLElement {
3
- #private;
4
- items: HTMLElement[];
5
- itemContainer: HTMLElement;
6
- moreMenu: ActionMenuElement;
7
- connectedCallback(): void;
8
- disconnectedCallback(): void;
9
- menuItemClick(event: Event): void;
10
- update(): void;
11
- }
12
- declare global {
13
- interface Window {
14
- ActionBarElement: typeof ActionBarElement;
15
- }
16
- }
17
- export {};
@@ -1,16 +0,0 @@
1
- export declare class ActionListTruncationObserver {
2
- resizeObserver: ResizeObserver;
3
- constructor(el: HTMLElement);
4
- unobserve(el: HTMLElement): void;
5
- update(el: HTMLElement): void;
6
- }
7
- export declare class ActionListElement extends HTMLElement {
8
- #private;
9
- connectedCallback(): void;
10
- disconnectedCallback(): void;
11
- }
12
- declare global {
13
- interface Window {
14
- ActionListElement: typeof ActionListElement;
15
- }
16
- }
@@ -1,49 +0,0 @@
1
- import '@oddbird/popover-polyfill';
2
- import type { IncludeFragmentElement } from '@github/include-fragment-element';
3
- import AnchoredPositionElement from '../../anchored_position';
4
- type SelectVariant = 'none' | 'single' | 'multiple' | null;
5
- type SelectedItem = {
6
- label: string | null | undefined;
7
- value: string | null | undefined;
8
- element: Element;
9
- };
10
- export declare class ActionMenuElement extends HTMLElement {
11
- #private;
12
- includeFragment: IncludeFragmentElement;
13
- overlay: AnchoredPositionElement;
14
- list: HTMLElement;
15
- static validItemRoles: string[];
16
- static validSelectors: string[];
17
- static menuItemSelectors: string[];
18
- get selectVariant(): SelectVariant;
19
- set selectVariant(variant: SelectVariant);
20
- get dynamicLabelPrefix(): string;
21
- set dynamicLabelPrefix(value: string);
22
- get dynamicLabel(): boolean;
23
- set dynamicLabel(value: boolean);
24
- get popoverElement(): HTMLElement | null;
25
- get childPopoverElements(): HTMLElement[];
26
- get invokerElement(): HTMLButtonElement | null;
27
- get invokerLabel(): HTMLElement | null;
28
- get selectedItems(): SelectedItem[];
29
- connectedCallback(): void;
30
- disconnectedCallback(): void;
31
- handleEvent(event: Event): void;
32
- get items(): HTMLElement[];
33
- getItemById(itemId: string): HTMLElement | null;
34
- isItemDisabled(item: Element | null): boolean;
35
- disableItem(item: Element | null): void;
36
- enableItem(item: Element | null): void;
37
- isItemHidden(item: Element | null): boolean;
38
- hideItem(item: Element | null): void;
39
- showItem(item: Element | null): void;
40
- isItemChecked(item: Element | null): boolean;
41
- checkItem(item: Element | null): void;
42
- uncheckItem(item: Element | null): void;
43
- }
44
- declare global {
45
- interface Window {
46
- ActionMenuElement: typeof ActionMenuElement;
47
- }
48
- }
49
- export {};
@@ -1,17 +0,0 @@
1
- import AnchoredPositionElement from '../../anchored_position';
2
- type StackEntry = {
3
- element: AnchoredPositionElement;
4
- abortController?: AbortController;
5
- };
6
- export declare class ActionMenuFocusZoneStack {
7
- #private;
8
- constructor();
9
- get current(): StackEntry | undefined;
10
- push(next: AnchoredPositionElement, options?: {
11
- trapFocus: boolean;
12
- }): void;
13
- pop(target?: AnchoredPositionElement): void;
14
- elementIsMenuItem(element: HTMLElement): boolean;
15
- get isEmpty(): boolean;
16
- }
17
- export {};
@@ -1 +0,0 @@
1
- import '@github/details-menu-element';
@@ -1 +0,0 @@
1
- import './dropdown/menu';
@@ -1,18 +0,0 @@
1
- export declare class ModalDialogElement extends HTMLElement {
2
- #private;
3
- openButton: HTMLButtonElement | null;
4
- get open(): boolean;
5
- set open(value: boolean);
6
- get showButtons(): NodeList;
7
- connectedCallback(): void;
8
- show(): void;
9
- close(closedNotCancelled?: boolean): void;
10
- }
11
- declare global {
12
- interface Window {
13
- ModalDialogElement: typeof ModalDialogElement;
14
- }
15
- interface HTMLElementTagNameMap {
16
- 'modal-dialog': ModalDialogElement;
17
- }
18
- }
@@ -1,12 +0,0 @@
1
- export declare class SegmentedControlElement extends HTMLElement {
2
- #private;
3
- items: HTMLElement[];
4
- connectedCallback(): void;
5
- select(event: Event): void;
6
- get current(): HTMLElement | null;
7
- }
8
- declare global {
9
- interface Window {
10
- SegmentedControlElement: typeof SegmentedControlElement;
11
- }
12
- }