@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' && event.key === 'ArrowDown') {
592
- if (this.focusableItem) {
593
- this.focusableItem.focus();
594
- event.preventDefault();
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.29.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",