@primer/view-components 0.51.1-rc.fdc6ac97 → 0.51.2-rc.79cd6fca
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/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_bar_element.js +67 -76
- package/app/components/primer/beta/timeline_item.css +1 -1
- package/app/components/primer/dialog_helper.js +7 -1
- package/package.json +1 -1
|
@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
15
15
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
16
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
17
|
};
|
|
18
|
-
var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get
|
|
18
|
+
var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_pendingUpdate, _ActionBarElement_performUpdate, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
|
|
19
19
|
import { controller, targets, target } from '@github/catalyst';
|
|
20
20
|
import { focusZone, FocusKeys } from '@primer/behaviors';
|
|
21
21
|
const instersectionObserver = new IntersectionObserver(entries => {
|
|
@@ -35,27 +35,21 @@ const resizeObserver = new ResizeObserver(entries => {
|
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
// These are definitely used, but eslint is dumb apparently
|
|
38
|
-
var ItemType;
|
|
39
|
-
(function (ItemType) {
|
|
40
|
-
ItemType[ItemType["Item"] = 0] = "Item";
|
|
41
|
-
ItemType[ItemType["Divider"] = 1] = "Divider";
|
|
42
|
-
})(ItemType || (ItemType = {}));
|
|
43
38
|
let ActionBarElement = class ActionBarElement extends HTMLElement {
|
|
44
39
|
constructor() {
|
|
45
40
|
super(...arguments);
|
|
46
41
|
_ActionBarElement_instances.add(this);
|
|
47
42
|
_ActionBarElement_focusZoneAbortController.set(this, null);
|
|
43
|
+
_ActionBarElement_pendingUpdate.set(this, false);
|
|
48
44
|
}
|
|
49
45
|
connectedCallback() {
|
|
50
46
|
resizeObserver.observe(this);
|
|
51
47
|
instersectionObserver.observe(this);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
this.update();
|
|
58
|
-
});
|
|
48
|
+
// This overflow visible is needed for browsers that don't support PopoverElement
|
|
49
|
+
// to ensure the menu and tooltips are visible when the action bar is in a collapsed state
|
|
50
|
+
// once popover is fully supported we can remove this.style.overflow = 'visible'
|
|
51
|
+
this.style.overflow = 'visible';
|
|
52
|
+
this.update();
|
|
59
53
|
}
|
|
60
54
|
disconnectedCallback() {
|
|
61
55
|
resizeObserver.unobserve(this);
|
|
@@ -69,75 +63,81 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
|
|
|
69
63
|
}
|
|
70
64
|
}
|
|
71
65
|
update() {
|
|
72
|
-
|
|
73
|
-
if (!firstItem)
|
|
66
|
+
if (__classPrivateFieldGet(this, _ActionBarElement_pendingUpdate, "f"))
|
|
74
67
|
return;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
if (type === ItemType.Item) {
|
|
80
|
-
if (itemTop > firstItemTop) {
|
|
81
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
|
|
82
|
-
if (this.moreMenu.hidden) {
|
|
83
|
-
this.moreMenu.hidden = false;
|
|
84
|
-
}
|
|
85
|
-
if (previousItemType === ItemType.Divider) {
|
|
86
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index - 1);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
|
|
91
|
-
if (index === this.items.length - 1) {
|
|
92
|
-
this.moreMenu.hidden = true;
|
|
93
|
-
}
|
|
94
|
-
if (previousItemType === ItemType.Divider) {
|
|
95
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index - 1);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
previousItemType = type;
|
|
100
|
-
return true;
|
|
68
|
+
__classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, true, "f");
|
|
69
|
+
requestAnimationFrame(() => {
|
|
70
|
+
__classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, false, "f");
|
|
71
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_performUpdate).call(this);
|
|
101
72
|
});
|
|
102
|
-
if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
|
|
103
|
-
__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
|
|
104
|
-
}
|
|
105
|
-
__classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
|
|
106
|
-
bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
|
|
107
|
-
focusOutBehavior: 'wrap',
|
|
108
|
-
focusableElementFilter: element => {
|
|
109
|
-
const idx = this.items.indexOf(element.parentElement);
|
|
110
|
-
const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
|
|
111
|
-
const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
|
|
112
|
-
return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
|
|
113
|
-
},
|
|
114
|
-
}), "f");
|
|
115
73
|
}
|
|
116
74
|
};
|
|
117
75
|
_ActionBarElement_focusZoneAbortController = new WeakMap();
|
|
76
|
+
_ActionBarElement_pendingUpdate = new WeakMap();
|
|
118
77
|
_ActionBarElement_instances = new WeakSet();
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
78
|
+
_ActionBarElement_performUpdate = function _ActionBarElement_performUpdate() {
|
|
79
|
+
const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
|
|
80
|
+
if (!firstItem)
|
|
81
|
+
return;
|
|
82
|
+
const baseTop = firstItem.getBoundingClientRect().top;
|
|
83
|
+
const cachedMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get);
|
|
84
|
+
// Snapshot geometry in one pass before mutating the DOM
|
|
85
|
+
const snapshots = Array.from(this.items, el => ({
|
|
86
|
+
top: el.getBoundingClientRect().top,
|
|
87
|
+
isDivider: el.classList.contains('ActionBar-divider'),
|
|
88
|
+
}));
|
|
89
|
+
// Apply visibility changes after all reads are complete
|
|
90
|
+
let prevWasDivider = false;
|
|
91
|
+
for (let n = 0; n < snapshots.length; n++) {
|
|
92
|
+
const snap = snapshots[n];
|
|
93
|
+
if (snap.isDivider) {
|
|
94
|
+
prevWasDivider = true;
|
|
95
|
+
continue;
|
|
96
|
+
}
|
|
97
|
+
if (snap.top > baseTop) {
|
|
98
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n, cachedMenuItems);
|
|
99
|
+
if (this.moreMenu.hidden)
|
|
100
|
+
this.moreMenu.hidden = false;
|
|
101
|
+
if (prevWasDivider)
|
|
102
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n - 1, cachedMenuItems);
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n, cachedMenuItems);
|
|
106
|
+
if (n === this.items.length - 1)
|
|
107
|
+
this.moreMenu.hidden = true;
|
|
108
|
+
if (prevWasDivider)
|
|
109
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n - 1, cachedMenuItems);
|
|
125
110
|
}
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
|
|
111
|
+
prevWasDivider = false;
|
|
112
|
+
}
|
|
113
|
+
if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
|
|
114
|
+
__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
|
|
115
|
+
}
|
|
116
|
+
__classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
|
|
117
|
+
bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
|
|
118
|
+
focusOutBehavior: 'wrap',
|
|
119
|
+
focusableElementFilter: element => {
|
|
120
|
+
const idx = this.items.indexOf(element.parentElement);
|
|
121
|
+
const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
|
|
122
|
+
const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
|
|
123
|
+
return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
|
|
124
|
+
},
|
|
125
|
+
}), "f");
|
|
126
|
+
};
|
|
127
|
+
_ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
|
|
128
|
+
return this.items.find(el => !el.classList.contains('ActionBar-divider')) ?? null;
|
|
129
129
|
};
|
|
130
|
-
_ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
|
|
130
|
+
_ActionBarElement_showItem = function _ActionBarElement_showItem(index, menuItems) {
|
|
131
131
|
const item = this.items[index];
|
|
132
|
-
const menuItem =
|
|
132
|
+
const menuItem = menuItems[index];
|
|
133
133
|
if (!item || !menuItem)
|
|
134
134
|
return;
|
|
135
135
|
item.style.setProperty('visibility', 'visible');
|
|
136
136
|
menuItem.hidden = true;
|
|
137
137
|
};
|
|
138
|
-
_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
|
|
138
|
+
_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index, menuItems) {
|
|
139
139
|
const item = this.items[index];
|
|
140
|
-
const menuItem =
|
|
140
|
+
const menuItem = menuItems[index];
|
|
141
141
|
if (!item || !menuItem)
|
|
142
142
|
return;
|
|
143
143
|
item.style.setProperty('visibility', 'hidden');
|
|
@@ -146,15 +146,6 @@ _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
|
|
|
146
146
|
_ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
|
|
147
147
|
return this.moreMenu.querySelectorAll('[role="menu"] > li');
|
|
148
148
|
};
|
|
149
|
-
_ActionBarElement_eachItem = function _ActionBarElement_eachItem(callback) {
|
|
150
|
-
for (let i = 0; i < this.items.length; i++) {
|
|
151
|
-
const item = this.items[i];
|
|
152
|
-
const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item;
|
|
153
|
-
if (!callback(item, i, type)) {
|
|
154
|
-
break;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
149
|
__decorate([
|
|
159
150
|
targets
|
|
160
151
|
], ActionBarElement.prototype, "items", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.TimelineItem{display:flex;margin-left:var(--stack-gap-normal);padding:var(--stack-padding-normal) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;color:var(--fgColor-muted);display:flex;flex-shrink:0;height:var(--control-medium-size);justify-content:center;margin-left:calc(var(--control-medium-size)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed);position:relative;width:var(--control-medium-size);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.TimelineItem-body{color:var(--fgColor-muted);flex:auto;margin-top:var(--base-size-4);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default);height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default);border:0;color:var(--fgColor-muted);height:var(--base-size-16);margin-bottom:var(--base-size-8);margin-top:var(--base-size-8)}
|
|
1
|
+
.TimelineItem{display:flex;margin-left:var(--stack-gap-normal);padding:var(--stack-padding-normal) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;color:var(--fgColor-muted);display:flex;flex-shrink:0;height:var(--control-medium-size);justify-content:center;margin-left:calc(var(--control-medium-size)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed);position:relative;width:var(--control-medium-size);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.TimelineItem-body{color:var(--fgColor-muted);flex:auto;margin-top:calc(var(--base-size-4) + 1px);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default);height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default);border:0;color:var(--fgColor-muted);height:var(--base-size-16);margin-bottom:var(--base-size-8);margin-top:var(--base-size-8)}
|
|
@@ -10,6 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
10
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
11
|
};
|
|
12
12
|
var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
|
|
13
|
+
function setScrollGutter(doc) {
|
|
14
|
+
if (doc.body.style.getPropertyValue('--dialog-scrollgutter'))
|
|
15
|
+
return;
|
|
16
|
+
doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
|
|
17
|
+
}
|
|
13
18
|
function dialogInvokerButtonHandler(event) {
|
|
14
19
|
const target = event.target;
|
|
15
20
|
const button = target?.closest('button');
|
|
@@ -20,6 +25,7 @@ function dialogInvokerButtonHandler(event) {
|
|
|
20
25
|
if (dialogId) {
|
|
21
26
|
const dialog = document.getElementById(dialogId);
|
|
22
27
|
if (dialog instanceof HTMLDialogElement) {
|
|
28
|
+
setScrollGutter(dialog.ownerDocument);
|
|
23
29
|
dialog.showModal();
|
|
24
30
|
// A buttons default behaviour in some browsers it to send a pointer event
|
|
25
31
|
// If the behaviour is allowed through the dialog will be shown but then
|
|
@@ -92,7 +98,6 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
92
98
|
const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
|
|
93
99
|
document.addEventListener('click', dialogInvokerButtonHandler, true);
|
|
94
100
|
document.addEventListener('click', this, { signal });
|
|
95
|
-
this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
|
|
96
101
|
new MutationObserver(records => {
|
|
97
102
|
for (const record of records) {
|
|
98
103
|
if (record.target === this.dialog) {
|
|
@@ -132,6 +137,7 @@ _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_insta
|
|
|
132
137
|
// eslint-disable-next-line no-restricted-syntax
|
|
133
138
|
this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
|
|
134
139
|
this.dialog.close();
|
|
140
|
+
setScrollGutter(this.dialog.ownerDocument);
|
|
135
141
|
this.dialog.showModal();
|
|
136
142
|
}
|
|
137
143
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.51.
|
|
3
|
+
"version": "0.51.2-rc.79cd6fca",
|
|
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",
|