primer_view_components 0.0.96 → 0.0.97

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 (40) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -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_list/action-list-selection.pcss +92 -0
  8. data/app/components/primer/alpha/action_list/action-list.pcss +620 -0
  9. data/app/components/primer/alpha/action_list/divider.rb +35 -0
  10. data/app/components/primer/alpha/action_list/heading.html.erb +8 -0
  11. data/app/components/primer/alpha/action_list/heading.rb +38 -0
  12. data/app/components/primer/alpha/action_list/item.html.erb +39 -0
  13. data/app/components/primer/alpha/action_list/item.rb +230 -0
  14. data/app/components/primer/alpha/action_list.html.erb +15 -0
  15. data/app/components/primer/alpha/action_list.rb +112 -0
  16. data/app/components/primer/alpha/dialog/header.rb +1 -1
  17. data/app/components/primer/alpha/nav_list/item.html.erb +13 -0
  18. data/app/components/primer/alpha/nav_list/item.rb +89 -0
  19. data/app/components/primer/alpha/nav_list/section.html.erb +3 -0
  20. data/app/components/primer/alpha/nav_list/section.rb +88 -0
  21. data/app/components/primer/alpha/nav_list.d.ts +25 -0
  22. data/app/components/primer/alpha/nav_list.html.erb +10 -0
  23. data/app/components/primer/alpha/nav_list.js +130 -0
  24. data/app/components/primer/alpha/nav_list.rb +112 -0
  25. data/app/components/primer/alpha/nav_list.ts +129 -0
  26. data/app/components/primer/primer.d.ts +1 -0
  27. data/app/components/primer/primer.js +1 -0
  28. data/app/components/primer/primer.pcss +1 -0
  29. data/app/components/primer/primer.ts +1 -0
  30. data/lib/postcss_mixins/activeIndicatorLine.pcss +11 -0
  31. data/lib/primer/view_components/version.rb +1 -1
  32. data/lib/tasks/docs.rake +51 -22
  33. data/lib/yard/docs_helper.rb +3 -3
  34. data/static/arguments.json +267 -3
  35. data/static/audited_at.json +7 -0
  36. data/static/constants.json +76 -0
  37. data/static/statuses.json +7 -0
  38. metadata +21 -4
  39. data/app/components/primer/experimental/action_bar.d.ts +0 -14
  40. data/app/components/primer/experimental/action_bar.js +0 -141
@@ -1,4 +1,196 @@
1
1
  [
2
+ {
3
+ "component": "ActionList",
4
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb",
5
+ "parameters": [
6
+ {
7
+ "name": "role",
8
+ "type": "Boolean",
9
+ "default": "`:list`",
10
+ "description": "ARIA role describing the function of the list. listbox and menu are a common values."
11
+ },
12
+ {
13
+ "name": "item_classes",
14
+ "type": "String",
15
+ "default": "`nil`",
16
+ "description": "Additional CSS classes to attach to items."
17
+ },
18
+ {
19
+ "name": "scheme",
20
+ "type": "Symbol",
21
+ "default": "`:full`",
22
+ "description": "One of `:full` or `:inset`.. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
23
+ },
24
+ {
25
+ "name": "show_dividers",
26
+ "type": "Boolean",
27
+ "default": "`false`",
28
+ "description": "Display a divider above each item in the list when it does not follow a header or divider."
29
+ },
30
+ {
31
+ "name": "system_arguments",
32
+ "type": "Hash",
33
+ "default": "N/A",
34
+ "description": "[System arguments](/system-arguments)"
35
+ }
36
+ ]
37
+ },
38
+ {
39
+ "component": "ActionList::Divider",
40
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb",
41
+ "parameters": [
42
+ {
43
+ "name": "scheme",
44
+ "type": "Symbol",
45
+ "default": "`:subtle`",
46
+ "description": "Display a background color if scheme is `filled`."
47
+ },
48
+ {
49
+ "name": "system_arguments",
50
+ "type": "Hash",
51
+ "default": "N/A",
52
+ "description": "[System arguments](/system-arguments)"
53
+ }
54
+ ]
55
+ },
56
+ {
57
+ "component": "ActionList::Heading",
58
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb",
59
+ "parameters": [
60
+ {
61
+ "name": "list_id",
62
+ "type": "String",
63
+ "default": "N/A",
64
+ "description": "The unique identifier of the sub list the heading belongs to. Used internally."
65
+ },
66
+ {
67
+ "name": "title",
68
+ "type": "String",
69
+ "default": "N/A",
70
+ "description": "Sub list title."
71
+ },
72
+ {
73
+ "name": "subtitle",
74
+ "type": "String",
75
+ "default": "`nil`",
76
+ "description": "Optional sub list description."
77
+ },
78
+ {
79
+ "name": "scheme",
80
+ "type": "Symbol",
81
+ "default": "`:subtle`",
82
+ "description": "Display a background color if scheme is `filled`."
83
+ },
84
+ {
85
+ "name": "tag",
86
+ "type": "Symbol",
87
+ "default": "`:h3`",
88
+ "description": "Semantic tag for the heading."
89
+ },
90
+ {
91
+ "name": "system_arguments",
92
+ "type": "Hash",
93
+ "default": "N/A",
94
+ "description": "[System arguments](/system-arguments)"
95
+ }
96
+ ]
97
+ },
98
+ {
99
+ "component": "ActionList::Item",
100
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb",
101
+ "parameters": [
102
+ {
103
+ "name": "list",
104
+ "type": "Primer::Alpha::ActionList",
105
+ "default": "N/A",
106
+ "description": "The list that contains this item. Used internally."
107
+ },
108
+ {
109
+ "name": "parent",
110
+ "type": "Primer::Alpha::ActionList::Item",
111
+ "default": "`nil`",
112
+ "description": "This item's parent item. `nil` if this item is at the root. Used internally."
113
+ },
114
+ {
115
+ "name": "label",
116
+ "type": "String",
117
+ "default": "N/A",
118
+ "description": "Item label."
119
+ },
120
+ {
121
+ "name": "label_classes",
122
+ "type": "String",
123
+ "default": "`nil`",
124
+ "description": "CSS classes that will be added to the label."
125
+ },
126
+ {
127
+ "name": "truncate_label",
128
+ "type": "Boolean",
129
+ "default": "`false`",
130
+ "description": "Truncate label with ellipsis."
131
+ },
132
+ {
133
+ "name": "href",
134
+ "type": "String",
135
+ "default": "`nil`",
136
+ "description": "Link URL."
137
+ },
138
+ {
139
+ "name": "role",
140
+ "type": "String",
141
+ "default": "`:listitem`",
142
+ "description": "ARIA role describing the function of the item."
143
+ },
144
+ {
145
+ "name": "size",
146
+ "type": "Symbol",
147
+ "default": "`:medium`",
148
+ "description": "Controls block sizing of the item."
149
+ },
150
+ {
151
+ "name": "scheme",
152
+ "type": "Symbol",
153
+ "default": "`:default`",
154
+ "description": "Controls color/style based on behavior."
155
+ },
156
+ {
157
+ "name": "disabled",
158
+ "type": "Boolean",
159
+ "default": "`false`",
160
+ "description": "Disabled items are not clickable and visually dim."
161
+ },
162
+ {
163
+ "name": "description_scheme",
164
+ "type": "Symbol",
165
+ "default": "`:block`",
166
+ "description": "Display description inline with label, or block on the next line."
167
+ },
168
+ {
169
+ "name": "active",
170
+ "type": "Boolean",
171
+ "default": "`false`",
172
+ "description": "Sets an active state on navigational items."
173
+ },
174
+ {
175
+ "name": "on_click",
176
+ "type": "String",
177
+ "default": "`nil`",
178
+ "description": "JavaScript to execute when the item is clicked."
179
+ },
180
+ {
181
+ "name": "id",
182
+ "type": "String",
183
+ "default": "`SecureRandom.hex`",
184
+ "description": "Used internally."
185
+ },
186
+ {
187
+ "name": "system_arguments",
188
+ "type": "Hash",
189
+ "default": "N/A",
190
+ "description": "[System arguments](/system-arguments)"
191
+ }
192
+ ]
193
+ },
2
194
  {
3
195
  "component": "ButtonMarketing",
4
196
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb",
@@ -143,6 +335,78 @@
143
335
  }
144
336
  ]
145
337
  },
338
+ {
339
+ "component": "NavList",
340
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
341
+ "parameters": [
342
+ {
343
+ "name": "selected_item_id",
344
+ "type": "Symbol",
345
+ "default": "`nil`",
346
+ "description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
347
+ },
348
+ {
349
+ "name": "system_arguments",
350
+ "type": "Hash",
351
+ "default": "N/A",
352
+ "description": "[System arguments](/system-arguments)"
353
+ }
354
+ ]
355
+ },
356
+ {
357
+ "component": "NavList::Item",
358
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
359
+ "parameters": [
360
+ {
361
+ "name": "selected_item_id",
362
+ "type": "Symbol",
363
+ "default": "`nil`",
364
+ "description": "The ID of the currently selected list item. Used internally."
365
+ },
366
+ {
367
+ "name": "selected_by_ids",
368
+ "type": "Array<Symbol>",
369
+ "default": "`[]`",
370
+ "description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
371
+ },
372
+ {
373
+ "name": "expanded",
374
+ "type": "Boolean",
375
+ "default": "`false`",
376
+ "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
377
+ },
378
+ {
379
+ "name": "sub_item",
380
+ "type": "Boolean",
381
+ "default": "`false`",
382
+ "description": "Whether or not this item is nested under a parent item. Used internally."
383
+ },
384
+ {
385
+ "name": "system_arguments",
386
+ "type": "Hash",
387
+ "default": "N/A",
388
+ "description": "[System arguments](/system-arguments)"
389
+ }
390
+ ]
391
+ },
392
+ {
393
+ "component": "NavList::Section",
394
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
395
+ "parameters": [
396
+ {
397
+ "name": "selected_item_id",
398
+ "type": "Symbol",
399
+ "default": "`nil`",
400
+ "description": "The ID of the currently selected item. Used internally."
401
+ },
402
+ {
403
+ "name": "system_arguments",
404
+ "type": "Hash",
405
+ "default": "N/A",
406
+ "description": "[System arguments](/system-arguments)"
407
+ }
408
+ ]
409
+ },
146
410
  {
147
411
  "component": "TabNav",
148
412
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb",
@@ -594,7 +858,7 @@
594
858
  ]
595
859
  },
596
860
  {
597
- "component": "AutoCompleteItem",
861
+ "component": "AutoComplete::Item",
598
862
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb",
599
863
  "parameters": [
600
864
  {
@@ -792,7 +1056,7 @@
792
1056
  ]
793
1057
  },
794
1058
  {
795
- "component": "BorderBoxHeader",
1059
+ "component": "BorderBox::Header",
796
1060
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box/header.rb",
797
1061
  "parameters": [
798
1062
  {
@@ -1698,7 +1962,7 @@
1698
1962
  ]
1699
1963
  },
1700
1964
  {
1701
- "component": "NavigationTab",
1965
+ "component": "Navigation::Tab",
1702
1966
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
1703
1967
  "parameters": [
1704
1968
  {
@@ -1,4 +1,8 @@
1
1
  {
2
+ "Primer::Alpha::ActionList": "",
3
+ "Primer::Alpha::ActionList::Divider": "",
4
+ "Primer::Alpha::ActionList::Heading": "",
5
+ "Primer::Alpha::ActionList::Item": "",
2
6
  "Primer::Alpha::AutoComplete": "",
3
7
  "Primer::Alpha::AutoComplete::Item": "",
4
8
  "Primer::Alpha::ButtonMarketing": "",
@@ -10,6 +14,9 @@
10
14
  "Primer::Alpha::Layout": "",
11
15
  "Primer::Alpha::Layout::Main": "",
12
16
  "Primer::Alpha::Layout::Sidebar": "",
17
+ "Primer::Alpha::NavList": "",
18
+ "Primer::Alpha::NavList::Item": "",
19
+ "Primer::Alpha::NavList::Section": "",
13
20
  "Primer::Alpha::TabNav": "",
14
21
  "Primer::Alpha::TabPanels": "",
15
22
  "Primer::Alpha::TextField": "",
@@ -1,4 +1,72 @@
1
1
  {
2
+ "Primer::Alpha::ActionList": {
3
+ "DEFAULT_ROLE": "list",
4
+ "DEFAULT_SCHEME": "full",
5
+ "Divider": "Primer::Alpha::ActionList::Divider",
6
+ "Heading": "Primer::Alpha::ActionList::Heading",
7
+ "Item": "Primer::Alpha::ActionList::Item",
8
+ "SCHEME_MAPPINGS": {
9
+ "full": null,
10
+ "inset": "ActionListWrap--inset"
11
+ },
12
+ "SCHEME_OPTIONS": [
13
+ "full",
14
+ "inset"
15
+ ]
16
+ },
17
+ "Primer::Alpha::ActionList::Divider": {
18
+ "DEFAULT_SCHEME": "subtle",
19
+ "SCHEME_MAPPINGS": {
20
+ "subtle": null,
21
+ "filled": "ActionList-sectionDivider--filled"
22
+ },
23
+ "SCHEME_OPTIONS": [
24
+ "subtle",
25
+ "filled"
26
+ ]
27
+ },
28
+ "Primer::Alpha::ActionList::Heading": {
29
+ "DEFAULT_SCHEME": "subtle",
30
+ "SCHEME_MAPPINGS": {
31
+ "subtle": null,
32
+ "filled": "ActionList-sectionDivider--filled"
33
+ },
34
+ "SCHEME_OPTIONS": [
35
+ "subtle",
36
+ "filled"
37
+ ]
38
+ },
39
+ "Primer::Alpha::ActionList::Item": {
40
+ "DEFAULT_DESCRIPTION_SCHEME": "block",
41
+ "DEFAULT_SCHEME": "default",
42
+ "DEFAULT_SIZE": "medium",
43
+ "DESCRIPTION_SCHEME_MAPPINGS": {
44
+ "inline": "ActionListItem-descriptionWrap--inline",
45
+ "block": "ActionListItem-descriptionWrap"
46
+ },
47
+ "DESCRIPTION_SCHEME_OPTIONS": [
48
+ "inline",
49
+ "block"
50
+ ],
51
+ "SCHEME_MAPPINGS": {
52
+ "default": null,
53
+ "danger": "ActionListItem--danger"
54
+ },
55
+ "SCHEME_OPTIONS": [
56
+ "default",
57
+ "danger"
58
+ ],
59
+ "SIZE_MAPPINGS": {
60
+ "medium": null,
61
+ "large": "ActionListContent--sizeLarge",
62
+ "xlarge": "ActionListContent--sizeXLarge"
63
+ },
64
+ "SIZE_OPTIONS": [
65
+ "medium",
66
+ "large",
67
+ "xlarge"
68
+ ]
69
+ },
2
70
  "Primer::Alpha::AutoComplete": {
3
71
  "Item": "Primer::Alpha::AutoComplete::Item"
4
72
  },
@@ -170,6 +238,14 @@
170
238
  "section"
171
239
  ]
172
240
  },
241
+ "Primer::Alpha::NavList": {
242
+ "Item": "Primer::Alpha::NavList::Item",
243
+ "Section": "Primer::Alpha::NavList::Section"
244
+ },
245
+ "Primer::Alpha::NavList::Item": {
246
+ },
247
+ "Primer::Alpha::NavList::Section": {
248
+ },
173
249
  "Primer::Alpha::TabNav": {
174
250
  "BODY_TAG_DEFAULT": "ul",
175
251
  "TAG_DEFAULT": "nav",
data/static/statuses.json CHANGED
@@ -1,4 +1,8 @@
1
1
  {
2
+ "Primer::Alpha::ActionList": "alpha",
3
+ "Primer::Alpha::ActionList::Divider": "alpha",
4
+ "Primer::Alpha::ActionList::Heading": "alpha",
5
+ "Primer::Alpha::ActionList::Item": "alpha",
2
6
  "Primer::Alpha::AutoComplete": "deprecated",
3
7
  "Primer::Alpha::AutoComplete::Item": "deprecated",
4
8
  "Primer::Alpha::ButtonMarketing": "alpha",
@@ -10,6 +14,9 @@
10
14
  "Primer::Alpha::Layout": "alpha",
11
15
  "Primer::Alpha::Layout::Main": "alpha",
12
16
  "Primer::Alpha::Layout::Sidebar": "alpha",
17
+ "Primer::Alpha::NavList": "alpha",
18
+ "Primer::Alpha::NavList::Item": "alpha",
19
+ "Primer::Alpha::NavList::Section": "alpha",
13
20
  "Primer::Alpha::TabNav": "alpha",
14
21
  "Primer::Alpha::TabPanels": "alpha",
15
22
  "Primer::Alpha::TextField": "alpha",
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.96
4
+ version: 0.0.97
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-09-26 00:00:00.000000000 Z
11
+ date: 2022-09-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -408,6 +408,15 @@ files:
408
408
  - app/assets/javascripts/primer_view_components.js.map
409
409
  - app/assets/styles/primer_view_components.css
410
410
  - app/assets/styles/primer_view_components.css.map
411
+ - app/components/primer/alpha/action_list.html.erb
412
+ - app/components/primer/alpha/action_list.rb
413
+ - app/components/primer/alpha/action_list/action-list-selection.pcss
414
+ - app/components/primer/alpha/action_list/action-list.pcss
415
+ - app/components/primer/alpha/action_list/divider.rb
416
+ - app/components/primer/alpha/action_list/heading.html.erb
417
+ - app/components/primer/alpha/action_list/heading.rb
418
+ - app/components/primer/alpha/action_list/item.html.erb
419
+ - app/components/primer/alpha/action_list/item.rb
411
420
  - app/components/primer/alpha/auto_complete.rb
412
421
  - app/components/primer/alpha/auto_complete/auto_complete.html.erb
413
422
  - app/components/primer/alpha/auto_complete/item.rb
@@ -424,6 +433,15 @@ files:
424
433
  - app/components/primer/alpha/modal_dialog.d.ts
425
434
  - app/components/primer/alpha/modal_dialog.js
426
435
  - app/components/primer/alpha/modal_dialog.ts
436
+ - app/components/primer/alpha/nav_list.d.ts
437
+ - app/components/primer/alpha/nav_list.html.erb
438
+ - app/components/primer/alpha/nav_list.js
439
+ - app/components/primer/alpha/nav_list.rb
440
+ - app/components/primer/alpha/nav_list.ts
441
+ - app/components/primer/alpha/nav_list/item.html.erb
442
+ - app/components/primer/alpha/nav_list/item.rb
443
+ - app/components/primer/alpha/nav_list/section.html.erb
444
+ - app/components/primer/alpha/nav_list/section.rb
427
445
  - app/components/primer/alpha/tab_nav.html.erb
428
446
  - app/components/primer/alpha/tab_nav.rb
429
447
  - app/components/primer/alpha/tab_panels.html.erb
@@ -508,8 +526,6 @@ files:
508
526
  - app/components/primer/dropdown/menu.ts
509
527
  - app/components/primer/dropdown_menu_component.html.erb
510
528
  - app/components/primer/dropdown_menu_component.rb
511
- - app/components/primer/experimental/action_bar.d.ts
512
- - app/components/primer/experimental/action_bar.js
513
529
  - app/components/primer/flex_component.rb
514
530
  - app/components/primer/flex_item_component.rb
515
531
  - app/components/primer/heading_component.rb
@@ -577,6 +593,7 @@ files:
577
593
  - app/lib/primer/test_selector_helper.rb
578
594
  - app/lib/primer/underline_nav_helper.rb
579
595
  - app/lib/primer/view_helper.rb
596
+ - lib/postcss_mixins/activeIndicatorLine.pcss
580
597
  - lib/postcss_mixins/focusBoxShadowInset.pcss
581
598
  - lib/postcss_mixins/focusOutline.pcss
582
599
  - lib/postcss_mixins/focusOutlineOnEmphasis.pcss
@@ -1,14 +0,0 @@
1
- export declare class ActionBarElement extends HTMLElement {
2
- #private;
3
- items: HTMLElement[];
4
- menuItems: HTMLElement[];
5
- itemContainer: HTMLElement;
6
- moreMenu: HTMLElement;
7
- connectedCallback(): void;
8
- disconnectedCallback(): void;
9
- }
10
- declare global {
11
- interface Window {
12
- ActionBarElement: typeof ActionBarElement;
13
- }
14
- }
@@ -1,141 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
8
- if (kind === "m") throw new TypeError("Private method is not writable");
9
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
10
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
11
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
12
- };
13
- var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
14
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
15
- 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");
16
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
17
- };
18
- var _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_itemGap, _ActionBarElement_focusController, _ActionBarElement_focusSettings, _ActionBarElement_availableSpace, _ActionBarElement_shrinking, _ActionBarElement_growing;
19
- import { controller, targets, target } from '@github/catalyst';
20
- import { focusZone, FocusKeys } from '@primer/behaviors';
21
- let ActionBarElement = class ActionBarElement extends HTMLElement {
22
- constructor() {
23
- super(...arguments);
24
- _ActionBarElement_instances.add(this);
25
- _ActionBarElement_observer.set(this, void 0);
26
- _ActionBarElement_initialBarWidth.set(this, void 0);
27
- _ActionBarElement_previousBarWidth.set(this, void 0);
28
- _ActionBarElement_itemGap.set(this, void 0);
29
- _ActionBarElement_focusController.set(this, void 0);
30
- _ActionBarElement_focusSettings.set(this, {
31
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
32
- });
33
- }
34
- connectedCallback() {
35
- var _a, _b, _c;
36
- __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
37
- __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, this.offsetWidth, "f");
38
- __classPrivateFieldSet(this, _ActionBarElement_itemGap, parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0, "f");
39
- // Calculate the width of all the items before hiding anything
40
- for (const item of this.items) {
41
- const width = item.getBoundingClientRect().width;
42
- const marginLeft = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginLeft, 10);
43
- const marginRight = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginRight, 10);
44
- item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
45
- }
46
- __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
47
- this.style.maxWidth = `${this.itemContainer.offsetWidth}px`;
48
- // Calculate visible items on page load until there is enough space
49
- // to show all items or the first item is hidden
50
- while (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5 && !this.items[0].hidden) {
51
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
52
- }
53
- this.style.overflow = 'visible';
54
- __classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
55
- for (const entry of entries) {
56
- // Only recalculate if the bar width changed
57
- if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
58
- if (entry.contentRect.width < __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
59
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
60
- }
61
- else {
62
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_growing).call(this);
63
- }
64
- __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, entry.contentRect.width, "f");
65
- }
66
- }
67
- }), "f");
68
- __classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
69
- }
70
- disconnectedCallback() {
71
- var _a;
72
- (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
73
- __classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
74
- }
75
- };
76
- _ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_itemGap = new WeakMap(), _ActionBarElement_focusController = new WeakMap(), _ActionBarElement_focusSettings = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
77
- // Get the offset of the item container from the container edge
78
- return this.offsetWidth - this.itemContainer.offsetWidth;
79
- }, _ActionBarElement_shrinking = function _ActionBarElement_shrinking() {
80
- var _a;
81
- if (this.items[0].hidden) {
82
- return;
83
- }
84
- const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
85
- if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + gapSpace) {
86
- const visibleItems = this.items.filter(item => !item.hidden);
87
- const hiddenMenuItems = this.menuItems.filter(item => item.hidden);
88
- visibleItems[visibleItems.length - 1].hidden = true;
89
- hiddenMenuItems[hiddenMenuItems.length - 1].hidden = false;
90
- if (this.moreMenu.hidden) {
91
- this.moreMenu.hidden = false;
92
- }
93
- // Reset focus controller
94
- (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
95
- __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
96
- }
97
- }, _ActionBarElement_growing = function _ActionBarElement_growing() {
98
- var _a;
99
- if (this.moreMenu.hidden) {
100
- return;
101
- }
102
- const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
103
- const hiddenItems = this.items.filter(item => item.hidden);
104
- if (hiddenItems.length === 0) {
105
- return;
106
- }
107
- const hiddenItemWidth = Number(hiddenItems[0].getAttribute('data-offset-width'));
108
- if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= this.moreMenu.offsetWidth + hiddenItemWidth + gapSpace) {
109
- const visibleMenuItems = this.menuItems.filter(item => !item.hidden);
110
- hiddenItems[0].hidden = false;
111
- visibleMenuItems[0].hidden = true;
112
- if (hiddenItems.length === 2) {
113
- hiddenItems[1].hidden = false;
114
- visibleMenuItems[1].hidden = true;
115
- }
116
- // If there was only one item left, hide the more menu
117
- if (hiddenItems.length <= 2) {
118
- this.moreMenu.hidden = true;
119
- }
120
- // Reset focus controller
121
- (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
122
- __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
123
- }
124
- };
125
- __decorate([
126
- targets
127
- ], ActionBarElement.prototype, "items", void 0);
128
- __decorate([
129
- targets
130
- ], ActionBarElement.prototype, "menuItems", void 0);
131
- __decorate([
132
- target
133
- ], ActionBarElement.prototype, "itemContainer", void 0);
134
- __decorate([
135
- target
136
- ], ActionBarElement.prototype, "moreMenu", void 0);
137
- ActionBarElement = __decorate([
138
- controller
139
- ], ActionBarElement);
140
- export { ActionBarElement };
141
- window.ActionBarElement = ActionBarElement;