openproject-primer_view_components 0.49.0 → 0.49.2
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +18 -0
- data/app/assets/javascripts/components/primer/alpha/select_panel_element.d.ts +3 -1
- data/app/assets/javascripts/components/primer/primer.d.ts +0 -1
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/item.rb +1 -1
- data/app/components/primer/alpha/select_panel.html.erb +1 -1
- data/app/components/primer/alpha/select_panel_element.d.ts +3 -1
- data/app/components/primer/alpha/select_panel_element.js +16 -16
- data/app/components/primer/alpha/select_panel_element.ts +16 -14
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +4 -0
- data/app/components/primer/primer.d.ts +0 -1
- data/app/components/primer/primer.js +0 -1
- data/app/components/primer/primer.ts +0 -1
- data/lib/primer/classify/utilities.rb +13 -13
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/select_panel_preview/list_of_links.html.erb +2 -2
- metadata +2 -6
- data/app/assets/javascripts/components/primer/aria_live.d.ts +0 -8
- data/app/components/primer/aria_live.d.ts +0 -8
- data/app/components/primer/aria_live.js +0 -38
- data/app/components/primer/aria_live.ts +0 -41
|
@@ -302,7 +302,7 @@ module Primer
|
|
|
302
302
|
if @list.allows_selection?
|
|
303
303
|
@content_arguments[:aria] = merge_aria(
|
|
304
304
|
@content_arguments,
|
|
305
|
-
{ aria: @list.aria_selection_variant == :selected ? {selected: active?} : { checked: active? } }
|
|
305
|
+
{ aria: @list.aria_selection_variant == :selected ? { selected: active? } : { checked: active? } }
|
|
306
306
|
)
|
|
307
307
|
end
|
|
308
308
|
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
<% end %>
|
|
48
48
|
<%= render Primer::Alpha::Dialog::Body.new(mt: show_filter? ? 0 : 2, p: 0) do %>
|
|
49
49
|
<focus-group direction="vertical" mnemonics retain>
|
|
50
|
-
<
|
|
50
|
+
<live-region data-target="select-panel.liveRegion"></live-region>
|
|
51
51
|
<%= render(Primer::BaseComponent.new(
|
|
52
52
|
tag: :div,
|
|
53
53
|
data: {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { IncludeFragmentElement } from '@github/include-fragment-element';
|
|
2
2
|
import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
|
|
3
|
+
import type { LiveRegionElement } from '@primer/live-region-element';
|
|
4
|
+
import '@primer/live-region-element';
|
|
3
5
|
import '@oddbird/popover-polyfill';
|
|
4
6
|
type SelectVariant = 'none' | 'single' | 'multiple' | null;
|
|
5
7
|
type SelectedItem = {
|
|
@@ -16,11 +18,11 @@ export declare class SelectPanelElement extends HTMLElement {
|
|
|
16
18
|
filterInputTextField: HTMLInputElement;
|
|
17
19
|
remoteInput: HTMLElement;
|
|
18
20
|
list: HTMLElement;
|
|
19
|
-
ariaLiveContainer: HTMLElement;
|
|
20
21
|
noResults: HTMLElement;
|
|
21
22
|
fragmentErrorElement: HTMLElement;
|
|
22
23
|
bannerErrorElement: HTMLElement;
|
|
23
24
|
bodySpinner: HTMLElement;
|
|
25
|
+
liveRegion: LiveRegionElement;
|
|
24
26
|
filterFn?: FilterFn;
|
|
25
27
|
get open(): boolean;
|
|
26
28
|
get selectVariant(): SelectVariant;
|
|
@@ -18,8 +18,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
18
18
|
var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
|
|
19
19
|
import { getAnchoredPosition } from '@primer/behaviors';
|
|
20
20
|
import { controller, target } from '@github/catalyst';
|
|
21
|
-
import { announceFromElement, announce } from '../aria_live';
|
|
22
21
|
import { IncludeFragmentElement } from '@github/include-fragment-element';
|
|
22
|
+
import '@primer/live-region-element';
|
|
23
23
|
import '@oddbird/popover-polyfill';
|
|
24
24
|
const validSelectors = ['[role="option"]'];
|
|
25
25
|
const menuItemSelectors = validSelectors.join(',');
|
|
@@ -255,10 +255,12 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
|
255
255
|
this.dialog.removeAttribute('data-ready');
|
|
256
256
|
this.invokerElement?.setAttribute('aria-expanded', 'false');
|
|
257
257
|
// When we close the dialog, clear the filter input
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
258
|
+
if (this.filterInputTextField) {
|
|
259
|
+
const fireSearchEvent = this.filterInputTextField.value.length > 0;
|
|
260
|
+
this.filterInputTextField.value = '';
|
|
261
|
+
if (fireSearchEvent) {
|
|
262
|
+
this.filterInputTextField.dispatchEvent(new Event('input'));
|
|
263
|
+
}
|
|
262
264
|
}
|
|
263
265
|
this.dispatchEvent(new CustomEvent('panelClosed', {
|
|
264
266
|
detail: { panel: this },
|
|
@@ -523,7 +525,7 @@ _SelectPanelElement_setTextFieldLoadingSpinnerTimer = function _SelectPanelEleme
|
|
|
523
525
|
if (__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"))
|
|
524
526
|
clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"));
|
|
525
527
|
__classPrivateFieldSet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, setTimeout(() => {
|
|
526
|
-
announce('Loading'
|
|
528
|
+
this.liveRegion.announce('Loading');
|
|
527
529
|
}, 2000), "f");
|
|
528
530
|
__classPrivateFieldSet(this, _SelectPanelElement_loadingDelayTimeoutId, setTimeout(() => {
|
|
529
531
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_filterInputTextFieldElement_get)?.showLeadingSpinner();
|
|
@@ -549,7 +551,7 @@ _SelectPanelElement_handleIncludeFragmentEvent = function _SelectPanelElement_ha
|
|
|
549
551
|
const errorElement = this.fragmentErrorElement;
|
|
550
552
|
// check if the errorElement is visible in the dom
|
|
551
553
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
552
|
-
announceFromElement(errorElement, {
|
|
554
|
+
this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
|
|
553
555
|
return;
|
|
554
556
|
}
|
|
555
557
|
break;
|
|
@@ -736,7 +738,7 @@ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(t
|
|
|
736
738
|
}
|
|
737
739
|
// check if the errorElement is visible in the dom
|
|
738
740
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
739
|
-
announceFromElement(errorElement, {
|
|
741
|
+
this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
|
|
740
742
|
return;
|
|
741
743
|
}
|
|
742
744
|
};
|
|
@@ -746,17 +748,15 @@ _SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorSta
|
|
|
746
748
|
};
|
|
747
749
|
_SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
|
|
748
750
|
if (this.open && this.list) {
|
|
749
|
-
const items = this.
|
|
751
|
+
const items = this.visibleItems;
|
|
750
752
|
if (items.length > 0) {
|
|
751
753
|
const instructions = 'tab for results';
|
|
752
|
-
announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}
|
|
753
|
-
element: this.ariaLiveContainer,
|
|
754
|
-
});
|
|
754
|
+
this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`);
|
|
755
755
|
}
|
|
756
756
|
else {
|
|
757
757
|
const noResultsEl = this.noResults;
|
|
758
758
|
if (noResultsEl) {
|
|
759
|
-
announceFromElement(noResultsEl
|
|
759
|
+
this.liveRegion.announceFromElement(noResultsEl);
|
|
760
760
|
}
|
|
761
761
|
}
|
|
762
762
|
}
|
|
@@ -974,9 +974,6 @@ __decorate([
|
|
|
974
974
|
__decorate([
|
|
975
975
|
target
|
|
976
976
|
], SelectPanelElement.prototype, "list", void 0);
|
|
977
|
-
__decorate([
|
|
978
|
-
target
|
|
979
|
-
], SelectPanelElement.prototype, "ariaLiveContainer", void 0);
|
|
980
977
|
__decorate([
|
|
981
978
|
target
|
|
982
979
|
], SelectPanelElement.prototype, "noResults", void 0);
|
|
@@ -989,6 +986,9 @@ __decorate([
|
|
|
989
986
|
__decorate([
|
|
990
987
|
target
|
|
991
988
|
], SelectPanelElement.prototype, "bodySpinner", void 0);
|
|
989
|
+
__decorate([
|
|
990
|
+
target
|
|
991
|
+
], SelectPanelElement.prototype, "liveRegion", void 0);
|
|
992
992
|
SelectPanelElement = __decorate([
|
|
993
993
|
controller
|
|
994
994
|
], SelectPanelElement);
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import {getAnchoredPosition} from '@primer/behaviors'
|
|
2
2
|
import {controller, target} from '@github/catalyst'
|
|
3
|
-
import {announceFromElement, announce} from '../aria_live'
|
|
4
3
|
import {IncludeFragmentElement} from '@github/include-fragment-element'
|
|
5
4
|
import type {PrimerTextFieldElement} from 'app/lib/primer/forms/primer_text_field'
|
|
6
5
|
import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
|
|
6
|
+
import type {LiveRegionElement} from '@primer/live-region-element'
|
|
7
|
+
import '@primer/live-region-element'
|
|
7
8
|
import '@oddbird/popover-polyfill'
|
|
8
9
|
|
|
9
10
|
type SelectVariant = 'none' | 'single' | 'multiple' | null
|
|
@@ -69,11 +70,11 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
69
70
|
@target filterInputTextField: HTMLInputElement
|
|
70
71
|
@target remoteInput: HTMLElement
|
|
71
72
|
@target list: HTMLElement
|
|
72
|
-
@target ariaLiveContainer: HTMLElement
|
|
73
73
|
@target noResults: HTMLElement
|
|
74
74
|
@target fragmentErrorElement: HTMLElement
|
|
75
75
|
@target bannerErrorElement: HTMLElement
|
|
76
76
|
@target bodySpinner: HTMLElement
|
|
77
|
+
@target liveRegion: LiveRegionElement
|
|
77
78
|
|
|
78
79
|
filterFn?: FilterFn
|
|
79
80
|
|
|
@@ -412,7 +413,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
412
413
|
if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId)
|
|
413
414
|
|
|
414
415
|
this.#loadingAnnouncementTimeoutId = setTimeout(() => {
|
|
415
|
-
announce('Loading'
|
|
416
|
+
this.liveRegion.announce('Loading')
|
|
416
417
|
}, 2000) as unknown as number
|
|
417
418
|
|
|
418
419
|
this.#loadingDelayTimeoutId = setTimeout(() => {
|
|
@@ -465,10 +466,13 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
465
466
|
this.dialog.removeAttribute('data-ready')
|
|
466
467
|
this.invokerElement?.setAttribute('aria-expanded', 'false')
|
|
467
468
|
// When we close the dialog, clear the filter input
|
|
468
|
-
|
|
469
|
-
this.filterInputTextField
|
|
470
|
-
|
|
471
|
-
this.filterInputTextField.
|
|
469
|
+
|
|
470
|
+
if (this.filterInputTextField) {
|
|
471
|
+
const fireSearchEvent = this.filterInputTextField.value.length > 0
|
|
472
|
+
this.filterInputTextField.value = ''
|
|
473
|
+
if (fireSearchEvent) {
|
|
474
|
+
this.filterInputTextField.dispatchEvent(new Event('input'))
|
|
475
|
+
}
|
|
472
476
|
}
|
|
473
477
|
|
|
474
478
|
this.dispatchEvent(
|
|
@@ -561,7 +565,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
561
565
|
const errorElement = this.fragmentErrorElement
|
|
562
566
|
// check if the errorElement is visible in the dom
|
|
563
567
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
564
|
-
announceFromElement(errorElement, {
|
|
568
|
+
this.liveRegion.announceFromElement(errorElement, {politeness: 'assertive'})
|
|
565
569
|
return
|
|
566
570
|
}
|
|
567
571
|
|
|
@@ -763,7 +767,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
763
767
|
|
|
764
768
|
// check if the errorElement is visible in the dom
|
|
765
769
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
766
|
-
announceFromElement(errorElement, {
|
|
770
|
+
this.liveRegion.announceFromElement(errorElement, {politeness: 'assertive'})
|
|
767
771
|
return
|
|
768
772
|
}
|
|
769
773
|
}
|
|
@@ -775,17 +779,15 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
775
779
|
|
|
776
780
|
#maybeAnnounce() {
|
|
777
781
|
if (this.open && this.list) {
|
|
778
|
-
const items = this.
|
|
782
|
+
const items = this.visibleItems
|
|
779
783
|
|
|
780
784
|
if (items.length > 0) {
|
|
781
785
|
const instructions = 'tab for results'
|
|
782
|
-
announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}
|
|
783
|
-
element: this.ariaLiveContainer,
|
|
784
|
-
})
|
|
786
|
+
this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`)
|
|
785
787
|
} else {
|
|
786
788
|
const noResultsEl = this.noResults
|
|
787
789
|
if (noResultsEl) {
|
|
788
|
-
announceFromElement(noResultsEl
|
|
790
|
+
this.liveRegion.announceFromElement(noResultsEl)
|
|
789
791
|
}
|
|
790
792
|
}
|
|
791
793
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):
|
|
1
|
+
.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}:is(.Popover-message--top-right,.Popover-message--bottom-right):after{margin-right:1px;right:var(--base-size-20)}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24);margin-left:1px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px;margin-bottom:1px}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAmCF,CAxBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAKE,sBAA+C,CAA/C,kDAA+C,CAH/C,gBAAiB,CADjB,SAKF,CAEA,uBAME,sBAA2C,CAA3C,8CAA2C,CAJ3C,gBAAiB,CADjB,SAMF,CAKA,mEAEE,YACF,CAOA,mMAGE,yBAAgC,CADhC,QAEF,CAEA,kGAEE,2CAA4C,CAD5C,YAEF,CAEA,iGAGE,uCAAwC,CAFxC,YAGF,CAIF,2DAGE,cAAe,CADf,
|
|
1
|
+
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAmCF,CAxBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAKE,sBAA+C,CAA/C,kDAA+C,CAH/C,gBAAiB,CADjB,SAKF,CAEA,uBAME,sBAA2C,CAA3C,8CAA2C,CAJ3C,gBAAiB,CADjB,SAMF,CAKA,mEAEE,YACF,CAOA,mMAGE,yBAAgC,CADhC,QAEF,CAEA,kGAEE,2CAA4C,CAD5C,YAEF,CAEA,iGAGE,uCAAwC,CAFxC,YAGF,CAIF,2DAGE,cAAe,CADf,UAiBF,CAdE,6IAEE,SAAU,CACV,aACF,CAEA,uEACE,yBACF,CAEA,sEAEE,gBAAiB,CADjB,yBAEF,CAIF,yDAEE,SAAU,CACV,aAYF,CAVE,yIAEE,wBAAyB,CACzB,aACF,CAEA,oEACE,wBAAyB,CACzB,eACF,CAUA,6VAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,+KACE,eACF,CAEA,8KACE,eACF,CAOA,+FAEE,4CAA6C,CAD7C,WAEF,CAEA,8FAGE,wCAAyC,CAFzC,WAGF,CAOA,4FAEE,6CAA8C,CAD9C,UAEF,CAEA,2FAIE,yCAA0C,CAH1C,UAAW,CACX,iBAGF,CAMA,qIAEE,uBACF,CAMA,iJAEE,QACF,CAEA,yEACE,0BACF,CAEA,wEACE,0BAA2B,CAC3B,iBACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,iCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* adding !important to override utility classes used in dotcom */\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n /* stylelint-disable-next-line primer/borders */\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n /* stylelint-disable-next-line primer/borders */\n border: 7px solid transparent;\n /* stylelint-disable-next-line primer/colors */\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: var(--base-size-20);\n }\n\n &::after {\n right: var(--base-size-20);\n margin-right: 1px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: var(--base-size-24);\n margin-left: 0;\n }\n\n &::after {\n left: var(--base-size-24);\n margin-left: 1px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n margin-bottom: 1px;\n /* stylelint-disable-next-line primer/colors */\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: var(--base-size-24);\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: var(--base-size-16);\n }\n\n &::after {\n bottom: var(--base-size-16);\n margin-bottom: 1px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
|
|
95
95
|
&::after {
|
|
96
96
|
right: var(--base-size-20);
|
|
97
|
+
margin-right: 1px;
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
100
|
|
|
@@ -111,6 +112,7 @@
|
|
|
111
112
|
|
|
112
113
|
&::after {
|
|
113
114
|
left: var(--base-size-24);
|
|
115
|
+
margin-left: 1px;
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
|
|
@@ -165,6 +167,7 @@
|
|
|
165
167
|
|
|
166
168
|
&::after {
|
|
167
169
|
left: -14px;
|
|
170
|
+
margin-bottom: 1px;
|
|
168
171
|
/* stylelint-disable-next-line primer/colors */
|
|
169
172
|
border-right-color: var(--overlay-bgColor);
|
|
170
173
|
}
|
|
@@ -193,6 +196,7 @@
|
|
|
193
196
|
|
|
194
197
|
&::after {
|
|
195
198
|
bottom: var(--base-size-16);
|
|
199
|
+
margin-bottom: 1px;
|
|
196
200
|
}
|
|
197
201
|
}
|
|
198
202
|
|
|
@@ -18,18 +18,18 @@ module Primer
|
|
|
18
18
|
|
|
19
19
|
# Replacements for some classnames that end up being a different argument key
|
|
20
20
|
REPLACEMENT_KEYS = {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
21
|
+
"f" => "font_size",
|
|
22
|
+
"anim" => "animation",
|
|
23
|
+
"v-align" => "vertical_align",
|
|
24
|
+
"d" => "display",
|
|
25
|
+
"wb" => "word_break",
|
|
26
|
+
"v" => "visibility",
|
|
27
|
+
"width" => "w",
|
|
28
|
+
"height" => "h",
|
|
29
|
+
"color-bg" => "bg",
|
|
30
|
+
"color-border" => "border_color",
|
|
31
|
+
"color-fg" => "color",
|
|
32
|
+
"rounded" => "border_radius"
|
|
33
33
|
}.freeze
|
|
34
34
|
|
|
35
35
|
SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
|
|
@@ -190,7 +190,7 @@ module Primer
|
|
|
190
190
|
|
|
191
191
|
def infer_selector_key(selector)
|
|
192
192
|
REPLACEMENT_KEYS.each do |k, v|
|
|
193
|
-
return v.to_sym if selector.
|
|
193
|
+
return v.to_sym if selector.start_with?(k)
|
|
194
194
|
end
|
|
195
195
|
selector.split("-").first.to_sym
|
|
196
196
|
end
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
open_on_load: open_on_load
|
|
8
8
|
)) do |panel| %>
|
|
9
9
|
<% panel.with_show_button { "Panel" } %>
|
|
10
|
-
<% panel.with_item(label: "GitHub", href: "https://github.com") %>
|
|
11
|
-
<% panel.with_item(label: "Microsoft", href: "https://microsoft.com", active: true) %>
|
|
12
10
|
<% panel.with_item(label: "Primer", href: "https://primer.style") %>
|
|
11
|
+
<% panel.with_item(label: "Microsoft", href: "https://microsoft.com", active: true) %>
|
|
12
|
+
<% panel.with_item(label: "GitHub", href: "https://github.com") %>
|
|
13
13
|
<% panel.with_item(label: "Catalyst", href: "https://catalyst.rocks") %>
|
|
14
14
|
<% end %>
|
|
15
15
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: openproject-primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.49.
|
|
4
|
+
version: 0.49.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2024-11-
|
|
12
|
+
date: 2024-11-25 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionview
|
|
@@ -96,7 +96,6 @@ files:
|
|
|
96
96
|
- app/assets/javascripts/components/primer/alpha/tool_tip.d.ts
|
|
97
97
|
- app/assets/javascripts/components/primer/alpha/x_banner.d.ts
|
|
98
98
|
- app/assets/javascripts/components/primer/anchored_position.d.ts
|
|
99
|
-
- app/assets/javascripts/components/primer/aria_live.d.ts
|
|
100
99
|
- app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts
|
|
101
100
|
- app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts
|
|
102
101
|
- app/assets/javascripts/components/primer/beta/nav_list.d.ts
|
|
@@ -320,9 +319,6 @@ files:
|
|
|
320
319
|
- app/components/primer/anchored_position.d.ts
|
|
321
320
|
- app/components/primer/anchored_position.js
|
|
322
321
|
- app/components/primer/anchored_position.ts
|
|
323
|
-
- app/components/primer/aria_live.d.ts
|
|
324
|
-
- app/components/primer/aria_live.js
|
|
325
|
-
- app/components/primer/aria_live.ts
|
|
326
322
|
- app/components/primer/base_component.rb
|
|
327
323
|
- app/components/primer/beta/auto_complete.rb
|
|
328
324
|
- app/components/primer/beta/auto_complete/auto_complete.d.ts
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
const safeDocument = typeof document === 'undefined' ? undefined : document;
|
|
2
|
-
// Announce an element's text to the screen reader.
|
|
3
|
-
export function announceFromElement(el, options) {
|
|
4
|
-
announce(getTextContent(el), options);
|
|
5
|
-
}
|
|
6
|
-
// Announce message update to screen reader.
|
|
7
|
-
// Note: Use caution when using this function while a dialog is active.
|
|
8
|
-
// If the message is updated while the dialog is open, the screen reader may not announce the live region.
|
|
9
|
-
export function announce(message, options) {
|
|
10
|
-
const { assertive, element } = options ?? {};
|
|
11
|
-
setContainerContent(message, assertive, element);
|
|
12
|
-
}
|
|
13
|
-
// Set aria-live container to message.
|
|
14
|
-
function setContainerContent(message, assertive, element) {
|
|
15
|
-
const getQuerySelector = () => {
|
|
16
|
-
return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice';
|
|
17
|
-
};
|
|
18
|
-
const container = element ?? safeDocument?.querySelector(getQuerySelector());
|
|
19
|
-
if (!container)
|
|
20
|
-
return;
|
|
21
|
-
if (container.textContent === message) {
|
|
22
|
-
/* This is a hack due to the way the aria live API works.
|
|
23
|
-
A screen reader will not read a live region again
|
|
24
|
-
if the text is the same. Adding a space character tells
|
|
25
|
-
the browser that the live region has updated,
|
|
26
|
-
which will cause it to read again, but with no audible difference. */
|
|
27
|
-
container.textContent = `${message}\u00A0`;
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
container.textContent = message;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
// Gets the trimmed text content of an element.
|
|
34
|
-
function getTextContent(el) {
|
|
35
|
-
// innerText does not contain hidden text
|
|
36
|
-
/* eslint-disable-next-line github/no-innerText */
|
|
37
|
-
return (el.getAttribute('aria-label') || el.innerText || '').trim();
|
|
38
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
const safeDocument = typeof document === 'undefined' ? undefined : document
|
|
2
|
-
|
|
3
|
-
// Announce an element's text to the screen reader.
|
|
4
|
-
export function announceFromElement(el: HTMLElement, options?: {assertive?: boolean; element?: HTMLElement}) {
|
|
5
|
-
announce(getTextContent(el), options)
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
// Announce message update to screen reader.
|
|
9
|
-
// Note: Use caution when using this function while a dialog is active.
|
|
10
|
-
// If the message is updated while the dialog is open, the screen reader may not announce the live region.
|
|
11
|
-
export function announce(message: string, options?: {assertive?: boolean; element?: HTMLElement}) {
|
|
12
|
-
const {assertive, element} = options ?? {}
|
|
13
|
-
|
|
14
|
-
setContainerContent(message, assertive, element)
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Set aria-live container to message.
|
|
18
|
-
function setContainerContent(message: string, assertive?: boolean, element?: HTMLElement) {
|
|
19
|
-
const getQuerySelector = () => {
|
|
20
|
-
return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice'
|
|
21
|
-
}
|
|
22
|
-
const container = element ?? safeDocument?.querySelector(getQuerySelector())
|
|
23
|
-
if (!container) return
|
|
24
|
-
if (container.textContent === message) {
|
|
25
|
-
/* This is a hack due to the way the aria live API works.
|
|
26
|
-
A screen reader will not read a live region again
|
|
27
|
-
if the text is the same. Adding a space character tells
|
|
28
|
-
the browser that the live region has updated,
|
|
29
|
-
which will cause it to read again, but with no audible difference. */
|
|
30
|
-
container.textContent = `${message}\u00A0`
|
|
31
|
-
} else {
|
|
32
|
-
container.textContent = message
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// Gets the trimmed text content of an element.
|
|
37
|
-
function getTextContent(el: HTMLElement): string {
|
|
38
|
-
// innerText does not contain hidden text
|
|
39
|
-
/* eslint-disable-next-line github/no-innerText */
|
|
40
|
-
return (el.getAttribute('aria-label') || el.innerText || '').trim()
|
|
41
|
-
}
|