@primer/view-components
Version:
ViewComponents for the Primer Design System
171 lines (170 loc) • 8.46 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
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");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
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");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get, _ActionBarElement_eachItem;
import { controller, targets, target } from '@github/catalyst';
import { focusZone, FocusKeys } from '@primer/behaviors';
const instersectionObserver = new IntersectionObserver(entries => {
for (const entry of entries) {
const action = entry.target;
if (entry.isIntersecting && action instanceof ActionBarElement) {
action.update();
}
}
});
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const action = entry.target;
if (action instanceof ActionBarElement) {
action.update();
}
}
});
// These are definitely used, but eslint is dumb apparently
var ItemType;
(function (ItemType) {
ItemType[ItemType["Item"] = 0] = "Item";
ItemType[ItemType["Divider"] = 1] = "Divider";
})(ItemType || (ItemType = {}));
let ActionBarElement = class ActionBarElement extends HTMLElement {
constructor() {
super(...arguments);
_ActionBarElement_instances.add(this);
_ActionBarElement_focusZoneAbortController.set(this, null);
}
connectedCallback() {
resizeObserver.observe(this);
instersectionObserver.observe(this);
requestAnimationFrame(() => {
// This overflow visible is needed for browsers that don't support PopoverElement
// to ensure the menu and tooltips are visible when the action bar is in a collapsed state
// once popover is fully supported we can remove this.style.overflow = 'visible'
this.style.overflow = 'visible';
this.update();
});
}
disconnectedCallback() {
resizeObserver.unobserve(this);
instersectionObserver.unobserve(this);
}
menuItemClick(event) {
const currentTarget = event.currentTarget;
const id = currentTarget?.getAttribute('data-for');
if (id) {
document.getElementById(id)?.click();
}
}
update() {
const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
if (!firstItem)
return;
const firstItemTop = firstItem.getBoundingClientRect().top;
let previousItemType = null;
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, index, type) => {
const itemTop = item.getBoundingClientRect().top;
if (type === ItemType.Item) {
if (itemTop > firstItemTop) {
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
if (this.moreMenu.hidden) {
this.moreMenu.hidden = false;
}
if (previousItemType === ItemType.Divider) {
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index - 1);
}
}
else {
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
if (index === this.items.length - 1) {
this.moreMenu.hidden = true;
}
if (previousItemType === ItemType.Divider) {
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index - 1);
}
}
}
previousItemType = type;
return true;
});
if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
}
__classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
focusOutBehavior: 'wrap',
focusableElementFilter: element => {
const idx = this.items.indexOf(element.parentElement);
const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
},
}), "f");
}
};
_ActionBarElement_focusZoneAbortController = new WeakMap();
_ActionBarElement_instances = new WeakSet();
_ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
let foundItem = null;
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, _index, type) => {
if (type === ItemType.Item) {
foundItem = item;
return false;
}
return true;
});
return foundItem;
};
_ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
const item = this.items[index];
const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
if (!item || !menuItem)
return;
item.style.setProperty('visibility', 'visible');
menuItem.hidden = true;
};
_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
const item = this.items[index];
const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
if (!item || !menuItem)
return;
item.style.setProperty('visibility', 'hidden');
menuItem.hidden = false;
};
_ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
return this.moreMenu.querySelectorAll('[role="menu"] > li');
};
_ActionBarElement_eachItem = function _ActionBarElement_eachItem(callback) {
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item;
if (!callback(item, i, type)) {
break;
}
}
};
__decorate([
targets
], ActionBarElement.prototype, "items", void 0);
__decorate([
target
], ActionBarElement.prototype, "itemContainer", void 0);
__decorate([
target
], ActionBarElement.prototype, "moreMenu", void 0);
ActionBarElement = __decorate([
controller
], ActionBarElement);
window.ActionBarElement = ActionBarElement;