openproject-primer_view_components 0.18.1 → 0.20.0

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

@@ -1,44 +1,9 @@
 /* eslint-disable custom-elements/expose-class-on-global */
-import {controller, target, targets} from '@github/catalyst'
+import {controller, targets} from '@github/catalyst'
 
 @controller
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
-  @target showMoreItem: HTMLElement
-  @targets focusMarkers: HTMLElement[]
-
-  connectedCallback(): void {
-    this.setShowMoreItemState()
-  }
-
-  get showMoreDisabled(): boolean {
-    return this.showMoreItem.hasAttribute('aria-disabled')
-  }
-
-  set showMoreDisabled(value: boolean) {
-    if (value) {
-      this.showMoreItem.setAttribute('aria-disabled', 'true')
-    } else {
-      this.showMoreItem.removeAttribute('aria-disabled')
-    }
-    this.showMoreItem.classList.toggle('disabled', value)
-  }
-
-  set currentPage(value: number) {
-    this.showMoreItem.setAttribute('data-current-page', value.toString())
-  }
-
-  get currentPage(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
-  }
-
-  get totalPages(): number {
-    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
-  }
-
-  get paginationSrc(): string {
-    return this.showMoreItem.getAttribute('src') || ''
-  }
 
   selectItemById(itemId: string | null): boolean {
     if (!itemId) return false
@@ -134,55 +99,6 @@ export class NavListElement extends HTMLElement {
     e.stopPropagation()
   }
 
-  private async showMore(e: Event) {
-    e.preventDefault()
-    if (this.showMoreDisabled) return
-    this.showMoreDisabled = true
-    let html
-    try {
-      const paginationURL = new URL(this.paginationSrc, window.location.origin)
-      this.currentPage++
-      paginationURL.searchParams.append('page', this.currentPage.toString())
-      const response = await fetch(paginationURL)
-      if (!response.ok) return
-      html = await response.text()
-      if (this.currentPage === this.totalPages) {
-        this.showMoreItem.hidden = true
-      }
-    } catch (err) {
-      // Ignore network errors
-      this.showMoreDisabled = false
-      this.currentPage--
-      return
-    }
-    const fragment = this.#parseHTML(document, html)
-    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
-    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
-    const list = document.getElementById(listId)!
-    list.append(fragment)
-    this.focusMarkers.pop()?.focus()
-    this.showMoreDisabled = false
-  }
-
-  private setShowMoreItemState() {
-    if (!this.showMoreItem) {
-      return
-    }
-
-    if (this.currentPage < this.totalPages) {
-      this.showMoreItem.hidden = false
-    } else {
-      this.showMoreItem.hidden = true
-    }
-  }
-
-  #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) {

data/app/components/primer/beta/nav_list_group_element.d.ts

@@ -0,0 +1,19 @@
+export declare class NavListGroupElement extends HTMLElement {
+    #private;
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    get currentPage(): number;
+    get totalPages(): number;
+    get paginationSrc(): string;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListGroupElement: typeof NavListGroupElement;
+    }
+}

data/app/components/primer/beta/nav_list_group_element.js

@@ -0,0 +1,108 @@
+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 _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
+import { controller, target, targets } from '@github/catalyst';
+let NavListGroupElement = class NavListGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListGroupElement_instances.add(this);
+    }
+    connectedCallback() {
+        this.setShowMoreItemState();
+    }
+    get showMoreDisabled() {
+        return this.showMoreItem.hasAttribute('aria-disabled');
+    }
+    set showMoreDisabled(value) {
+        if (value) {
+            this.showMoreItem.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.showMoreItem.removeAttribute('aria-disabled');
+        }
+        this.showMoreItem.classList.toggle('disabled', value);
+    }
+    set currentPage(value) {
+        this.showMoreItem.setAttribute('data-current-page', value.toString());
+    }
+    get currentPage() {
+        return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
+    }
+    get totalPages() {
+        return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
+    }
+    get paginationSrc() {
+        return this.showMoreItem.getAttribute('src') || '';
+    }
+    async showMore(e) {
+        var _a, _b;
+        e.preventDefault();
+        if (this.showMoreDisabled)
+            return;
+        this.showMoreDisabled = true;
+        let html;
+        try {
+            const paginationURL = new URL(this.paginationSrc, window.location.origin);
+            this.currentPage++;
+            paginationURL.searchParams.append('page', this.currentPage.toString());
+            const response = await fetch(paginationURL);
+            if (!response.ok)
+                return;
+            html = await response.text();
+            if (this.currentPage === this.totalPages) {
+                this.showMoreItem.hidden = true;
+            }
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_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-group.focusMarkers');
+        const listId = e.target.closest('button').getAttribute('data-list-id');
+        const list = document.getElementById(listId);
+        list.append(fragment);
+        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = true;
+        }
+    }
+};
+_NavListGroupElement_instances = new WeakSet();
+_NavListGroupElement_parseHTML = function _NavListGroupElement_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);
+};
+__decorate([
+    target
+], NavListGroupElement.prototype, "showMoreItem", void 0);
+__decorate([
+    targets
+], NavListGroupElement.prototype, "focusMarkers", void 0);
+NavListGroupElement = __decorate([
+    controller
+], NavListGroupElement);
+export { NavListGroupElement };
+window.NavListGroupElement = NavListGroupElement;

data/app/components/primer/beta/nav_list_group_element.ts

@@ -0,0 +1,97 @@
+import {controller, target, targets} from '@github/catalyst'
+
+@controller
+export class NavListGroupElement extends HTMLElement {
+  @target showMoreItem: HTMLElement
+  @targets focusMarkers: HTMLElement[]
+
+  connectedCallback(): void {
+    this.setShowMoreItemState()
+  }
+
+  get showMoreDisabled(): boolean {
+    return this.showMoreItem.hasAttribute('aria-disabled')
+  }
+
+  set showMoreDisabled(value: boolean) {
+    if (value) {
+      this.showMoreItem.setAttribute('aria-disabled', 'true')
+    } else {
+      this.showMoreItem.removeAttribute('aria-disabled')
+    }
+    this.showMoreItem.classList.toggle('disabled', value)
+  }
+
+  set currentPage(value: number) {
+    this.showMoreItem.setAttribute('data-current-page', value.toString())
+  }
+
+  get currentPage(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
+  }
+
+  get totalPages(): number {
+    return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
+  }
+
+  get paginationSrc(): string {
+    return this.showMoreItem.getAttribute('src') || ''
+  }
+
+  private async showMore(e: Event) {
+    e.preventDefault()
+    if (this.showMoreDisabled) return
+    this.showMoreDisabled = true
+    let html
+    try {
+      const paginationURL = new URL(this.paginationSrc, window.location.origin)
+      this.currentPage++
+      paginationURL.searchParams.append('page', this.currentPage.toString())
+      const response = await fetch(paginationURL)
+      if (!response.ok) return
+      html = await response.text()
+      if (this.currentPage === this.totalPages) {
+        this.showMoreItem.hidden = true
+      }
+    } catch (err) {
+      // Ignore network errors
+      this.showMoreDisabled = false
+      this.currentPage--
+      return
+    }
+    const fragment = this.#parseHTML(document, html)
+    fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers')
+    const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
+    const list = document.getElementById(listId)!
+    list.append(fragment)
+    this.focusMarkers.pop()?.focus()
+    this.showMoreDisabled = false
+  }
+
+  private setShowMoreItemState() {
+    if (!this.showMoreItem) {
+      return
+    }
+
+    if (this.currentPage < this.totalPages) {
+      this.showMoreItem.hidden = false
+    } else {
+      this.showMoreItem.hidden = true
+    }
+  }
+
+  #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)
+  }
+}
+
+declare global {
+  interface Window {
+    NavListGroupElement: typeof NavListGroupElement
+  }
+}
+
+window.NavListGroupElement = NavListGroupElement

data/app/components/primer/beta/relative_time.rb

@@ -52,7 +52,7 @@ module Primer
 
       MONTH_DEFAULT = nil
       MONTH_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        MONTH_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit",
         :short => "short",
@@ -63,7 +63,7 @@ module Primer
 
       YEAR_DEFAULT = nil
       YEAR_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        YEAR_DEFAULT => nil,
         :numeric => "numeric",
         :two_digit => "2-digit"
       }.freeze
@@ -71,7 +71,7 @@ module Primer
 
       TIMEZONENAME_DEFAULT = nil
       TIMEZONE_MAPPINGS = {
-        DAY_DEFAULT => nil,
+        TIMEZONENAME_DEFAULT => nil,
         :long => "long",
         :short => "short",
         :short_offset => "shortOffset",
@@ -131,7 +131,7 @@ module Primer
         @system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
         @system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
         @system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
-        @system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
+        @system_arguments[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
         @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
         @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
         @system_arguments[:threshold] = threshold if threshold.present?

data/app/components/primer/component.rb

@@ -16,6 +16,9 @@ module Primer
       include ViewComponent::PolymorphicSlots
     end
 
+    include ExperimentalRenderHelpers
+    include ExperimentalSlotHelpers
+
     include AttributesHelper
     include ClassNameHelper
     include FetchOrFallbackHelper

data/app/components/primer/primer.d.ts

@@ -3,9 +3,11 @@ import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';
 import './focus_group';
+import './scrollable_region';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.js

@@ -3,9 +3,11 @@ import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';
 import './focus_group';
+import './scrollable_region';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.ts

@@ -3,9 +3,11 @@ import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'
 import './focus_group'
+import './scrollable_region'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './beta/nav_list'
+import './beta/nav_list_group_element'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'

data/app/components/primer/scrollable_region.d.ts

@@ -0,0 +1,13 @@
+export declare class ScrollableRegionElement extends HTMLElement {
+    hasOverflow: boolean;
+    labelledBy: string;
+    observer: ResizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ScrollableRegionElement: typeof ScrollableRegionElement;
+    }
+}

data/app/components/primer/scrollable_region.js

@@ -0,0 +1,52 @@
+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;
+};
+import { controller, attr } from '@github/catalyst';
+let ScrollableRegionElement = class ScrollableRegionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.hasOverflow = false;
+        this.labelledBy = '';
+    }
+    connectedCallback() {
+        this.style.overflow = 'auto';
+        this.observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                this.hasOverflow =
+                    entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth;
+            }
+        });
+        this.observer.observe(this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'data-has-overflow') {
+            if (this.hasOverflow) {
+                this.setAttribute('aria-labelledby', this.labelledBy);
+                this.setAttribute('role', 'region');
+                this.setAttribute('tabindex', '0');
+            }
+            else {
+                this.removeAttribute('aria-labelledby');
+                this.removeAttribute('role');
+                this.removeAttribute('tabindex');
+            }
+        }
+    }
+};
+__decorate([
+    attr
+], ScrollableRegionElement.prototype, "hasOverflow", void 0);
+__decorate([
+    attr
+], ScrollableRegionElement.prototype, "labelledBy", void 0);
+ScrollableRegionElement = __decorate([
+    controller
+], ScrollableRegionElement);
+export { ScrollableRegionElement };
+window.ScrollableRegionElement = ScrollableRegionElement;

data/app/components/primer/scrollable_region.ts

@@ -0,0 +1,48 @@
+import {controller, attr} from '@github/catalyst'
+
+@controller
+export class ScrollableRegionElement extends HTMLElement {
+  @attr hasOverflow = false
+  @attr labelledBy = ''
+
+  observer: ResizeObserver
+
+  connectedCallback() {
+    this.style.overflow = 'auto'
+
+    this.observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.hasOverflow =
+          entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth
+      }
+    })
+
+    this.observer.observe(this)
+  }
+
+  disconnectedCallback() {
+    this.observer.disconnect()
+  }
+
+  attributeChangedCallback(name: string) {
+    if (name === 'data-has-overflow') {
+      if (this.hasOverflow) {
+        this.setAttribute('aria-labelledby', this.labelledBy)
+        this.setAttribute('role', 'region')
+        this.setAttribute('tabindex', '0')
+      } else {
+        this.removeAttribute('aria-labelledby')
+        this.removeAttribute('role')
+        this.removeAttribute('tabindex')
+      }
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ScrollableRegionElement: typeof ScrollableRegionElement
+  }
+}
+
+window.ScrollableRegionElement = ScrollableRegionElement

data/app/lib/primer/experimental_render_helpers.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module ExperimentalRenderHelpers
+    def self.included(base)
+      base.include(InstanceMethods)
+    end
+
+    # :nodoc:
+    module InstanceMethods
+      def evaluate_block(*args, **kwargs, &block)
+        # Prevent double renders by using the capture method on the component
+        # that originally received the block.
+        #
+        # Handle blocks that originate from C code such as `&:method` by checking
+        # source_location. Such blocks don't allow access to their receiver.
+        return unless block
+
+        return yield(*args, **kwargs) if block&.source_location.nil?
+
+        block_context = block.binding.receiver
+
+        if block_context.class < ActionView::Base
+          block_context.capture(*args, &block)
+        else
+          capture(*args, &block)
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/experimental_slot_helpers.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module ExperimentalSlotHelpers
+    def self.included(base)
+      base.extend(ClassMethods)
+    end
+
+    # :nodoc:
+    module ClassMethods
+      def add_polymorphic_slot_type(slot_name:, type:, callable:)
+        slot_def = registered_slots[slot_name]
+        raise "Unknown slot '#{slot_name}'" unless slot_def
+
+        poly_def = define_slot(
+          type,
+          collection: slot_def[:collection],
+          callable: callable
+        )
+
+        registered_slots[slot_name][:renderable_hash][type] = poly_def
+
+        define_method(:"with_#{type}") do |**system_arguments, &block|
+          set_slot(slot_name, poly_def, **system_arguments, &block)
+        end
+      end
+    end
+  end
+end

data/lib/primer/classify/utilities.rb

@@ -27,7 +27,9 @@ module Primer
         "^height" => "h",
         "^color-bg" => "bg",
         "^color-border" => "border_color",
-        "^color-fg" => "color"
+        "^color-fg" => "color",
+        "^f" => "font_size",
+        "^rounded" => "border_radius"
       }.freeze
 
       SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
@@ -91,9 +93,6 @@ module Primer
 
         # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
         def classes_to_hash(classes)
-          # This method is too slow to run in production
-          return { classes: classes } unless validate_class_names?
-
           obj = {}
           classes = classes.split
           # Loop through all classes supplied and reject ones we find a match for

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 18
-      PATCH = 1
+      MINOR = 20
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -218,8 +218,8 @@ module Primer
           path, <<~ERB
             #{YAML.dump(frontmatter)}
             ---
-            <%= @page.data[:description_md] %>
-            <%= @page.data[:args_md] %>
+            <%= @page.data[:description_md].html_safe %>
+            <%= @page.data[:args_md].html_safe %>
           ERB
         )
       end

data/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb

@@ -0,0 +1,11 @@
+<div style="height: 400px"></div>
+
+<div style="position: relative">
+  <%= render Primer::Alpha::ActionMenu.new(anchor_align: :end) do |c| %>
+    <% c.with_show_button { "Edit" } %>
+    <% c.with_item(tag: :button, type: "button", label: "Rename") %>
+    <% c.with_item(tag: :button, type: "button", scheme: :danger, label: "Remove") %>
+  <% end %>
+</div>
+
+<div style="height: 1400px"></div>