@primer/view-components 0.4.0-rc.26cca393 → 0.4.0-rc.5f73084c

package/app/components/primer/alpha/action_bar.css

@@ -0,0 +1 @@
+.ActionBar{display:flex!important;flex-grow:1;flex-shrink:1;justify-content:flex-end;min-width:calc(var(--control-medium-size,2rem)*3);overflow:hidden;position:relative}.ActionBar,.ActionBar-item-container{align-items:center;box-sizing:initial}.ActionBar-item-container{display:flex;flex-grow:0;flex-shrink:0}.ActionBar-item{flex-shrink:0;position:relative}.ActionBar-more-menu{flex-shrink:0}.ActionBar--small{min-width:calc(var(--control-small-size,1.75rem)*3)}.ActionBar--large{min-width:calc(var(--control-large-size,2.5rem)*3)}.ActionBar-divider{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-subtle);height:calc(var(--control-medium-size,2rem)/2);margin:0 var(--controlStack-medium-gap-condensed,.5rem)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed,.5rem)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed,.5rem)}@media (pointer:coarse){.ActionBar .ActionBar-item-container{gap:calc(var(--control-minTarget-coarse,2.75rem) - var(--control-medium-size,2rem))}.ActionBar--small .ActionBar-item-container{gap:calc(var(--control-minTarget-coarse,2.75rem) - var(--control-small-size,1.75rem))}.ActionBar--large .ActionBar-item-container{gap:calc(var(--control-minTarget-coarse,2.75rem) - var(--control-large-size,2.5rem))}}

package/app/components/primer/alpha/action_bar.css.json

@@ -0,0 +1,17 @@
+{
+  "name": "alpha/action_bar",
+  "selectors": [
+    ".ActionBar",
+    ".ActionBar-item-container",
+    ".ActionBar-item",
+    ".ActionBar-more-menu",
+    ".ActionBar--small",
+    ".ActionBar--large",
+    ".ActionBar-divider",
+    ".ActionBar--small .ActionBar-divider",
+    ".ActionBar--large .ActionBar-divider",
+    ".ActionBar .ActionBar-item-container",
+    ".ActionBar--small .ActionBar-item-container",
+    ".ActionBar--large .ActionBar-item-container"
+  ]
+}

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

@@ -0,0 +1,16 @@
+declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    itemContainer: HTMLElement;
+    moreMenu: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    menuItemClick(event: Event): void;
+    update(rect?: DOMRect): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}
+export {};

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

@@ -0,0 +1,172 @@
+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 __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 __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 _ActionBarElement_instances, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_focusZoneAbortController, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
+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(entry.contentRect);
+        }
+    }
+});
+let ActionBarElement = class ActionBarElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionBarElement_instances.add(this);
+        _ActionBarElement_initialBarWidth.set(this, void 0);
+        _ActionBarElement_previousBarWidth.set(this, void 0);
+        _ActionBarElement_focusZoneAbortController.set(this, null);
+    }
+    connectedCallback() {
+        var _a, _b, _c, _d;
+        __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, (_a = this.offsetWidth) !== null && _a !== void 0 ? _a : Infinity, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, (_b = this.itemContainer.offsetWidth) !== null && _b !== void 0 ? _b : Infinity, "f");
+        // Calculate the width of all the items before hiding anything
+        for (const item of this.items) {
+            const width = item.getBoundingClientRect().width;
+            const marginLeft = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginLeft, 10);
+            const marginRight = parseInt((_d = window.getComputedStyle(item)) === null || _d === void 0 ? void 0 : _d.marginRight, 10);
+            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
+        }
+        resizeObserver.observe(this);
+        instersectionObserver.observe(this);
+        setTimeout(() => {
+            this.style.overflow = 'visible';
+            this.update();
+        }, 20); // Wait for the items to be rendered, making this really short to avoid a flash of unstyled content
+    }
+    disconnectedCallback() {
+        resizeObserver.unobserve(this);
+        instersectionObserver.unobserve(this);
+    }
+    menuItemClick(event) {
+        var _a;
+        const currentTarget = event.currentTarget;
+        const id = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.getAttribute('data-for');
+        if (id) {
+            (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }
+    update(rect = this.getBoundingClientRect()) {
+        // Only recalculate if the bar width changed
+        if (rect.width <= __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f") || __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f") === 0) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrink).call(this);
+        }
+        else if (rect.width > __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_grow).call(this);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, rect.width, "f");
+        if (rect.width <= __classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f")) {
+            this.style.justifyContent = 'space-between';
+        }
+        else {
+            this.style.justifyContent = 'flex-end';
+        }
+        if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
+            __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this.itemContainer, {
+            bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+            focusOutBehavior: 'wrap',
+            focusableElementFilter: element => {
+                return !element.closest('.ActionBar-item[hidden]');
+            }
+        }), "f");
+    }
+};
+_ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
+    var _a;
+    return parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0;
+}, _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
+    // Get the offset of the item container from the container edge
+    return this.offsetWidth - this.itemContainer.offsetWidth;
+}, _ActionBarElement_menuSpace = function _ActionBarElement_menuSpace() {
+    if (this.moreMenu.hidden) {
+        return 0;
+    }
+    return this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_itemGap).call(this);
+}, _ActionBarElement_shrink = function _ActionBarElement_shrink() {
+    if (this.items[0].hidden) {
+        return;
+    }
+    let index = this.items.length - 1;
+    for (const item of this.items.reverse()) {
+        if (!item.hidden && __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this)) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
+        }
+        else if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this)) {
+            return;
+        }
+        index--;
+    }
+}, _ActionBarElement_grow = function _ActionBarElement_grow() {
+    // If last item is visible, there is no need to grow
+    if (!this.items[this.items.length - 1].hidden) {
+        return;
+    }
+    let index = 0;
+    for (const item of this.items) {
+        if (item.hidden) {
+            const offsetWidth = Number(item.getAttribute('data-offset-width'));
+            if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this) + offsetWidth || index === this.items.length - 1) {
+                __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
+            }
+            else {
+                return;
+            }
+        }
+        index++;
+    }
+    if (!this.items[this.items.length - 1].hidden) {
+        this.moreMenu.hidden = true;
+    }
+}, _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
+    this.items[index].hidden = false;
+    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
+}, _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
+    this.items[index].hidden = true;
+    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = false;
+    if (this.moreMenu.hidden) {
+        this.moreMenu.hidden = false;
+    }
+}, _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
+    return this.moreMenu.querySelectorAll('[role="menu"] > li');
+};
+__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;

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

@@ -25,11 +25,21 @@ const DIRECTION_CLASSES = [
     'tooltip-nw',
     'tooltip-sw'
 ];
-function focusOutListener() {
+function closeOpenTooltips(except) {
     for (const tooltip of openTooltips) {
-        tooltip.hidePopover();
+        if (tooltip === except)
+            continue;
+        if (tooltip.matches(':popover-open')) {
+            tooltip.hidePopover();
+        }
+        else {
+            openTooltips.delete(tooltip);
+        }
     }
 }
+function focusOutListener() {
+    closeOpenTooltips();
+}
 const tooltips = new Set();
 const openTooltips = new Set();
 class ToolTipElement extends HTMLElement {
@@ -197,10 +207,10 @@ class ToolTipElement extends HTMLElement {
     }
     /* @deprecated */
     set hiddenFromView(value) {
-        if (value) {
+        if (value && this.matches(':popover-open')) {
             this.hidePopover();
         }
-        else {
+        else if (!value && !this.matches(':popover-open')) {
             this.showPopover();
         }
     }
@@ -287,10 +297,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     if (isOpen) {
         openTooltips.add(this);
         this.classList.remove(TOOLTIP_SR_ONLY_CLASS);
-        for (const tooltip of tooltips) {
-            if (tooltip !== this)
-                tooltip.hidePopover();
-        }
+        closeOpenTooltips(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
     else {

package/app/components/primer/beta/link.css

@@ -1 +1 @@
-.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
+.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

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

@@ -1,5 +1,6 @@
 import '@github/include-fragment-element';
 import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';
 import './focus_group';

package/app/components/primer/primer.js

@@ -1,5 +1,6 @@
 import '@github/include-fragment-element';
 import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';
 import './focus_group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.4.0-rc.26cca393",
+  "version": "0.4.0-rc.5f73084c",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -86,7 +86,7 @@
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^7.8.0",
     "prettier": "2.7.1",
-    "primer-changesets-cli": "2.1.0",
+    "primer-changesets-cli": "2.2.0",
     "rollup": "^2.77.1",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^14.13.0",

package/static/arguments.json

@@ -1,4 +1,54 @@
 [
+  {
+    "component": "ActionBar",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionBar",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/default/",
+    "parameters": [
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:medium`",
+        "description": "One of `:large`, `:medium`, or `:small`."
+      },
+      {
+        "name": "overflow_menu",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Whether to render the overflow menu."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "ActionBar::Divider",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionBarDivider",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/divider.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/divider/default/",
+    "parameters": [
+
+    ]
+  },
+  {
+    "component": "ActionBar::Item",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionBarItem",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
+    "parameters": [
+
+    ]
+  },
   {
     "component": "ActionList",
     "status": "alpha",
@@ -3582,17 +3632,11 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/link.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/link/default/",
     "parameters": [
-      {
-        "name": "tag",
-        "type": "String",
-        "default": "`:a`",
-        "description": "One of `:a` or `:span`."
-      },
       {
         "name": "href",
         "type": "String",
         "default": "`nil`",
-        "description": "URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered."
+        "description": "URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered."
       },
       {
         "name": "scheme",

package/static/audited_at.json

@@ -1,4 +1,7 @@
 {
+  "Primer::Alpha::ActionBar": "",
+  "Primer::Alpha::ActionBar::Divider": "",
+  "Primer::Alpha::ActionBar::Item": "",
   "Primer::Alpha::ActionList": "",
   "Primer::Alpha::ActionList::Divider": "",
   "Primer::Alpha::ActionList::FormWrapper": "",

package/static/classes.json

@@ -1,4 +1,25 @@
 {
+  "ActionBar": [
+    "Primer::Alpha::ActionBar"
+  ],
+  "ActionBar--large": [
+    "Primer::Alpha::ActionBar"
+  ],
+  "ActionBar--small": [
+    "Primer::Alpha::ActionBar"
+  ],
+  "ActionBar-divider": [
+    "Primer::Alpha::ActionBar"
+  ],
+  "ActionBar-item": [
+    "Primer::Alpha::ActionBar"
+  ],
+  "ActionBar-item-container": [
+    "Primer::Alpha::ActionBar"
+  ],
+  "ActionBar-more-menu": [
+    "Primer::Alpha::ActionBar"
+  ],
   "ActionList-sectionDivider": [
     "Primer::Alpha::ActionList"
   ],

package/static/constants.json

@@ -1,4 +1,23 @@
 {
+  "Primer::Alpha::ActionBar": {
+    "DEFAULT_SIZE": "medium",
+    "Divider": "Primer::Alpha::ActionBar::Divider",
+    "Item": "Primer::Alpha::ActionBar::Item",
+    "SIZE_MAPPINGS": {
+      "medium": null,
+      "small": "ActionBar--small",
+      "large": "ActionBar--large"
+    },
+    "SIZE_OPTIONS": [
+      "medium",
+      "small",
+      "large"
+    ]
+  },
+  "Primer::Alpha::ActionBar::Divider": {
+  },
+  "Primer::Alpha::ActionBar::Item": {
+  },
   "Primer::Alpha::ActionList": {
     "DEFAULT_MENU_ITEM_ROLE": "menuitem",
     "DEFAULT_ROLE": "list",
@@ -929,16 +948,11 @@
   },
   "Primer::Beta::Link": {
     "DEFAULT_SCHEME": "default",
-    "DEFAULT_TAG": "a",
     "SCHEME_MAPPINGS": {
       "default": "",
       "primary": "Link--primary",
       "secondary": "Link--secondary"
-    },
-    "TAG_OPTIONS": [
-      "a",
-      "span"
-    ]
+    }
   },
   "Primer::Beta::Markdown": {
     "DEFAULT_TAG": "div",