@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.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/components/primer/alpha/action_bar_element.js +2 -2
- package/app/components/primer/focus_group.js +28 -3
- package/package.json +1 -1
- package/static/arguments.json +12 -1
- package/static/info_arch.json +12 -1
@@ -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
|
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
|
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",
|
package/static/arguments.json
CHANGED
@@ -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
|
{
|
package/static/info_arch.json
CHANGED
@@ -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
|
|