@primer/view-components 0.18.2-rc.fe99b203 → 0.19.0-rc.1ce8b774

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

@@ -50,12 +50,11 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
         _ActionBarElement_focusZoneAbortController.set(this, null);
     }
     connectedCallback() {
-        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((_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);
+            const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10);
+            const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10);
             item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
         }
         resizeObserver.observe(this);
@@ -73,11 +72,10 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
         instersectionObserver.unobserve(this);
     }
     menuItemClick(event) {
-        var _a;
         const currentTarget = event.currentTarget;
-        const id = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.getAttribute('data-for');
+        const id = currentTarget?.getAttribute('data-for');
         if (id) {
-            (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
+            document.getElementById(id)?.click();
         }
     }
     update() {
@@ -140,12 +138,20 @@ _ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
     return foundItem;
 };
 _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
-    this.items[index].style.setProperty('visibility', 'visible');
-    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
+    const item = this.items[index];
+    const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
+    if (!item || !menuItem)
+        return;
+    item.style.setProperty('visibility', 'visible');
+    menuItem.hidden = true;
 };
 _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
-    this.items[index].style.setProperty('visibility', 'hidden');
-    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = false;
+    const item = this.items[index];
+    const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
+    if (!item || !menuItem)
+        return;
+    item.style.setProperty('visibility', 'hidden');
+    menuItem.hidden = false;
 };
 _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
     return this.moreMenu.querySelectorAll('[role="menu"] > li');

package/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -56,12 +56,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         this.toggleAttribute('data-dynamic-label', value);
     }
     get popoverElement() {
-        var _a;
-        return ((_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.popoverTargetElement) || null;
+        return this.invokerElement?.popoverTargetElement || null;
     }
     get invokerElement() {
-        var _a;
-        const id = (_a = this.querySelector('[role=menu]')) === null || _a === void 0 ? void 0 : _a.id;
+        const id = this.querySelector('[role=menu]')?.id;
         if (!id)
             return null;
         for (const el of this.querySelectorAll(`[aria-controls]`)) {
@@ -82,22 +80,21 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         for (const selectedItem of selectedItems) {
             const labelEl = selectedItem.querySelector('.ActionListItem-label');
             results.push({
-                label: labelEl === null || labelEl === void 0 ? void 0 : labelEl.textContent,
-                value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getAttribute('data-value'),
+                label: labelEl?.textContent,
+                value: selectedItem?.getAttribute('data-value'),
                 element: selectedItem,
             });
         }
         return results;
     }
     connectedCallback() {
-        var _a;
         const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
         this.addEventListener('keydown', this, { signal });
         this.addEventListener('click', this, { signal });
         this.addEventListener('mouseover', this, { signal });
         this.addEventListener('focusout', this, { signal });
         this.addEventListener('mousedown', this, { signal });
-        (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this, { signal });
+        this.popoverElement?.addEventListener('toggle', this, { signal });
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
@@ -111,11 +108,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a, _b, _c;
-        const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+        const targetIsInvoker = this.invokerElement?.contains(event.target);
         const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
         if (event.type === 'toggle' && event.newState === 'open') {
-            (_b = __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) === null || _b === void 0 ? void 0 : _b.focus();
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
         }
         if (targetIsInvoker && event.type === 'mousedown') {
             __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
@@ -165,7 +161,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
                 event.preventDefault();
                 if (item.getAttribute('type') === 'submit') {
-                    (_c = item.closest('form')) === null || _c === void 0 ? void 0 : _c.submit();
+                    item.closest('form')?.submit();
                 }
             }
             return;
@@ -265,7 +261,9 @@ _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_p
         return false;
     if (item.getAttribute('aria-disabled')) {
         event.preventDefault();
+        /* eslint-disable-next-line no-restricted-syntax */
         event.stopPropagation();
+        /* eslint-disable-next-line no-restricted-syntax */
         event.stopImmediatePropagation();
         return true;
     }
@@ -294,6 +292,7 @@ _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event
 };
 _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
     event.preventDefault();
+    /* eslint-disable-next-line no-restricted-syntax */
     event.stopPropagation();
     if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
@@ -316,7 +315,7 @@ _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handl
         const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body;
         const focusInClosedMenu = this.contains(activeElement);
         if (lostFocus || focusInClosedMenu) {
-            setTimeout(() => { var _a; return (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+            setTimeout(() => this.invokerElement?.focus(), 0);
         }
     };
     // a modal <dialog> element will close all popovers
@@ -376,6 +375,7 @@ _ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event
         return;
     // otherwise, event will not result in activation by default, so we stop it and
     // simulate a click
+    /* eslint-disable-next-line no-restricted-syntax */
     event.stopPropagation();
     const elem = item;
     elem.click();
@@ -389,16 +389,13 @@ _ActionMenuElement_handleFocusOut = function _ActionMenuElement_handleFocusOut()
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
 };
 _ActionMenuElement_show = function _ActionMenuElement_show() {
-    var _a;
-    (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+    this.popoverElement?.showPopover();
 };
 _ActionMenuElement_hide = function _ActionMenuElement_hide() {
-    var _a;
-    (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover();
+    this.popoverElement?.hidePopover();
 };
 _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
-    var _a;
-    return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open');
+    return this.popoverElement?.matches(':popover-open');
 };
 _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
     if (!this.dynamicLabel)

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

@@ -14,18 +14,19 @@ import { focusTrap } from '@primer/behaviors';
 import { getFocusableChild } from '@primer/behaviors/utils';
 function focusIfNeeded(elem) {
     if (document.activeElement !== elem) {
-        elem === null || elem === void 0 ? void 0 : elem.focus();
+        elem?.focus();
     }
 }
 const overlayStack = [];
 function clickHandler(event) {
     const target = event.target;
-    const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    const button = target?.closest('button');
     if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
         return;
     // If the user is clicking a valid dialog trigger
-    let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
+    let dialogId = button?.getAttribute('data-show-dialog-id');
     if (dialogId) {
+        /* eslint-disable-next-line no-restricted-syntax */
         event.stopPropagation();
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof ModalDialogElement) {
@@ -63,7 +64,7 @@ function keydownHandler(event) {
 }
 function mousedownHandler(event) {
     const target = event.target;
-    if (target === null || target === void 0 ? void 0 : target.closest('button'))
+    if (target?.closest('button'))
         return;
     // Find the top level dialog that is open.
     const topLevelDialog = overlayStack[overlayStack.length - 1];
@@ -92,7 +93,6 @@ export class ModalDialogElement extends HTMLElement {
         return this.hasAttribute('open');
     }
     set open(value) {
-        var _a, _b, _c, _d;
         if (value) {
             if (this.open)
                 return;
@@ -100,7 +100,7 @@ export class ModalDialogElement extends HTMLElement {
             this.setAttribute('aria-disabled', 'false');
             document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
             document.body.style.overflow = 'hidden';
-            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.remove('Overlay--hidden');
             if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
                 __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
             }
@@ -112,13 +112,13 @@ export class ModalDialogElement extends HTMLElement {
                 return;
             this.removeAttribute('open');
             this.setAttribute('aria-disabled', 'true');
-            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)?.classList.add('Overlay--hidden');
             document.body.style.paddingRight = '0';
             document.body.style.overflow = 'initial';
             __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
             // if #openButton is a child of a menu, we need to focus a suitable child of the menu
             // element since it is expected for the menu to close on click
-            const menu = ((_c = this.openButton) === null || _c === void 0 ? void 0 : _c.closest('details')) || ((_d = this.openButton) === null || _d === void 0 ? void 0 : _d.closest('action-menu'));
+            const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu');
             if (menu) {
                 focusIfNeeded(getFocusableChild(menu));
             }
@@ -153,8 +153,7 @@ export class ModalDialogElement extends HTMLElement {
     }
 }
 _ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
-    var _a;
-    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-modal-dialog-overlay')) {
+    if (this.parentElement?.hasAttribute('data-modal-dialog-overlay')) {
         return this.parentElement;
     }
     return null;
@@ -169,11 +168,13 @@ _ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_in
         case 'Escape':
             this.close();
             event.preventDefault();
+            /* eslint-disable-next-line no-restricted-syntax */
             event.stopPropagation();
             break;
         case 'Enter': {
             const target = event.target;
             if (target.getAttribute('data-close-dialog-id') === this.id) {
+                /* eslint-disable-next-line no-restricted-syntax */
                 event.stopPropagation();
             }
             break;

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

@@ -20,13 +20,12 @@ let SegmentedControlElement = class SegmentedControlElement extends HTMLElement
         __classPrivateFieldGet(this, _SegmentedControlElement_instances, "m", _SegmentedControlElement_updateButtonLabels).call(this);
     }
     select(event) {
-        var _a, _b;
         const button = event.currentTarget;
         for (const item of this.items) {
             item.classList.remove('SegmentedControl-item--selected');
-            (_a = item.querySelector('[aria-current]')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-current', 'false');
+            item.querySelector('[aria-current]')?.setAttribute('aria-current', 'false');
         }
-        (_b = button.closest('li.SegmentedControl-item')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
+        button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected');
         button.setAttribute('aria-current', 'true');
     }
 };

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

@@ -134,9 +134,9 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
                 credentials: 'same-origin',
                 method: 'POST',
                 headers: {
-                    'Requested-With': 'XMLHttpRequest'
+                    'Requested-With': 'XMLHttpRequest',
                 },
-                body
+                body,
             });
         }
         catch (error) {

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

@@ -19,12 +19,12 @@ const isPopoverOpen = (() => {
             selector = ':popover-open';
             return el.matches(selector);
         }
-        catch (_a) {
+        catch {
             try {
                 selector = ':open';
                 return el.matches(':open');
             }
-            catch (_b) {
+            catch {
                 selector = '.\\:popover-open';
                 return el.matches('.\\:popover-open');
             }
@@ -253,7 +253,6 @@ class ToolTipElement extends HTMLElement {
         return !isPopoverOpen(this);
     }
     connectedCallback() {
-        var _a, _b;
         tooltips.add(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
@@ -268,7 +267,7 @@ class ToolTipElement extends HTMLElement {
         if (!this.control)
             return;
         this.setAttribute('role', 'tooltip');
-        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
         __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
         const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
         this.addEventListener('mouseleave', this, { signal });
@@ -279,7 +278,7 @@ class ToolTipElement extends HTMLElement {
         this.control.addEventListener('mousedown', this, { signal });
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore popoverTargetElement is not in the type definition
-        (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
+        this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
             signal,
         });
         this.ownerDocument.addEventListener('focusout', focusOutListener);
@@ -287,10 +286,9 @@ class ToolTipElement extends HTMLElement {
         this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
     }
     disconnectedCallback() {
-        var _a;
         tooltips.delete(this);
         openTooltips.delete(this);
-        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
     }
     async handleEvent(event) {
         if (!this.control)
@@ -310,6 +308,7 @@ class ToolTipElement extends HTMLElement {
         const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
         if (showing && isEscapeKeydown) {
+            /* eslint-disable-next-line no-restricted-syntax */
             event.stopImmediatePropagation();
             event.preventDefault();
         }

package/app/components/primer/beta/nav_list.js

@@ -47,21 +47,19 @@ let NavListElement = class NavListElement extends HTMLElement {
     }
     // expand collapsible item onClick
     expandItem(item) {
-        var _a;
-        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-hidden');
+        item.nextElementSibling?.removeAttribute('data-hidden');
         item.setAttribute('aria-expanded', 'true');
     }
     collapseItem(item) {
-        var _a;
-        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.setAttribute('data-hidden', '');
+        item.nextElementSibling?.setAttribute('data-hidden', '');
         item.setAttribute('aria-expanded', 'false');
         item.focus();
     }
     itemIsExpanded(item) {
-        if ((item === null || item === void 0 ? void 0 : item.tagName) === 'A') {
+        if (item?.tagName === 'A') {
             return true;
         }
-        return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-expanded')) === 'true';
+        return item?.getAttribute('aria-expanded') === 'true';
     }
     // expand/collapse item
     handleItemWithSubItemClick(e) {
@@ -77,6 +75,7 @@ let NavListElement = class NavListElement extends HTMLElement {
         else {
             this.expandItem(button);
         }
+        /* eslint-disable-next-line no-restricted-syntax */
         e.stopPropagation();
     }
     // collapse item
@@ -97,18 +96,18 @@ let NavListElement = class NavListElement extends HTMLElement {
         if (this.itemIsExpanded(button) && e.key === 'Escape') {
             this.collapseItem(button);
         }
+        /* eslint-disable-next-line no-restricted-syntax */
         e.stopPropagation();
     }
 };
 _NavListElement_instances = new WeakSet();
 _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
-    var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
         if (navItem.classList.contains('ActionListItem--hasSubItem')) {
             continue;
         }
-        const keys = ((_a = navItem.getAttribute('data-item-id')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        const keys = navItem.getAttribute('data-item-id')?.split(' ') || [];
         if (keys.includes(itemId)) {
             return navItem;
         }
@@ -152,10 +151,9 @@ _NavListElement_deselect = function _NavListElement_deselect(navItem) {
     }
 };
 _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
-    var _a;
     if (!navItem.classList.contains('ActionListItem--subItem'))
         return null;
-    const parent = (_a = navItem.closest('li.ActionListItem--hasSubItem')) === null || _a === void 0 ? void 0 : _a.querySelector('button.ActionListContent');
+    const parent = navItem.closest('li.ActionListItem--hasSubItem')?.querySelector('button.ActionListContent');
     if (parent) {
         return parent;
     }

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

@@ -44,7 +44,6 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
         return this.showMoreItem.getAttribute('src') || '';
     }
     async showMore(e) {
-        var _a, _b;
         e.preventDefault();
         if (this.showMoreDisabled)
             return;
@@ -69,11 +68,11 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
             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');
+        fragment?.querySelector('li > 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.focusMarkers.pop()?.focus();
         this.showMoreDisabled = false;
     }
     setShowMoreItemState() {

package/app/components/primer/dialog_helper.js

@@ -11,13 +11,12 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _DialogHelperElement_abortController;
 function dialogInvokerButtonHandler(event) {
-    var _a;
     const target = event.target;
-    const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    const button = target?.closest('button');
     if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
         return;
     // If the user is clicking a valid dialog trigger
-    let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
+    let dialogId = button?.getAttribute('data-show-dialog-id');
     if (dialogId) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
@@ -36,7 +35,7 @@ function dialogInvokerButtonHandler(event) {
             let node = button;
             let fixed = false;
             while (node) {
-                node = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]:not(:popover-open)');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
@@ -47,6 +46,7 @@ function dialogInvokerButtonHandler(event) {
             if (fixed) {
                 // We need to re-open the dialog as modal, and also ensure no close event listeners
                 // are trying to act on the close
+                /* eslint-disable-next-line no-restricted-syntax */
                 dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
                 dialog.close();
                 dialog.showModal();
@@ -92,14 +92,13 @@ export class DialogHelperElement extends HTMLElement {
         }).observe(this, { subtree: true, attributeFilter: ['open'] });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")?.abort();
     }
     handleEvent(event) {
         const target = event.target;
         const dialog = this.dialog;
         // The click target _must_ be the dialog element itself, and not elements underneath or inside.
-        if (target !== dialog || !(dialog === null || dialog === void 0 ? void 0 : dialog.open))
+        if (target !== dialog || !dialog?.open)
             return;
         const rect = dialog.getBoundingClientRect();
         const clickWasInsideDialog = rect.top <= event.clientY &&

package/app/components/primer/focus_group.js

@@ -13,7 +13,7 @@ var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupEl
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
-const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
+const getMnemonicFor = (item) => item.textContent?.trim()[0].toLowerCase();
 const printable = /^\S$/;
 class FocusGroupElement extends HTMLElement {
     constructor() {
@@ -54,26 +54,23 @@ class FocusGroupElement extends HTMLElement {
         this.addEventListener('focusin', this, { signal });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")?.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();
+                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.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) {
+                    if (item === event.target && 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();
+                                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.abort();
                                 item.setAttribute('tabindex', '-1');
                                 if (popover.id) {
                                     const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
@@ -81,7 +78,7 @@ class FocusGroupElement extends HTMLElement {
                                         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');
+                                        __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]?.setAttribute('tabindex', '0');
                                     }
                                 }
                             }
@@ -146,13 +143,13 @@ 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' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+                    if (el?.popover === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
                         el.showPopover();
                     }
-                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
+                    el = el?.parentElement || null;
                 } while (el);
             }
-            focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+            focusEl?.focus();
         }
     }
 }

package/lib/primer/forms/primer_multi_input.js

@@ -8,7 +8,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { controller, targets } from '@github/catalyst';
 let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
     activateField(name) {
-        var _a, _b;
         const fieldWithName = this.findField(name);
         if (!fieldWithName)
             return;
@@ -17,11 +16,11 @@ let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement
                 continue;
             field.setAttribute('disabled', 'disabled');
             field.setAttribute('hidden', 'hidden');
-            (_a = field.parentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'hidden');
+            field.parentElement?.setAttribute('hidden', 'hidden');
         }
         fieldWithName.removeAttribute('disabled');
         fieldWithName.removeAttribute('hidden');
-        (_b = fieldWithName.parentElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
+        fieldWithName.parentElement?.removeAttribute('hidden');
     }
     findField(name) {
         for (const field of this.fields) {

package/lib/primer/forms/primer_text_field.js

@@ -27,8 +27,7 @@ class PrimerTextFieldElement extends HTMLElement {
         _PrimerTextFieldElement_abortController.set(this, void 0);
     }
     connectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
         this.inputElement.addEventListener('auto-check-success', async (event) => {
             const message = await event.detail.response.text();
@@ -45,8 +44,7 @@ class PrimerTextFieldElement extends HTMLElement {
         }, { signal });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
     }
     clearContents() {
         this.inputElement.value = '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.18.2-rc.fe99b203",
+  "version": "0.19.0-rc.1ce8b774",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -51,7 +51,7 @@
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
-    "@oddbird/popover-polyfill": "^0.3.8",
+    "@oddbird/popover-polyfill": "^0.4.0",
     "@primer/behaviors": "^1.3.4"
   },
   "devDependencies": {
@@ -80,12 +80,12 @@
     "mocha": "^10.0.0",
     "playwright": "^1.35.1",
     "postcss": "^8.4.16",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
     "postcss-custom-properties-fallback": "^1.0.2",
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^16.1.0",