primer_view_components 0.0.122 → 0.0.123

data/app/components/primer/alpha/action_list/item.rb

@@ -187,6 +187,9 @@ module Primer
           @system_arguments[:aria] ||= {}
           @system_arguments[:aria][:disabled] = "true" if @disabled
 
+          @system_arguments[:data] ||= {}
+          @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
+
           @label_arguments = {
             classes: class_names(
               label_classes,
@@ -236,6 +239,10 @@ module Primer
             "ActionListContent--blockDescription" => description && @description_scheme == :block
           )
         end
+
+        def list_class
+          Primer::Alpha::ActionList
+        end
       end
     end
   end

data/app/components/primer/alpha/nav_list/item.rb

@@ -119,6 +119,10 @@ module Primer
         def current_page?(url)
           helpers.current_page?(url)
         end
+
+        def list_class
+          Primer::Alpha::NavList
+        end
       end
     end
   end

data/app/components/primer/alpha/nav_list/section.rb

@@ -38,7 +38,7 @@ module Primer
 
         # @private
         def self.custom_element_name
-          "nav-list"
+          Primer::Alpha::NavList.custom_element_name
         end
 
         # @param selected_item_id [Symbol] The ID of the currently selected item. Used internally.

data/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 {};

data/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 };

data/app/components/primer/alpha/nav_list.rb

@@ -17,6 +17,11 @@ module Primer
     class NavList < Primer::Component
       status :alpha
 
+      # @private
+      def self.custom_element_name
+        "nav-list"
+      end
+
       # Sections. Each section is a list of links and an optional heading.
       #
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Section) %>.

data/app/components/primer/alpha/nav_list.ts

@@ -2,8 +2,9 @@
 import {controller, target, targets} from '@github/catalyst'
 
 @controller
-class NavListElement extends HTMLElement {
+export class NavListElement extends HTMLElement {
   @target list: HTMLElement
+  @targets items: HTMLElement[]
   @target showMoreItem: HTMLElement
   @targets focusMarkers: HTMLElement[]
 
@@ -40,6 +41,43 @@ class NavListElement extends HTMLElement {
     return this.showMoreItem.getAttribute('src') || ''
   }
 
+  selectItemById(itemId: string | null): boolean {
+    if (!itemId) return false
+
+    const selectedItem = this.#findSelectedNavItemById(itemId)
+
+    if (selectedItem) {
+      this.#select(selectedItem)
+      return true
+    }
+
+    return false
+  }
+
+  selectItemByHref(href: string | null): boolean {
+    if (!href) return false
+
+    const selectedItem = this.#findSelectedNavItemByHref(href)
+
+    if (selectedItem) {
+      this.#select(selectedItem)
+      return true
+    }
+
+    return false
+  }
+
+  selectItemByCurrentLocation(): boolean {
+    const selectedItem = this.#findSelectedNavItemByCurrentLocation()
+
+    if (selectedItem) {
+      this.#select(selectedItem)
+      return true
+    }
+
+    return false
+  }
+
   // expand collapsible item onClick
   expandItem(item: HTMLElement) {
     item.nextElementSibling?.removeAttribute('data-hidden')
@@ -95,7 +133,7 @@ class NavListElement extends HTMLElement {
       this.currentPage--
       return
     }
-    const fragment = this.parseHTML(document, html)
+    const fragment = this.#parseHTML(document, html)
     fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
     this.list.insertBefore(fragment, this.showMoreItem)
     this.focusMarkers.pop()?.focus()
@@ -114,12 +152,76 @@ class NavListElement extends HTMLElement {
     }
   }
 
-  private parseHTML(document: Document, html: string): DocumentFragment {
+  #parseHTML(document: Document, html: string): DocumentFragment {
     const template = document.createElement('template')
     // eslint-disable-next-line github/no-inner-html
     template.innerHTML = html
     return document.importNode(template.content, true)
   }
+
+  #findSelectedNavItemById(itemId: string): HTMLElement | null {
+    // First we compare the selected link to data-item-id for each nav item
+    for (const navItem of this.items) {
+      const keys = navItem.getAttribute('data-item-id')?.split(' ') || []
+
+      if (keys.includes(itemId)) {
+        return navItem
+      }
+    }
+
+    return null
+  }
+
+  #findSelectedNavItemByHref(href: string): HTMLElement | null {
+    // If we didn't find a match, we compare the selected link to the href of each nav item
+    const selectedNavItem = this.querySelector<HTMLAnchorElement>(`.ActionListContent[href="${href}"]`)
+    if (selectedNavItem) {
+      return selectedNavItem.closest('.ActionListItem')
+    }
+
+    return null
+  }
+
+  #findSelectedNavItemByCurrentLocation(): HTMLElement | null {
+    return this.#findSelectedNavItemByHref(window.location.pathname)
+  }
+
+  #select(navItem: HTMLElement) {
+    const currentlySelectedItem = this.querySelector('.ActionListItem--navActive') as HTMLElement
+    if (currentlySelectedItem) this.#deselect(currentlySelectedItem)
+
+    navItem.classList.add('ActionListItem--navActive')
+
+    const parentMenu = this.#findParentMenu(navItem)
+
+    if (parentMenu) {
+      this.expandItem(parentMenu)
+      parentMenu.classList.add('ActionListContent--hasActiveSubItem')
+    }
+  }
+
+  #deselect(navItem: HTMLElement) {
+    navItem.classList.remove('ActionListItem--navActive')
+
+    const parentMenu = this.#findParentMenu(navItem)
+
+    if (parentMenu) {
+      this.collapseItem(parentMenu)
+      parentMenu.classList.remove('ActionListContent--hasActiveSubItem')
+    }
+  }
+
+  #findParentMenu(navItem: HTMLElement): HTMLElement | null {
+    if (!navItem.classList.contains('ActionListItem--subItem')) return null
+
+    const parent = navItem.closest('li.ActionListItem--hasSubItem')?.querySelector('button.ActionListContent')
+
+    if (parent) {
+      return parent as HTMLElement
+    } else {
+      return null
+    }
+  }
 }
 
 declare global {

data/app/components/primer/component.rb

@@ -12,7 +12,7 @@ module Primer
     end
 
     if Module.const_defined?("ViewComponent::PolymorphicSlots") &&
-       ViewComponent::Base < ViewComponent::PolymorphicSlots
+       !(ViewComponent::Base < ViewComponent::PolymorphicSlots)
       include ViewComponent::PolymorphicSlots
     end
 

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 122
+      PATCH = 123
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.122
+  version: 0.0.123
 platform: ruby
 authors:
 - GitHub Open Source