primer_view_components 0.43.6 → 0.44.0

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 (116) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +14 -0
  3. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view.d.ts +39 -0
  4. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_icon_pair_element.d.ts +15 -0
  5. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_include_fragment_element.d.ts +9 -0
  6. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_roving_tab_index.d.ts +3 -0
  7. data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.d.ts +42 -0
  8. data/app/assets/javascripts/components/primer/primer.d.ts +4 -0
  9. data/app/assets/javascripts/components/primer/shared_events.d.ts +15 -0
  10. data/app/assets/javascripts/primer_view_components.js +1 -1
  11. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  12. data/app/assets/styles/primer_view_components.css +1 -1
  13. data/app/assets/styles/primer_view_components.css.map +1 -1
  14. data/app/components/primer/alpha/file_tree_view/directory_node.html.erb +5 -0
  15. data/app/components/primer/alpha/file_tree_view/directory_node.rb +24 -0
  16. data/app/components/primer/alpha/file_tree_view/file_node.html.erb +2 -0
  17. data/app/components/primer/alpha/file_tree_view/file_node.rb +14 -0
  18. data/app/components/primer/alpha/file_tree_view.rb +15 -0
  19. data/app/components/primer/alpha/skeleton_box.css +1 -0
  20. data/app/components/primer/alpha/skeleton_box.css.json +6 -0
  21. data/app/components/primer/alpha/skeleton_box.css.map +1 -0
  22. data/app/components/primer/alpha/skeleton_box.html.erb +1 -0
  23. data/app/components/primer/alpha/skeleton_box.pcss +30 -0
  24. data/app/components/primer/alpha/skeleton_box.rb +29 -0
  25. data/app/components/primer/alpha/tree_view/icon.html.erb +1 -0
  26. data/app/components/primer/alpha/tree_view/icon.rb +22 -0
  27. data/app/components/primer/alpha/tree_view/icon_pair.html.erb +13 -0
  28. data/app/components/primer/alpha/tree_view/icon_pair.rb +42 -0
  29. data/app/components/primer/alpha/tree_view/leading_action.html.erb +3 -0
  30. data/app/components/primer/alpha/tree_view/leading_action.rb +18 -0
  31. data/app/components/primer/alpha/tree_view/leaf_node.html.erb +18 -0
  32. data/app/components/primer/alpha/tree_view/leaf_node.rb +96 -0
  33. data/app/components/primer/alpha/tree_view/loading_failure_message.html.erb +13 -0
  34. data/app/components/primer/alpha/tree_view/loading_failure_message.rb +31 -0
  35. data/app/components/primer/alpha/tree_view/node.html.erb +32 -0
  36. data/app/components/primer/alpha/tree_view/node.rb +194 -0
  37. data/app/components/primer/alpha/tree_view/skeleton_loader.html.erb +23 -0
  38. data/app/components/primer/alpha/tree_view/skeleton_loader.rb +36 -0
  39. data/app/components/primer/alpha/tree_view/spinner_loader.html.erb +20 -0
  40. data/app/components/primer/alpha/tree_view/spinner_loader.rb +33 -0
  41. data/app/components/primer/alpha/tree_view/sub_tree.html.erb +21 -0
  42. data/app/components/primer/alpha/tree_view/sub_tree.rb +113 -0
  43. data/app/components/primer/alpha/tree_view/sub_tree_container.html.erb +3 -0
  44. data/app/components/primer/alpha/tree_view/sub_tree_container.rb +39 -0
  45. data/app/components/primer/alpha/tree_view/sub_tree_node.html.erb +49 -0
  46. data/app/components/primer/alpha/tree_view/sub_tree_node.rb +188 -0
  47. data/app/components/primer/alpha/tree_view/tree_view.d.ts +39 -0
  48. data/app/components/primer/alpha/tree_view/tree_view.js +363 -0
  49. data/app/components/primer/alpha/tree_view/tree_view.ts +396 -0
  50. data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.d.ts +15 -0
  51. data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.js +62 -0
  52. data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.ts +56 -0
  53. data/app/components/primer/alpha/tree_view/tree_view_include_fragment_element.d.ts +9 -0
  54. data/app/components/primer/alpha/tree_view/tree_view_include_fragment_element.js +28 -0
  55. data/app/components/primer/alpha/tree_view/tree_view_include_fragment_element.ts +28 -0
  56. data/app/components/primer/alpha/tree_view/tree_view_roving_tab_index.d.ts +3 -0
  57. data/app/components/primer/alpha/tree_view/tree_view_roving_tab_index.js +130 -0
  58. data/app/components/primer/alpha/tree_view/tree_view_roving_tab_index.ts +161 -0
  59. data/app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.d.ts +42 -0
  60. data/app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.js +418 -0
  61. data/app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.ts +470 -0
  62. data/app/components/primer/alpha/tree_view/visual.html.erb +14 -0
  63. data/app/components/primer/alpha/tree_view/visual.rb +27 -0
  64. data/app/components/primer/alpha/tree_view.css +1 -0
  65. data/app/components/primer/alpha/tree_view.css.json +52 -0
  66. data/app/components/primer/alpha/tree_view.css.map +1 -0
  67. data/app/components/primer/alpha/tree_view.html.erb +12 -0
  68. data/app/components/primer/alpha/tree_view.pcss +373 -0
  69. data/app/components/primer/alpha/tree_view.rb +439 -0
  70. data/app/components/primer/beta/breadcrumbs.css +1 -1
  71. data/app/components/primer/beta/breadcrumbs.css.json +0 -1
  72. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  73. data/app/components/primer/beta/breadcrumbs.pcss +2 -8
  74. data/app/components/primer/beta/progress_bar.css +1 -1
  75. data/app/components/primer/beta/progress_bar.css.map +1 -1
  76. data/app/components/primer/beta/progress_bar.pcss +3 -2
  77. data/app/components/primer/beta/spinner.html.erb +1 -1
  78. data/app/components/primer/beta/spinner.rb +2 -0
  79. data/app/components/primer/primer.d.ts +4 -0
  80. data/app/components/primer/primer.js +4 -0
  81. data/app/components/primer/primer.pcss +2 -0
  82. data/app/components/primer/primer.ts +4 -0
  83. data/app/components/primer/shared_events.d.ts +15 -0
  84. data/app/components/primer/shared_events.ts +19 -0
  85. data/app/controllers/primer/view_components/tree_view_items.json +293 -0
  86. data/app/controllers/primer/view_components/tree_view_items_controller.rb +55 -0
  87. data/app/forms/check_box_with_nested_form.rb +10 -10
  88. data/app/forms/radio_button_with_nested_form.rb +16 -16
  89. data/app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb +23 -0
  90. data/app/views/primer/view_components/tree_view_items/index.html_fragment.erb +24 -0
  91. data/config/routes.rb +2 -0
  92. data/lib/primer/view_components/version.rb +2 -2
  93. data/previews/primer/alpha/file_tree_view_preview/default.html.erb +16 -0
  94. data/previews/primer/alpha/file_tree_view_preview/playground.html.erb +4 -0
  95. data/previews/primer/alpha/file_tree_view_preview.rb +69 -0
  96. data/previews/primer/alpha/skeleton_box_preview.rb +20 -0
  97. data/previews/primer/alpha/tree_view_preview/async_alpha.html.erb +12 -0
  98. data/previews/primer/alpha/tree_view_preview/buttons.html.erb +10 -0
  99. data/previews/primer/alpha/tree_view_preview/default.html.erb +24 -0
  100. data/previews/primer/alpha/tree_view_preview/empty.html.erb +10 -0
  101. data/previews/primer/alpha/tree_view_preview/form_input.html.erb +14 -0
  102. data/previews/primer/alpha/tree_view_preview/leaf_node_playground.html.erb +15 -0
  103. data/previews/primer/alpha/tree_view_preview/links.html.erb +17 -0
  104. data/previews/primer/alpha/tree_view_preview/loading_failure.html.erb +36 -0
  105. data/previews/primer/alpha/tree_view_preview/loading_skeleton.html.erb +12 -0
  106. data/previews/primer/alpha/tree_view_preview/loading_spinner.html.erb +12 -0
  107. data/previews/primer/alpha/tree_view_preview/playground.html.erb +4 -0
  108. data/previews/primer/alpha/tree_view_preview.rb +208 -0
  109. data/static/arguments.json +450 -0
  110. data/static/audited_at.json +17 -0
  111. data/static/classes.json +15 -0
  112. data/static/constants.json +101 -0
  113. data/static/info_arch.json +1348 -0
  114. data/static/previews.json +232 -0
  115. data/static/statuses.json +17 -0
  116. metadata +87 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 52dd0326c06f9fbdb7dab4fe5eef41147573b0c5e1c40f12249b243b43283afc
4
- data.tar.gz: d409119f98f91dfa72fe1cfe0388651cdf266d9b8c76542267b6721a0afac26a
3
+ metadata.gz: 843033f316e11d7751e51cdf06371ec6d404df71bd0e79fa36ca52991d161fe0
4
+ data.tar.gz: 0c2b2235398f108a70923b9427fbb8b265ebb64c9b0778550ab29fbaf3c7ff68
5
5
  SHA512:
6
- metadata.gz: b0f1abebdd486bf4d528c965cbe6f8a6d94b3314802447129fcae4f0b0e65bd7ec17e9163367af64baa8a278460f9aa14242f002ab1819e0c3a319ae8068a84d
7
- data.tar.gz: 560147121427b780560e5a1bd5183f755793bec97717b84049b4cc2e6d73e8068ebb26b671d40d82c4b9dadded37327f011297d30b047b0c43e1ebc54a736b59
6
+ metadata.gz: be483d6b41a24d15c5c5e92ec73ad403d6c5157d65ba0fac75598cf4e7c7260cc7f3b2b1888a8a00936751d3b3bb51c496e050017a44703a76d9fb5a9f55667a
7
+ data.tar.gz: 6b67b93e5238ee429abdd8a8a100ee338c7a41b1cf37514921e6c26a50dfb13a703ed4393dbc92ebbcb7a979d06ff7073a1b342dd8062a1aea5d6f9843af7814
data/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## 0.44.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#3563](https://github.com/primer/view_components/pull/3563) [`cf9ce00`](https://github.com/primer/view_components/commit/cf9ce00849b200482e2a799a279acb645929ab57) Thanks [@camertron](https://github.com/camertron)! - Introduce Primer::Alpha::TreeView, Primer::Alpha::FileTreeView and Primer::Alpha::SkeletonBox
8
+
9
+ ### Patch Changes
10
+
11
+ - [#3636](https://github.com/primer/view_components/pull/3636) [`fd25aaf`](https://github.com/primer/view_components/commit/fd25aafe80d97251f7522a2c5a9bdf2e3c3b58fc) Thanks [@langermank](https://github.com/langermank)! - Support high contrast themes in `ProgressBar`
12
+
13
+ - [#3613](https://github.com/primer/view_components/pull/3613) [`0ddc1a4`](https://github.com/primer/view_components/commit/0ddc1a41be5dce9f4042e6d4138432554d2419a1) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating snapshots
14
+
15
+ - [#3614](https://github.com/primer/view_components/pull/3614) [`41b64d6`](https://github.com/primer/view_components/commit/41b64d638f0c0805acafb4e17de2935116b63d70) Thanks [@bsatarnejad](https://github.com/bsatarnejad)! - Breadcrumb is not properly left-aligned when it has long items
16
+
3
17
  ## 0.43.6
4
18
 
5
19
  ### Patch Changes
@@ -0,0 +1,39 @@
1
+ import { TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
2
+ import type { TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo } from '../../shared_events';
3
+ export declare class TreeViewElement extends HTMLElement {
4
+ #private;
5
+ formInputContainer: HTMLElement;
6
+ formInputPrototype: HTMLInputElement;
7
+ connectedCallback(): void;
8
+ disconnectedCallback(): void;
9
+ handleEvent(event: Event): void;
10
+ getFormInputValueForNode(node: Element): string | null;
11
+ getNodePath(node: Element): string[];
12
+ getNodeType(node: Element): TreeViewNodeType | null;
13
+ markCurrentAtPath(path: string[]): void;
14
+ get currentNode(): HTMLLIElement | null;
15
+ expandAtPath(path: string[]): void;
16
+ collapseAtPath(path: string[]): void;
17
+ toggleAtPath(path: string[]): void;
18
+ checkAtPath(path: string[]): void;
19
+ uncheckAtPath(path: string[]): void;
20
+ toggleCheckedAtPath(path: string[]): void;
21
+ checkedValueAtPath(path: string[]): TreeViewCheckedValue;
22
+ disabledValueAtPath(path: string[]): boolean;
23
+ nodeAtPath(path: string[], selector?: string): Element | null;
24
+ subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null;
25
+ leafAtPath(path: string[]): HTMLLIElement | null;
26
+ setNodeCheckedValue(node: Element, value: TreeViewCheckedValue): void;
27
+ getNodeCheckedValue(node: Element): TreeViewCheckedValue;
28
+ getNodeDisabledValue(node: Element): boolean;
29
+ setNodeDisabledValue(node: Element, disabled: boolean): void;
30
+ nodeHasCheckBox(node: Element): boolean;
31
+ nodeHasNativeAction(node: Element): boolean;
32
+ expandAncestorsForNode(node: HTMLElement): void;
33
+ infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
34
+ }
35
+ declare global {
36
+ interface Window {
37
+ TreeViewElement: typeof TreeViewElement;
38
+ }
39
+ }
@@ -0,0 +1,15 @@
1
+ export declare class TreeViewIconPairElement extends HTMLElement {
2
+ #private;
3
+ expandedIcon: HTMLElement;
4
+ collapsedIcon: HTMLElement;
5
+ expanded: boolean;
6
+ connectedCallback(): void;
7
+ showExpanded(): void;
8
+ showCollapsed(): void;
9
+ toggle(): void;
10
+ }
11
+ declare global {
12
+ interface Window {
13
+ TreeViewIconPairElement: typeof TreeViewIconPairElement;
14
+ }
15
+ }
@@ -0,0 +1,9 @@
1
+ import { IncludeFragmentElement } from '@github/include-fragment-element';
2
+ export declare class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
3
+ request(): Request;
4
+ }
5
+ declare global {
6
+ interface Window {
7
+ TreeViewIncludeFragmentElement: typeof TreeViewIncludeFragmentElement;
8
+ }
9
+ }
@@ -0,0 +1,3 @@
1
+ import { TreeViewElement } from './tree_view';
2
+ export declare function useRovingTabIndex(containerEl: TreeViewElement): void;
3
+ export declare function getElementState(element: HTMLElement): 'open' | 'closed' | 'end';
@@ -0,0 +1,42 @@
1
+ import { TreeViewIconPairElement } from './tree_view_icon_pair_element';
2
+ import { TreeViewIncludeFragmentElement } from './tree_view_include_fragment_element';
3
+ import { TreeViewElement } from './tree_view';
4
+ type LoadingState = 'loading' | 'error' | 'success';
5
+ export type SelectStrategy = 'self' | 'descendants' | 'mixed_descendants';
6
+ export declare class TreeViewSubTreeNodeElement extends HTMLElement {
7
+ #private;
8
+ node: HTMLElement;
9
+ subTree: HTMLElement;
10
+ iconPair: TreeViewIconPairElement;
11
+ toggleButton: HTMLElement;
12
+ expandedToggleIcon: HTMLElement;
13
+ collapsedToggleIcon: HTMLElement;
14
+ includeFragment: TreeViewIncludeFragmentElement;
15
+ loadingIndicator: HTMLElement;
16
+ loadingFailureMessage: HTMLElement;
17
+ retryButton: HTMLButtonElement;
18
+ connectedCallback(): void;
19
+ get expanded(): boolean;
20
+ set expanded(newValue: boolean);
21
+ get loadingState(): LoadingState;
22
+ set loadingState(newState: LoadingState);
23
+ get selectStrategy(): SelectStrategy;
24
+ disconnectedCallback(): void;
25
+ handleEvent(event: Event): void;
26
+ expand(): void;
27
+ collapse(): void;
28
+ toggle(): void;
29
+ get nodes(): NodeListOf<Element>;
30
+ eachDirectDescendantNode(): Generator<Element>;
31
+ eachDescendantNode(): Generator<Element>;
32
+ eachAncestorSubTreeNode(): Generator<TreeViewSubTreeNodeElement>;
33
+ get isEmpty(): boolean;
34
+ get treeView(): TreeViewElement | null;
35
+ toggleChecked(): void;
36
+ }
37
+ declare global {
38
+ interface Window {
39
+ TreeViewSubTreeNodeElement: typeof TreeViewSubTreeNodeElement;
40
+ }
41
+ }
42
+ export {};
@@ -26,3 +26,7 @@ import '../../lib/primer/forms/toggle_switch_input';
26
26
  import './alpha/action_menu/action_menu_element';
27
27
  import './alpha/select_panel_element';
28
28
  import './beta/details_toggle_element';
29
+ import './alpha/tree_view/tree_view';
30
+ import './alpha/tree_view/tree_view_icon_pair_element';
31
+ import './alpha/tree_view/tree_view_sub_tree_node_element';
32
+ import './alpha/tree_view/tree_view_include_fragment_element';
@@ -3,9 +3,24 @@ export type ItemActivatedEvent = {
3
3
  checked: boolean;
4
4
  value: string | null;
5
5
  };
6
+ export type TreeViewNodeType = 'leaf' | 'sub-tree';
7
+ export type TreeViewCheckedValue = 'true' | 'false' | 'mixed';
8
+ export type TreeViewNodeInfo = {
9
+ node: Element;
10
+ type: TreeViewNodeType;
11
+ path: string[];
12
+ checkedValue: TreeViewCheckedValue;
13
+ previousCheckedValue: TreeViewCheckedValue;
14
+ };
6
15
  declare global {
7
16
  interface HTMLElementEventMap {
8
17
  itemActivated: CustomEvent<ItemActivatedEvent>;
9
18
  beforeItemActivated: CustomEvent<ItemActivatedEvent>;
19
+ treeViewNodeActivated: CustomEvent<TreeViewNodeInfo>;
20
+ treeViewBeforeNodeActivated: CustomEvent<TreeViewNodeInfo>;
21
+ treeViewNodeExpanded: CustomEvent<TreeViewNodeInfo>;
22
+ treeViewNodeCollapsed: CustomEvent<TreeViewNodeInfo>;
23
+ treeViewNodeChecked: CustomEvent<TreeViewNodeInfo[]>;
24
+ treeViewBeforeNodeChecked: CustomEvent<TreeViewNodeInfo[]>;
10
25
  }
11
26
  }