@primer/view-components 0.29.0 → 0.30.0-rc.2e940d27
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.
@@ -183,6 +183,15 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
183
183
|
for (const entry of entries) {
|
184
184
|
const elem = entry.target;
|
185
185
|
if (entry.isIntersecting && elem === this.dialog) {
|
186
|
+
// Focus on the filter input when the dialog opens to work around a Safari limitation
|
187
|
+
// that prevents the autofocus attribute from working as it does in other browsers
|
188
|
+
if (this.filterInputTextField) {
|
189
|
+
if (document.activeElement !== this.filterInputTextField) {
|
190
|
+
this.filterInputTextField.focus();
|
191
|
+
}
|
192
|
+
}
|
193
|
+
// signal that any focus hijinks are finished (thanks Safari)
|
194
|
+
this.dialog.setAttribute('data-ready', 'true');
|
186
195
|
this.updateAnchorPosition();
|
187
196
|
if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
|
188
197
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
|
@@ -191,11 +200,11 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
191
200
|
}
|
192
201
|
}), "f");
|
193
202
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
|
203
|
+
__classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
|
204
|
+
this.dialog.addEventListener('close', this, { signal });
|
194
205
|
if (this.getAttribute('data-open-on-load') === 'true') {
|
195
206
|
this.show();
|
196
207
|
}
|
197
|
-
__classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
|
198
|
-
this.dialog.addEventListener('close', this, { signal });
|
199
208
|
});
|
200
209
|
if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
|
201
210
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => this.items.length > 0, () => {
|
@@ -240,6 +249,8 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
240
249
|
return;
|
241
250
|
}
|
242
251
|
if (event.target === this.dialog && event.type === 'close') {
|
252
|
+
// Remove data-ready so it can be set the next time the panel is opened
|
253
|
+
this.dialog.removeAttribute('data-ready');
|
243
254
|
this.dispatchEvent(new CustomEvent('panelClosed', {
|
244
255
|
detail: { panel: this },
|
245
256
|
bubbles: true,
|
@@ -588,10 +599,34 @@ _SelectPanelElement_defaultFilterFn = function _SelectPanelElement_defaultFilter
|
|
588
599
|
return text.indexOf(query.toLowerCase()) > -1;
|
589
600
|
};
|
590
601
|
_SelectPanelElement_handleSearchFieldEvent = function _SelectPanelElement_handleSearchFieldEvent(event) {
|
591
|
-
if (event.type === 'keydown'
|
592
|
-
|
593
|
-
|
594
|
-
|
602
|
+
if (event.type === 'keydown') {
|
603
|
+
const key = event.key;
|
604
|
+
if (key === 'Enter') {
|
605
|
+
const item = this.visibleItems[0];
|
606
|
+
if (item) {
|
607
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item, false);
|
608
|
+
}
|
609
|
+
}
|
610
|
+
else if (key === 'ArrowDown') {
|
611
|
+
const item = (this.focusableItem || this.visibleItems[0]);
|
612
|
+
if (item) {
|
613
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
|
614
|
+
event.preventDefault();
|
615
|
+
}
|
616
|
+
}
|
617
|
+
else if (key === 'Home') {
|
618
|
+
const item = this.visibleItems[0];
|
619
|
+
if (item) {
|
620
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
|
621
|
+
event.preventDefault();
|
622
|
+
}
|
623
|
+
}
|
624
|
+
else if (key === 'End') {
|
625
|
+
if (this.visibleItems.length > 0) {
|
626
|
+
const item = this.visibleItems[this.visibleItems.length - 1];
|
627
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
|
628
|
+
event.preventDefault();
|
629
|
+
}
|
595
630
|
}
|
596
631
|
}
|
597
632
|
if (event.type !== 'input')
|
@@ -751,7 +786,7 @@ _SelectPanelElement_handleDialogItemActivated = function _SelectPanelElement_han
|
|
751
786
|
dialog.addEventListener('close', handleDialogClose, { signal });
|
752
787
|
dialog.addEventListener('cancel', handleDialogClose, { signal });
|
753
788
|
};
|
754
|
-
_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item) {
|
789
|
+
_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item, shouldClose = true) {
|
755
790
|
// Hide popover after current event loop to prevent changes in focus from
|
756
791
|
// altering the target of the event. Not doing this specifically affects
|
757
792
|
// <a> tags. It causes the event to be sent to the currently focused element
|
@@ -760,7 +795,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
|
|
760
795
|
// works fine.
|
761
796
|
if (this.selectVariant !== 'multiple') {
|
762
797
|
setTimeout(() => {
|
763
|
-
if (this.open) {
|
798
|
+
if (this.open && shouldClose) {
|
764
799
|
this.hide();
|
765
800
|
}
|
766
801
|
});
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/view-components",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.30.0-rc.2e940d27",
|
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",
|