@primer/view-components 0.11.0-rc.e3faa6d9 → 0.11.0

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

@@ -90,11 +90,11 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
         if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
             __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
         }
-        __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this.itemContainer, {
+        __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
             bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
             focusOutBehavior: 'wrap',
             focusableElementFilter: element => {
-                return !element.closest('.ActionBar-item[hidden]');
+                return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem');
             }
         }), "f");
     }

package/app/components/primer/focus_group.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
+var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
@@ -19,6 +19,7 @@ export default class FocusGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _FocusGroupElement_instances.add(this);
+        _FocusGroupElement_retainSignal.set(this, null);
         _FocusGroupElement_abortController.set(this, null);
     }
     get nowrap() {
@@ -57,11 +58,35 @@ export default class FocusGroupElement extends HTMLElement {
         (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
     handleEvent(event) {
+        var _a;
         const { direction, nowrap } = this;
         if (event.type === 'focusin') {
             if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                const { signal } = (__classPrivateFieldSet(this, _FocusGroupElement_retainSignal, new AbortController(), "f"));
                 for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
                     item.setAttribute('tabindex', item === event.target ? '0' : '-1');
+                    const popover = event.target.closest('[popover]');
+                    if (item === event.target && (popover === null || popover === void 0 ? void 0 : popover.popover) === 'auto' && popover.closest('focus-group') === this) {
+                        popover.addEventListener('toggle', (toggleEvent) => {
+                            var _a, _b;
+                            if (!(toggleEvent.target instanceof Element))
+                                return;
+                            if (toggleEvent.newState === 'closed') {
+                                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                                item.setAttribute('tabindex', '-1');
+                                if (popover.id) {
+                                    const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
+                                    if (invoker) {
+                                        invoker.setAttribute('tabindex', '0');
+                                    }
+                                    else {
+                                        (_b = __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+                                    }
+                                }
+                            }
+                        }, { signal });
+                    }
                 }
             }
         }
@@ -121,7 +146,7 @@ export default class FocusGroupElement extends HTMLElement {
                 let el = focusEl;
                 do {
                     el = el.closest(`[popover]:not(:popover-open)`);
-                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
+                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
                         el.showPopover();
                     }
                     el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
@@ -131,7 +156,7 @@ export default class FocusGroupElement extends HTMLElement {
         }
     }
 }
-_FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
+_FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
     return this.querySelectorAll(menuItemSelector);
 };
 if (!customElements.get('focus-group')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.11.0-rc.e3faa6d9",
+  "version": "0.11.0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/arguments.json

@@ -46,7 +46,18 @@
     "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": [
-
+      {
+        "name": "item_content",
+        "type": "String",
+        "default": "N/A",
+        "description": "The content to render inside the item."
+      },
+      {
+        "name": "item_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
     ]
   },
   {

package/static/info_arch.json

@@ -139,7 +139,18 @@
         "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": [
-
+          {
+            "name": "item_content",
+            "type": "String",
+            "default": "N/A",
+            "description": "The content to render inside the item."
+          },
+          {
+            "name": "item_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
         ],
         "slots": [