@primer/view-components 0.11.0-rc.e3faa6d9 → 0.11.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.
@@ -90,11 +90,11 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
90
90
  if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
91
91
  __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
92
92
  }
93
- __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this.itemContainer, {
93
+ __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
94
94
  bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
95
95
  focusOutBehavior: 'wrap',
96
96
  focusableElementFilter: element => {
97
- return !element.closest('.ActionBar-item[hidden]');
97
+ return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem');
98
98
  }
99
99
  }), "f");
100
100
  }
@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
9
9
  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");
10
10
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
11
  };
12
- var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
12
+ var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
13
13
  import '@oddbird/popover-polyfill';
14
14
  const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
15
15
  const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
@@ -19,6 +19,7 @@ export default class FocusGroupElement extends HTMLElement {
19
19
  constructor() {
20
20
  super(...arguments);
21
21
  _FocusGroupElement_instances.add(this);
22
+ _FocusGroupElement_retainSignal.set(this, null);
22
23
  _FocusGroupElement_abortController.set(this, null);
23
24
  }
24
25
  get nowrap() {
@@ -57,11 +58,35 @@ export default class FocusGroupElement extends HTMLElement {
57
58
  (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
58
59
  }
59
60
  handleEvent(event) {
61
+ var _a;
60
62
  const { direction, nowrap } = this;
61
63
  if (event.type === 'focusin') {
62
64
  if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
65
+ (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
66
+ const { signal } = (__classPrivateFieldSet(this, _FocusGroupElement_retainSignal, new AbortController(), "f"));
63
67
  for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
64
68
  item.setAttribute('tabindex', item === event.target ? '0' : '-1');
69
+ const popover = event.target.closest('[popover]');
70
+ if (item === event.target && (popover === null || popover === void 0 ? void 0 : popover.popover) === 'auto' && popover.closest('focus-group') === this) {
71
+ popover.addEventListener('toggle', (toggleEvent) => {
72
+ var _a, _b;
73
+ if (!(toggleEvent.target instanceof Element))
74
+ return;
75
+ if (toggleEvent.newState === 'closed') {
76
+ (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
77
+ item.setAttribute('tabindex', '-1');
78
+ if (popover.id) {
79
+ const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
80
+ if (invoker) {
81
+ invoker.setAttribute('tabindex', '0');
82
+ }
83
+ else {
84
+ (_b = __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
85
+ }
86
+ }
87
+ }
88
+ }, { signal });
89
+ }
65
90
  }
66
91
  }
67
92
  }
@@ -121,7 +146,7 @@ export default class FocusGroupElement extends HTMLElement {
121
146
  let el = focusEl;
122
147
  do {
123
148
  el = el.closest(`[popover]:not(:popover-open)`);
124
- if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
149
+ if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
125
150
  el.showPopover();
126
151
  }
127
152
  el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
@@ -131,7 +156,7 @@ export default class FocusGroupElement extends HTMLElement {
131
156
  }
132
157
  }
133
158
  }
134
- _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
159
+ _FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
135
160
  return this.querySelectorAll(menuItemSelector);
136
161
  };
137
162
  if (!customElements.get('focus-group')) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.11.0-rc.e3faa6d9",
3
+ "version": "0.11.0",
4
4
  "description": "ViewComponents for the Primer Design System",
5
5
  "main": "app/assets/javascripts/primer_view_components.js",
6
6
  "module": "app/components/primer/primer.js",
@@ -46,7 +46,18 @@
46
46
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
47
47
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
48
48
  "parameters": [
49
-
49
+ {
50
+ "name": "item_content",
51
+ "type": "String",
52
+ "default": "N/A",
53
+ "description": "The content to render inside the item."
54
+ },
55
+ {
56
+ "name": "item_arguments",
57
+ "type": "Hash",
58
+ "default": "N/A",
59
+ "description": "[System arguments](/system-arguments)"
60
+ }
50
61
  ]
51
62
  },
52
63
  {
@@ -139,7 +139,18 @@
139
139
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
140
140
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
141
141
  "parameters": [
142
-
142
+ {
143
+ "name": "item_content",
144
+ "type": "String",
145
+ "default": "N/A",
146
+ "description": "The content to render inside the item."
147
+ },
148
+ {
149
+ "name": "item_arguments",
150
+ "type": "Hash",
151
+ "default": "N/A",
152
+ "description": "{{link_to_system_arguments_docs}}"
153
+ }
143
154
  ],
144
155
  "slots": [
145
156