@primer/view-components 0.0.122 → 0.0.123-rc.aafb6945

package/app/components/primer/alpha/nav_list.d.ts

@@ -1,5 +1,7 @@
-declare class NavListElement extends HTMLElement {
+export declare class NavListElement extends HTMLElement {
+    #private;
     list: HTMLElement;
+    items: HTMLElement[];
     showMoreItem: HTMLElement;
     focusMarkers: HTMLElement[];
     connectedCallback(): void;
@@ -9,17 +11,18 @@ declare class NavListElement extends HTMLElement {
     get currentPage(): number;
     get totalPages(): number;
     get paginationSrc(): string;
+    selectItemById(itemId: string | null): boolean;
+    selectItemByHref(href: string | null): boolean;
+    selectItemByCurrentLocation(): boolean;
     expandItem(item: HTMLElement): void;
     collapseItem(item: HTMLElement): void;
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
     private showMore;
     private setShowMoreItemState;
-    private parseHTML;
 }
 declare global {
     interface Window {
         NavListElement: typeof NavListElement;
     }
 }
-export {};

package/app/components/primer/alpha/nav_list.js

@@ -4,9 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 _NavListElement_instances, _NavListElement_parseHTML, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
 /* eslint-disable custom-elements/expose-class-on-global */
 import { controller, target, targets } from '@github/catalyst';
 let NavListElement = class NavListElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListElement_instances.add(this);
+    }
     connectedCallback() {
         this.setShowMoreItemState();
     }
@@ -34,6 +44,34 @@ let NavListElement = class NavListElement extends HTMLElement {
     get paginationSrc() {
         return this.showMoreItem.getAttribute('src') || '';
     }
+    selectItemById(itemId) {
+        if (!itemId)
+            return false;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemById).call(this, itemId);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByHref(href) {
+        if (!href)
+            return false;
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, href);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
+    selectItemByCurrentLocation() {
+        const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByCurrentLocation).call(this);
+        if (selectedItem) {
+            __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
+            return true;
+        }
+        return false;
+    }
     // expand collapsible item onClick
     expandItem(item) {
         var _a;
@@ -92,7 +130,7 @@ let NavListElement = class NavListElement extends HTMLElement {
             this.currentPage--;
             return;
         }
-        const fragment = this.parseHTML(document, html);
+        const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
         (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
         this.list.insertBefore(fragment, this.showMoreItem);
         (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
@@ -109,16 +147,66 @@ let NavListElement = class NavListElement extends HTMLElement {
             this.showMoreItem.hidden = true;
         }
     }
-    parseHTML(document, html) {
-        const template = document.createElement('template');
-        // eslint-disable-next-line github/no-inner-html
-        template.innerHTML = html;
-        return document.importNode(template.content, true);
+};
+_NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
+    const template = document.createElement('template');
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html;
+    return document.importNode(template.content, true);
+}, _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
+    var _a;
+    // First we compare the selected link to data-item-id for each nav item
+    for (const navItem of this.items) {
+        const keys = ((_a = navItem.getAttribute('data-item-id')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        if (keys.includes(itemId)) {
+            return navItem;
+        }
+    }
+    return null;
+}, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+    // If we didn't find a match, we compare the selected link to the href of each nav item
+    const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
+    if (selectedNavItem) {
+        return selectedNavItem.closest('.ActionListItem');
+    }
+    return null;
+}, _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
+    return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
+}, _NavListElement_select = function _NavListElement_select(navItem) {
+    const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
+    if (currentlySelectedItem)
+        __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
+    navItem.classList.add('ActionListItem--navActive');
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.expandItem(parentMenu);
+        parentMenu.classList.add('ActionListContent--hasActiveSubItem');
+    }
+}, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
+    navItem.classList.remove('ActionListItem--navActive');
+    const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
+    if (parentMenu) {
+        this.collapseItem(parentMenu);
+        parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
+    }
+}, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+    var _a;
+    if (!navItem.classList.contains('ActionListItem--subItem'))
+        return null;
+    const parent = (_a = navItem.closest('li.ActionListItem--hasSubItem')) === null || _a === void 0 ? void 0 : _a.querySelector('button.ActionListContent');
+    if (parent) {
+        return parent;
+    }
+    else {
+        return null;
     }
 };
 __decorate([
     target
 ], NavListElement.prototype, "list", void 0);
+__decorate([
+    targets
+], NavListElement.prototype, "items", void 0);
 __decorate([
     target
 ], NavListElement.prototype, "showMoreItem", void 0);
@@ -128,3 +216,4 @@ __decorate([
 NavListElement = __decorate([
     controller
 ], NavListElement);
+export { NavListElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.0.122",
+  "version": "0.0.123-rc.aafb6945",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",