openproject-primer_view_components 0.18.1 → 0.20.0

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

@@ -1 +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(--borderColor-muted,var(--color-border-muted));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)}
+.ActionBar{align-items:center;box-sizing:initial;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-item-container{box-sizing:initial;height:var(--control-medium-size,2rem);overflow:hidden}.ActionBar-item{float:left;position:relative}.ActionBar-more-menu{float:left}.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(--borderColor-muted,var(--color-border-muted));bottom:50%;float:left;height:calc(var(--control-medium-size,2rem)/2);margin:0 var(--controlStack-medium-gap-condensed,.5rem);top:50%;transform:translateY(-50%)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed,.5rem)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed,.5rem)}

data/app/components/primer/alpha/action_bar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WAEE,sBAAwB,CAGxB,WAAY,CACZ,aAAc,CAGd,wBAAyB,CANzB,iDAA+C,CAK/C,eAAgB,CAPhB,iBASF,CAEA,qCARE,kBAAmB,CAGnB,kBAWF,CANA,0BACE,YAAa,CAIb,WAAY,CADZ,aAEF,CAEA,gBAEE,aAAc,CADd,iBAEF,CAEA,qBACE,aACF,CAEA,kBACE,mDACF,CAEA,kBACE,kDACF,CAIA,mBAGE,8GAAmE,CAFnE,8CAA4C,CAC5C,uDAEF,CAEA,qCACE,sDACF,CAEA,qCACE,sDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar  */\n.ActionBar {\n  position: relative;\n  display: flex !important;\n  min-width: calc(var(--control-medium-size) * 3);\n  align-items: center;\n  flex-grow: 1;\n  flex-shrink: 1;\n  box-sizing: content-box;\n  overflow: hidden;\n  justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n  display: flex;\n  box-sizing: content-box;\n  align-items: center;\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n.ActionBar-item {\n  position: relative;\n  flex-shrink: 0;\n}\n\n.ActionBar-more-menu {\n  flex-shrink: 0;\n}\n\n.ActionBar--small {\n  min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n  min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n  height: calc(var(--control-medium-size) / 2);\n  margin: 0 var(--controlStack-medium-gap-condensed);\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n}\n\n.ActionBar--small .ActionBar-divider {\n  margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n  margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}
+{"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WAIE,kBAAmB,CAGnB,kBAAuB,CALvB,sBAAwB,CAGxB,WAAY,CACZ,aAAc,CAGd,wBAAyB,CANzB,iDAA+C,CAK/C,eAAgB,CAPhB,iBASF,CAEA,0BACE,kBAAuB,CAEvB,sCAAkC,CADlC,eAEF,CAEA,gBAEE,UAAW,CADX,iBAEF,CAEA,qBACE,UACF,CAEA,kBACE,mDACF,CAEA,kBACE,kDACF,CAIA,mBAGE,8GAAmE,CAGnE,UAAW,CAFX,UAAW,CAHX,8CAA4C,CAC5C,uDAAkD,CAGlD,OAAQ,CAER,0BACF,CAEA,qCACE,sDACF,CAEA,qCACE,sDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar  */\n.ActionBar {\n  position: relative;\n  display: flex !important;\n  min-width: calc(var(--control-medium-size) * 3);\n  align-items: center;\n  flex-grow: 1;\n  flex-shrink: 1;\n  box-sizing: content-box;\n  overflow: hidden;\n  justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n  box-sizing: content-box;\n  overflow: hidden;\n  height: var(--control-medium-size);\n}\n\n.ActionBar-item {\n  position: relative;\n  float: left;\n}\n\n.ActionBar-more-menu {\n  float: left;\n}\n\n.ActionBar--small {\n  min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n  min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n  height: calc(var(--control-medium-size) / 2);\n  margin: 0 var(--controlStack-medium-gap-condensed);\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  float: left;\n  top: 50%;\n  bottom: 50%;\n  transform: translateY(-50%);\n}\n\n.ActionBar--small .ActionBar-divider {\n  margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n  margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}

data/app/components/primer/alpha/action_bar.pcss

@@ -12,20 +12,18 @@
 }
 
 .ActionBar-item-container {
-  display: flex;
   box-sizing: content-box;
-  align-items: center;
-  flex-shrink: 0;
-  flex-grow: 0;
+  overflow: hidden;
+  height: var(--control-medium-size);
 }
 
 .ActionBar-item {
   position: relative;
-  flex-shrink: 0;
+  float: left;
 }
 
 .ActionBar-more-menu {
-  flex-shrink: 0;
+  float: left;
 }
 
 .ActionBar--small {
@@ -42,6 +40,10 @@
   height: calc(var(--control-medium-size) / 2);
   margin: 0 var(--controlStack-medium-gap-condensed);
   border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
+  float: left;
+  top: 50%;
+  bottom: 50%;
+  transform: translateY(-50%);
 }
 
 .ActionBar--small .ActionBar-divider {

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

@@ -1,12 +1,13 @@
+import { ActionMenuElement } from './action_menu/action_menu_element';
 declare class ActionBarElement extends HTMLElement {
     #private;
     items: HTMLElement[];
     itemContainer: HTMLElement;
-    moreMenu: HTMLElement;
+    moreMenu: ActionMenuElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     menuItemClick(event: Event): void;
-    update(rect?: DOMRect): void;
+    update(): void;
 }
 declare global {
     interface Window {

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

@@ -4,18 +4,18 @@ 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 __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_isVisible, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
+var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get, _ActionBarElement_eachItem;
 import { controller, targets, target } from '@github/catalyst';
 import { focusZone, FocusKeys } from '@primer/behaviors';
 const instersectionObserver = new IntersectionObserver(entries => {
@@ -30,35 +30,43 @@ const resizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
         const action = entry.target;
         if (action instanceof ActionBarElement) {
-            action.update(entry.contentRect);
+            action.update();
         }
     }
 });
+// These are definitely used, but eslint is dumb apparently
+// eslint-disable-next-line no-unused-vars
+var ItemType;
+(function (ItemType) {
+    // eslint-disable-next-line no-unused-vars
+    ItemType[ItemType["Item"] = 0] = "Item";
+    // eslint-disable-next-line no-unused-vars
+    ItemType[ItemType["Divider"] = 1] = "Divider";
+})(ItemType || (ItemType = {}));
 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");
+        var _a, _b;
         // 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);
+            const marginLeft = parseInt((_a = window.getComputedStyle(item)) === null || _a === void 0 ? void 0 : _a.marginLeft, 10);
+            const marginRight = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginRight, 10);
             item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
         }
         resizeObserver.observe(this);
         instersectionObserver.observe(this);
-        setTimeout(() => {
+        requestAnimationFrame(() => {
+            // This overflow visible is needed for browsers that don't support PopoverElement
+            // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
+            // once popover is fully supported we can remove this.style.overflow = 'visible'
             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);
@@ -72,21 +80,37 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
             (_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';
-        }
+    update() {
+        const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
+        if (!firstItem)
+            return;
+        const firstItemTop = firstItem.getBoundingClientRect().top;
+        let previousItemType = null;
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, index, type) => {
+            const itemTop = item.getBoundingClientRect().top;
+            if (type === ItemType.Item) {
+                if (itemTop > firstItemTop) {
+                    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
+                    if (this.moreMenu.hidden) {
+                        this.moreMenu.hidden = false;
+                    }
+                    if (previousItemType === ItemType.Divider) {
+                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index - 1);
+                    }
+                }
+                else {
+                    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
+                    if (index === this.items.length - 1) {
+                        this.moreMenu.hidden = true;
+                    }
+                    if (previousItemType === ItemType.Divider) {
+                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index - 1);
+                    }
+                }
+            }
+            previousItemType = type;
+            return true;
+        });
         if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
             __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
         }
@@ -94,88 +118,47 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
             bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
             focusOutBehavior: 'wrap',
             focusableElementFilter: element => {
-                return __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_isVisible).call(this, element);
-            }
+                const idx = this.items.indexOf(element.parentElement);
+                const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
+                const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
+                return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
+            },
         }), "f");
     }
 };
-_ActionBarElement_initialBarWidth = new WeakMap();
-_ActionBarElement_previousBarWidth = new WeakMap();
 _ActionBarElement_focusZoneAbortController = new WeakMap();
 _ActionBarElement_instances = new WeakSet();
-_ActionBarElement_isVisible = function _ActionBarElement_isVisible(element) {
-    // Safari doesn't support `checkVisibility` yet.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (typeof element.checkVisibility === 'function')
-        return element.checkVisibility();
-    return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight);
-};
-_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);
+_ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
+    let foundItem = null;
+    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, _index, type) => {
+        if (type === ItemType.Item) {
+            foundItem = item;
+            return false;
         }
-        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;
-    }
+        return true;
+    });
+    return foundItem;
 };
 _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
-    this.items[index].hidden = false;
+    this.items[index].style.setProperty('visibility', 'visible');
     __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
 };
 _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
-    this.items[index].hidden = true;
+    this.items[index].style.setProperty('visibility', 'hidden');
     __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');
 };
+_ActionBarElement_eachItem = function _ActionBarElement_eachItem(callback) {
+    for (let i = 0; i < this.items.length; i++) {
+        const item = this.items[i];
+        const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item;
+        if (!callback(item, i, type)) {
+            break;
+        }
+    }
+};
 __decorate([
     targets
 ], ActionBarElement.prototype, "items", void 0);

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

@@ -1,5 +1,6 @@
 import {controller, targets, target} from '@github/catalyst'
 import {focusZone, FocusKeys} from '@primer/behaviors'
+import {ActionMenuElement} from './action_menu/action_menu_element'
 
 const instersectionObserver = new IntersectionObserver(entries => {
   for (const entry of entries) {
@@ -14,25 +15,30 @@ const resizeObserver = new ResizeObserver(entries => {
   for (const entry of entries) {
     const action = entry.target
     if (action instanceof ActionBarElement) {
-      action.update(entry.contentRect)
+      action.update()
     }
   }
 })
 
+// These are definitely used, but eslint is dumb apparently
+
+// eslint-disable-next-line no-unused-vars
+enum ItemType {
+  // eslint-disable-next-line no-unused-vars
+  Item,
+  // eslint-disable-next-line no-unused-vars
+  Divider,
+}
+
 @controller
 class ActionBarElement extends HTMLElement {
   @targets items: HTMLElement[]
   @target itemContainer: HTMLElement
-  @target moreMenu: HTMLElement
+  @target moreMenu: ActionMenuElement
 
-  #initialBarWidth: number
-  #previousBarWidth: number
   #focusZoneAbortController: AbortController | null = null
 
   connectedCallback() {
-    this.#previousBarWidth = this.offsetWidth ?? Infinity
-    this.#initialBarWidth = this.itemContainer.offsetWidth ?? Infinity
-
     // Calculate the width of all the items before hiding anything
     for (const item of this.items) {
       const width = item.getBoundingClientRect().width
@@ -44,10 +50,13 @@ class ActionBarElement extends HTMLElement {
     resizeObserver.observe(this)
     instersectionObserver.observe(this)
 
-    setTimeout(() => {
+    requestAnimationFrame(() => {
+      // This overflow visible is needed for browsers that don't support PopoverElement
+      // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
+      // once popover is fully supported we can remove this.style.overflow = 'visible'
       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() {
@@ -65,114 +74,100 @@ class ActionBarElement extends HTMLElement {
     }
   }
 
-  update(rect: DOMRect = this.getBoundingClientRect()) {
-    // Only recalculate if the bar width changed
-    if (rect.width <= this.#previousBarWidth || this.#previousBarWidth === 0) {
-      this.#shrink()
-    } else if (rect.width > this.#previousBarWidth) {
-      this.#grow()
-    }
-    this.#previousBarWidth = rect.width
+  update() {
+    const firstItem = this.#firstItem
+    if (!firstItem) return
+
+    const firstItemTop = firstItem.getBoundingClientRect().top
+    let previousItemType: ItemType | null = null
+
+    this.#eachItem((item: HTMLElement, index: number, type: ItemType): boolean => {
+      const itemTop = item.getBoundingClientRect().top
+
+      if (type === ItemType.Item) {
+        if (itemTop > firstItemTop) {
+          this.#hideItem(index)
+
+          if (this.moreMenu.hidden) {
+            this.moreMenu.hidden = false
+          }
+
+          if (previousItemType === ItemType.Divider) {
+            this.#hideItem(index - 1)
+          }
+        } else {
+          this.#showItem(index)
+
+          if (index === this.items.length - 1) {
+            this.moreMenu.hidden = true
+          }
+
+          if (previousItemType === ItemType.Divider) {
+            this.#showItem(index - 1)
+          }
+        }
+      }
+
+      previousItemType = type
+
+      return true
+    })
 
-    if (rect.width <= this.#initialBarWidth) {
-      this.style.justifyContent = 'space-between'
-    } else {
-      this.style.justifyContent = 'flex-end'
-    }
     if (this.#focusZoneAbortController) {
       this.#focusZoneAbortController.abort()
     }
+
     this.#focusZoneAbortController = focusZone(this, {
       bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
       focusOutBehavior: 'wrap',
       focusableElementFilter: element => {
-        return this.#isVisible(element)
-      }
+        const idx = this.items.indexOf(element.parentElement!)
+        const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible'
+        const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden
+        return elementIsVisibleItem || elementIsVisibleActionMenuInvoker
+      },
     })
   }
 
-  #isVisible(element: HTMLElement): boolean {
-    // Safari doesn't support `checkVisibility` yet.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (typeof element.checkVisibility === 'function') return element.checkVisibility()
+  get #firstItem(): HTMLElement | null {
+    let foundItem = null
 
-    return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)
-  }
-
-  #itemGap(): number {
-    return parseInt(window.getComputedStyle(this.itemContainer)?.columnGap, 10) || 0
-  }
-
-  #availableSpace(): number {
-    // Get the offset of the item container from the container edge
-    return this.offsetWidth - this.itemContainer.offsetWidth
-  }
-
-  #menuSpace(): number {
-    if (this.moreMenu.hidden) {
-      return 0
-    }
-    return this.moreMenu.offsetWidth + this.#itemGap()
-  }
-
-  #shrink() {
-    if (this.items[0]!.hidden) {
-      return
-    }
-
-    let index = this.items.length - 1
-    for (const item of this.items.reverse()) {
-      if (!item.hidden && this.#availableSpace() < this.#menuSpace()) {
-        this.#hideItem(index)
-      } else if (this.#availableSpace() >= this.#menuSpace()) {
-        return
+    this.#eachItem((item: HTMLElement, _index: number, type: ItemType): boolean => {
+      if (type === ItemType.Item) {
+        foundItem = item
+        return false
       }
-      index--
-    }
-  }
-
-  #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 (this.#availableSpace() >= this.#menuSpace() + offsetWidth || index === this.items.length - 1) {
-          this.#showItem(index)
-        } else {
-          return
-        }
-      }
-      index++
-    }
+      return true
+    })
 
-    if (!this.items[this.items.length - 1]!.hidden) {
-      this.moreMenu.hidden = true
-    }
+    return foundItem
   }
 
   #showItem(index: number) {
-    this.items[index]!.hidden = false
+    this.items[index].style.setProperty('visibility', 'visible')
     this.#menuItems[index]!.hidden = true
   }
 
   #hideItem(index: number) {
-    this.items[index]!.hidden = true
+    this.items[index].style.setProperty('visibility', 'hidden')
     this.#menuItems[index]!.hidden = false
-
-    if (this.moreMenu.hidden) {
-      this.moreMenu.hidden = false
-    }
   }
 
   get #menuItems(): NodeListOf<HTMLElement> {
     return this.moreMenu.querySelectorAll('[role="menu"] > li')
   }
+
+  // eslint-disable-next-line no-unused-vars
+  #eachItem(callback: (item: HTMLElement, index: number, type: ItemType) => boolean): void {
+    for (let i = 0; i < this.items.length; i++) {
+      const item = this.items[i]
+      const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item
+      if (!callback(item, i, type)) {
+        break
+      }
+    }
+  }
 }
 
 declare global {

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

@@ -128,7 +128,7 @@ module Primer
         # @private
         renders_one :private_content
 
-        attr_reader :id, :list, :href, :active, :disabled, :parent
+        attr_reader :id, :item_id, :list, :href, :active, :disabled, :parent
 
         # Whether or not this item is active.
         #
@@ -143,6 +143,7 @@ module Primer
         # @param list [Primer::Alpha::ActionList] The list that contains this item. Used internally.
         # @param parent [Primer::Alpha::ActionList::Item] This item's parent item. `nil` if this item is at the root. Used internally.
         # @param label [String] Item label. If no label is provided, content is used.
+        # @param item_id [String] An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript.
         # @param label_classes [String] CSS classes that will be added to the label.
         # @param label_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the label.
         # @param content_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the item's anchor or button tag.
@@ -161,6 +162,7 @@ module Primer
         def initialize(
           list:,
           label: nil,
+          item_id: nil,
           label_classes: nil,
           label_arguments: {},
           content_arguments: {},
@@ -181,6 +183,7 @@ module Primer
           @list = list
           @parent = parent
           @label = label
+          @item_id = item_id
           @href = href || content_arguments[:href]
           @truncate_label = truncate_label
           @disabled = disabled
@@ -206,6 +209,15 @@ module Primer
           @system_arguments[:data] ||= {}
           @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
 
+          @system_arguments[:data] = merge_data(
+            @system_arguments, {
+              data: {
+                targets: "#{list_class.custom_element_name}.items",
+                **(@item_id ? { item_id: @item_id } : {})
+              }
+            }
+          )
+
           @label_arguments = {
             **label_arguments,
             classes: class_names(