primer_view_components 0.0.122 → 0.1.0

data/app/components/primer/anchored_position.js

@@ -0,0 +1,149 @@
+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 _AnchoredPositionElement_anchorElement, _AnchoredPositionElement_animationFrame;
+import { getAnchoredPosition } from '@primer/behaviors';
+const updateWhenVisible = (() => {
+    const anchors = new Set();
+    let intersectionObserver = null;
+    let resizeObserver = null;
+    function updateVisibleAnchors() {
+        for (const anchor of anchors) {
+            anchor.update();
+        }
+    }
+    return (el) => {
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('resize', updateVisibleAnchors);
+        intersectionObserver || (intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const target = entry.target;
+                if (entry.isIntersecting) {
+                    target.update();
+                    anchors.add(target);
+                }
+                else {
+                    anchors.delete(target);
+                }
+            }
+        }));
+        resizeObserver || (resizeObserver = new ResizeObserver(() => {
+            for (const anchor of anchors) {
+                anchor.update();
+            }
+        }));
+        resizeObserver.observe(el.ownerDocument.documentElement);
+        intersectionObserver.observe(el);
+    };
+})();
+export default class AnchoredPositionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _AnchoredPositionElement_anchorElement.set(this, null);
+        _AnchoredPositionElement_animationFrame.set(this, void 0);
+    }
+    get align() {
+        const value = this.getAttribute('align');
+        if (value === 'center' || value === 'end')
+            return value;
+        return 'start';
+    }
+    set align(value) {
+        this.setAttribute('align', `${value}`);
+    }
+    get side() {
+        const value = this.getAttribute('side');
+        if (value === 'inside-top' ||
+            value === 'inside-bottom' ||
+            value === 'inside-left' ||
+            value === 'inside-right' ||
+            value === 'inside-center' ||
+            value === 'outside-top' ||
+            value === 'outside-left' ||
+            value === 'outside-right') {
+            return value;
+        }
+        return 'outside-bottom';
+    }
+    set side(value) {
+        this.setAttribute('side', `${value}`);
+    }
+    get anchorOffset() {
+        const alias = this.getAttribute('anchor-offset');
+        if (alias === 'spacious' || alias === '8')
+            return 8;
+        return 4;
+    }
+    set anchorOffset(value) {
+        this.setAttribute('anchor-offset', `${value}`);
+    }
+    get anchor() {
+        return this.getAttribute('anchor') || '';
+    }
+    set anchor(value) {
+        this.setAttribute('anchor', `${value}`);
+    }
+    get anchorElement() {
+        if (__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f"))
+            return __classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f");
+        const idRef = this.anchor;
+        if (!idRef)
+            return null;
+        return this.ownerDocument.getElementById(idRef);
+    }
+    set anchorElement(value) {
+        __classPrivateFieldSet(this, _AnchoredPositionElement_anchorElement, value, "f");
+        if (!__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f")) {
+            this.removeAttribute('anchor');
+        }
+    }
+    get alignmentOffset() {
+        return Number(this.getAttribute('alignment-offset'));
+    }
+    set alignmentOffset(value) {
+        this.setAttribute('alignment-offset', `${value}`);
+    }
+    get allowOutOfBounds() {
+        return this.hasAttribute('allow-out-of-bounds');
+    }
+    set allowOutOfBounds(value) {
+        this.toggleAttribute('allow-out-of-bounds', value);
+    }
+    connectedCallback() {
+        this.update();
+        this.addEventListener('beforetoggle', () => this.update());
+        updateWhenVisible(this);
+    }
+    attributeChangedCallback() {
+        this.update();
+    }
+    update() {
+        if (!this.isConnected)
+            return;
+        cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
+        __classPrivateFieldSet(this, _AnchoredPositionElement_animationFrame, requestAnimationFrame(() => {
+            const anchor = this.anchorElement;
+            if (!anchor)
+                return;
+            const { left, top, anchorSide, anchorAlign } = getAnchoredPosition(this, anchor, this);
+            this.style.top = `${top}px`;
+            this.style.left = `${left}px`;
+            this.classList.remove('Overlay--anchorAlign-start', 'Overlay--anchorAlign-center', 'Overlay--anchorAlign-end', 'Overlay--anchorSide-insideTop', 'Overlay--anchorSide-insideBottom', 'Overlay--anchorSide-insideLeft', 'Overlay--anchorSide-insideRight', 'Overlay--anchorSide-insideCenter', 'Overlay--anchorSide-outsideTop', 'Overlay--anchorSide-outsideLeft', 'Overlay--anchorSide-outsideRight');
+            this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`);
+        }), "f");
+    }
+}
+_AnchoredPositionElement_anchorElement = new WeakMap(), _AnchoredPositionElement_animationFrame = new WeakMap();
+AnchoredPositionElement.observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds'];
+if (!customElements.get('anchored-position')) {
+    window.AnchoredPositionElement = AnchoredPositionElement;
+    customElements.define('anchored-position', AnchoredPositionElement);
+}

data/app/components/primer/anchored_position.ts

@@ -0,0 +1,167 @@
+import type {AnchorAlignment, AnchorSide, PositionSettings} from '@primer/behaviors'
+import {getAnchoredPosition} from '@primer/behaviors'
+
+const updateWhenVisible = (() => {
+  const anchors = new Set<AnchoredPositionElement>()
+  let intersectionObserver: IntersectionObserver | null = null
+  let resizeObserver: ResizeObserver | null = null
+  function updateVisibleAnchors() {
+    for (const anchor of anchors) {
+      anchor.update()
+    }
+  }
+  return (el: AnchoredPositionElement) => {
+    // eslint-disable-next-line github/prefer-observers
+    window.addEventListener('resize', updateVisibleAnchors)
+    intersectionObserver ||= new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        const target = entry.target as AnchoredPositionElement
+        if (entry.isIntersecting) {
+          target.update()
+          anchors.add(target)
+        } else {
+          anchors.delete(target)
+        }
+      }
+    })
+    resizeObserver ||= new ResizeObserver(() => {
+      for (const anchor of anchors) {
+        anchor.update()
+      }
+    })
+    resizeObserver.observe(el.ownerDocument.documentElement)
+    intersectionObserver.observe(el)
+  }
+})()
+
+export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
+  get align(): AnchorAlignment {
+    const value = this.getAttribute('align')
+    if (value === 'center' || value === 'end') return value
+    return 'start'
+  }
+
+  set align(value: AnchorAlignment) {
+    this.setAttribute('align', `${value}`)
+  }
+
+  get side(): AnchorSide {
+    const value = this.getAttribute('side')
+    if (
+      value === 'inside-top' ||
+      value === 'inside-bottom' ||
+      value === 'inside-left' ||
+      value === 'inside-right' ||
+      value === 'inside-center' ||
+      value === 'outside-top' ||
+      value === 'outside-left' ||
+      value === 'outside-right'
+    ) {
+      return value
+    }
+    return 'outside-bottom'
+  }
+
+  set side(value: AnchorSide) {
+    this.setAttribute('side', `${value}`)
+  }
+
+  get anchorOffset(): number {
+    const alias = this.getAttribute('anchor-offset')
+    if (alias === 'spacious' || alias === '8') return 8
+    return 4
+  }
+
+  set anchorOffset(value: number | 'normal' | 'spacious') {
+    this.setAttribute('anchor-offset', `${value}`)
+  }
+
+  get anchor() {
+    return this.getAttribute('anchor') || ''
+  }
+
+  set anchor(value: string) {
+    this.setAttribute('anchor', `${value}`)
+  }
+
+  #anchorElement: HTMLElement | null = null
+  get anchorElement(): HTMLElement | null {
+    if (this.#anchorElement) return this.#anchorElement
+    const idRef = this.anchor
+    if (!idRef) return null
+    return this.ownerDocument.getElementById(idRef)
+  }
+
+  set anchorElement(value: HTMLElement | null) {
+    this.#anchorElement = value
+    if (!this.#anchorElement) {
+      this.removeAttribute('anchor')
+    }
+  }
+
+  get alignmentOffset(): number {
+    return Number(this.getAttribute('alignment-offset'))
+  }
+
+  set alignmentOffset(value: number) {
+    this.setAttribute('alignment-offset', `${value}`)
+  }
+
+  get allowOutOfBounds() {
+    return this.hasAttribute('allow-out-of-bounds')
+  }
+
+  set allowOutOfBounds(value: boolean) {
+    this.toggleAttribute('allow-out-of-bounds', value)
+  }
+
+  connectedCallback() {
+    this.update()
+    this.addEventListener('beforetoggle', () => this.update())
+    updateWhenVisible(this)
+  }
+
+  static observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds']
+  attributeChangedCallback() {
+    this.update()
+  }
+
+  #animationFrame: ReturnType<typeof requestAnimationFrame>
+  update() {
+    if (!this.isConnected) return
+    cancelAnimationFrame(this.#animationFrame)
+
+    this.#animationFrame = requestAnimationFrame(() => {
+      const anchor = this.anchorElement
+      if (!anchor) return
+      const {left, top, anchorSide, anchorAlign} = getAnchoredPosition(this, anchor, this)
+      this.style.top = `${top}px`
+      this.style.left = `${left}px`
+      this.classList.remove(
+        'Overlay--anchorAlign-start',
+        'Overlay--anchorAlign-center',
+        'Overlay--anchorAlign-end',
+        'Overlay--anchorSide-insideTop',
+        'Overlay--anchorSide-insideBottom',
+        'Overlay--anchorSide-insideLeft',
+        'Overlay--anchorSide-insideRight',
+        'Overlay--anchorSide-insideCenter',
+        'Overlay--anchorSide-outsideTop',
+        'Overlay--anchorSide-outsideLeft',
+        'Overlay--anchorSide-outsideRight'
+      )
+      this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`)
+    })
+  }
+}
+
+if (!customElements.get('anchored-position')) {
+  window.AnchoredPositionElement = AnchoredPositionElement
+  customElements.define('anchored-position', AnchoredPositionElement)
+}
+
+declare global {
+  interface Window {
+    AnchoredPositionElement: typeof AnchoredPositionElement
+  }
+}

data/app/components/primer/beta/avatar.css.json

@@ -13,5 +13,19 @@
     ".avatar-6",
     ".avatar-7",
     ".avatar-8"
+  ],
+  "classes": [
+    "avatar",
+    "avatar-link",
+    "avatar-group-item",
+    "avatar-1",
+    "avatar-2",
+    "avatar-small",
+    "avatar-3",
+    "avatar-4",
+    "avatar-5",
+    "avatar-6",
+    "avatar-7",
+    "avatar-8"
   ]
 }

data/app/components/primer/beta/avatar_stack.css.json

@@ -24,5 +24,14 @@
     ".AvatarStack--right .avatar.avatar-more:before",
     ".AvatarStack--right .avatar.avatar-more:after",
     ".AvatarStack--right .avatar"
+  ],
+  "classes": [
+    "AvatarStack",
+    "AvatarStack-body",
+    "AvatarStack--two",
+    "AvatarStack--three-plus",
+    "avatar",
+    "avatar-more",
+    "AvatarStack--right"
   ]
 }

data/app/components/primer/beta/blankslate.css.json

@@ -18,5 +18,17 @@
     ".blankslate-large h3",
     ".blankslate-large p",
     ".blankslate-clean-background"
+  ],
+  "classes": [
+    "blankslate",
+    "blankslate-icon",
+    "blankslate-image",
+    "blankslate-heading",
+    "blankslate-action",
+    "blankslate-capped",
+    "blankslate-spacious",
+    "blankslate-narrow",
+    "blankslate-large",
+    "blankslate-clean-background"
   ]
 }

data/app/components/primer/beta/border_box.css.json

@@ -50,5 +50,37 @@
     ".Box-row--blue",
     ".Box-row--gray",
     ".Box-btn-octicon.btn-octicon"
+  ],
+  "classes": [
+    "Box",
+    "Box--condensed",
+    "Box-body",
+    "Box-footer",
+    "Box-header",
+    "Box-btn-octicon",
+    "btn-octicon",
+    "Box-row",
+    "Box--spacious",
+    "Box-title",
+    "Box-row--unread",
+    "unread",
+    "navigation-focus",
+    "Box-row--drag-button",
+    "is-dragging",
+    "sortable-chosen",
+    "sortable-ghost",
+    "Box-row--drag-hide",
+    "Box-row--focus-gray",
+    "Box-row--focus-blue",
+    "Box-row--hover-gray",
+    "Box-row--hover-blue",
+    "Box-row-link",
+    "Box--scrollable",
+    "Box--blue",
+    "Box--danger",
+    "Box-header--blue",
+    "Box-row--yellow",
+    "Box-row--blue",
+    "Box-row--gray"
   ]
 }

data/app/components/primer/beta/breadcrumbs.css.json

@@ -7,5 +7,9 @@
     ".breadcrumb-item-selected:after",
     ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
     ".breadcrumb-item-selected a"
+  ],
+  "classes": [
+    "breadcrumb-item",
+    "breadcrumb-item-selected"
   ]
 }

data/app/components/primer/beta/button.css.json

@@ -67,5 +67,27 @@
     ".Button--iconOnly",
     ".Button--iconOnly.Button--small",
     ".Button--iconOnly.Button--large"
+  ],
+  "classes": [
+    "Button",
+    "Button-withTooltip",
+    "Button-content",
+    "Button-content--alignStart",
+    "Button-visual",
+    "Counter",
+    "Button-label",
+    "Button-leadingVisual",
+    "Button-trailingVisual",
+    "Button-trailingAction",
+    "Button--small",
+    "Button--large",
+    "Button--fullWidth",
+    "Button--primary",
+    "Button--secondary",
+    "Button--invisible",
+    "Button--invisible-noVisuals",
+    "Button--link",
+    "Button--danger",
+    "Button--iconOnly"
   ]
 }

data/app/components/primer/beta/counter.css.json

@@ -6,5 +6,11 @@
     ".Counter .octicon",
     ".Counter--primary",
     ".Counter--secondary"
+  ],
+  "classes": [
+    "Counter",
+    "octicon",
+    "Counter--primary",
+    "Counter--secondary"
   ]
 }

data/app/components/primer/beta/flash.css.json

@@ -23,5 +23,20 @@
     ".flash-banner",
     ".flash-full",
     ".warning"
+  ],
+  "classes": [
+    "flash",
+    "octicon",
+    "flash-messages",
+    "flash-close",
+    "flash-action",
+    "btn",
+    "btn-primary",
+    "flash-warn",
+    "flash-error",
+    "flash-success",
+    "flash-full",
+    "flash-banner",
+    "warning"
   ]
 }

data/app/components/primer/beta/flash.html.erb

@@ -1,6 +1,5 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= primer_octicon @icon if @icon %>
-  <%= content %>
+  <%= primer_octicon @icon if @icon %><%= content %>
   <% if @dismissible %>
     <button class="flash-close js-flash-close" type="button" aria-label="Close">
       <%= primer_octicon "x" %>

data/app/components/primer/beta/label.css.json

@@ -21,5 +21,25 @@
     ".Label--closed",
     ".Label--done",
     ".Label--sponsors"
+  ],
+  "classes": [
+    "labels",
+    "Label",
+    "label",
+    "Label--large",
+    "Label--inline",
+    "Label--primary",
+    "Label--secondary",
+    "Label--accent",
+    "Label--info",
+    "Label--success",
+    "Label--attention",
+    "Label--warning",
+    "Label--severe",
+    "Label--danger",
+    "Label--open",
+    "Label--closed",
+    "Label--done",
+    "Label--sponsors"
   ]
 }

data/app/components/primer/beta/link.css.json

@@ -15,5 +15,13 @@
     ".Link--muted:hover [class*=color-fg]",
     ".Link--primary:hover [class*=color-fg]",
     ".Link--secondary:hover [class*=color-fg]"
+  ],
+  "classes": [
+    "Link",
+    "Link--primary",
+    "Link--secondary",
+    "Link--muted",
+    "Link--onHover",
+    "color-fg"
   ]
 }

data/app/components/primer/beta/popover.css.json

@@ -35,5 +35,23 @@
     ".Popover-message--right:before",
     ".Popover-message--large",
     ".Popover-message>.btn-octicon"
+  ],
+  "classes": [
+    "Popover",
+    "Popover-message",
+    "Popover-message--no-caret",
+    "Popover-message--bottom-left",
+    "Popover-message--bottom-right",
+    "Popover-message--bottom",
+    "Popover-message--top-right",
+    "Popover-message--top-left",
+    "Popover-message--left-bottom",
+    "Popover-message--left-top",
+    "Popover-message--left",
+    "Popover-message--right-bottom",
+    "Popover-message--right-top",
+    "Popover-message--right",
+    "Popover-message--large",
+    "btn-octicon"
   ]
 }

data/app/components/primer/beta/progress_bar.css.json

@@ -6,5 +6,11 @@
     ".Progress--small",
     ".Progress-item",
     ".Progress-item+.Progress-item"
+  ],
+  "classes": [
+    "Progress",
+    "Progress--large",
+    "Progress--small",
+    "Progress-item"
   ]
 }

data/app/components/primer/beta/state.css.json

@@ -9,5 +9,15 @@
     ".State--closed",
     ".State--small",
     ".State--small .octicon"
+  ],
+  "classes": [
+    "State",
+    "state",
+    "State--draft",
+    "State--open",
+    "State--merged",
+    "State--closed",
+    "State--small",
+    "octicon"
   ]
 }

data/app/components/primer/beta/subhead.css.json

@@ -8,5 +8,13 @@
     ".Subhead-description",
     ".Subhead-actions",
     ".Subhead-actions+.Subhead-description"
+  ],
+  "classes": [
+    "Subhead",
+    "Subhead--spacious",
+    "Subhead-heading",
+    "Subhead-heading--danger",
+    "Subhead-description",
+    "Subhead-actions"
   ]
 }

data/app/components/primer/beta/timeline_item.css.json

@@ -12,5 +12,14 @@
     ".TimelineItem--condensed",
     ".TimelineItem--condensed:last-child",
     ".TimelineItem--condensed .TimelineItem-badge"
+  ],
+  "classes": [
+    "TimelineItem",
+    "TimelineItem-badge",
+    "TimelineItem-badge--success",
+    "TimelineItem-body",
+    "TimelineItem-avatar",
+    "TimelineItem-break",
+    "TimelineItem--condensed"
   ]
 }

data/app/components/primer/beta/truncate.css.json

@@ -8,5 +8,11 @@
     ".Truncate>.Truncate-text.Truncate-text--expandable:active",
     ".Truncate>.Truncate-text.Truncate-text--expandable:focus",
     ".Truncate>.Truncate-text.Truncate-text--expandable:hover"
+  ],
+  "classes": [
+    "Truncate",
+    "Truncate-text",
+    "Truncate-text--primary",
+    "Truncate-text--expandable"
   ]
 }

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/app/components/primer/primer.d.ts

@@ -1,4 +1,6 @@
+import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
+import './anchored_position';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';

data/app/components/primer/primer.js

@@ -1,4 +1,6 @@
+import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
+import './anchored_position';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';

data/app/components/primer/primer.pcss

@@ -1,3 +1,5 @@
+@import "@oddbird/popover-polyfill/dist/popover.css";
+
 /* CSS component styles here */
 
 /* alpha */
@@ -20,6 +22,7 @@
 @import "./beta/avatar_stack.pcss";
 @import "./beta/border_box.pcss";
 @import "./beta/blankslate.pcss";
+@import "./alpha/overlay.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
 @import "./beta/counter.pcss";

data/app/components/primer/primer.ts

@@ -1,4 +1,6 @@
+import '@oddbird/popover-polyfill'
 import './alpha/dropdown'
+import './anchored_position'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './alpha/nav_list'