@primer/view-components 0.36.1 → 0.36.2-rc.a45e0a1b

package/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -1,5 +1,6 @@
 import '@oddbird/popover-polyfill';
 import type { IncludeFragmentElement } from '@github/include-fragment-element';
+import AnchoredPositionElement from '../../anchored_position';
 type SelectVariant = 'none' | 'single' | 'multiple' | null;
 type SelectedItem = {
     label: string | null | undefined;
@@ -9,6 +10,7 @@ type SelectedItem = {
 export declare class ActionMenuElement extends HTMLElement {
     #private;
     includeFragment: IncludeFragmentElement;
+    overlay: AnchoredPositionElement;
     get selectVariant(): SelectVariant;
     set selectVariant(variant: SelectVariant);
     get dynamicLabelPrefix(): string;

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

@@ -15,9 +15,10 @@ 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 _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_intersectionObserver, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
+import { observeMutationsUntilConditionMet } from '../../utils';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`);
 let ActionMenuElement = class ActionMenuElement extends HTMLElement {
@@ -28,6 +29,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         _ActionMenuElement_originalLabel.set(this, '');
         _ActionMenuElement_inputName.set(this, '');
         _ActionMenuElement_invokerBeingClicked.set(this, false);
+        _ActionMenuElement_intersectionObserver.set(this, void 0);
     }
     get selectVariant() {
         return this.getAttribute('data-select-variant');
@@ -103,6 +105,30 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                 signal,
             });
         }
+        // The code below updates the menu (i.e. overlay) position whenever the invoker button
+        // changes position within its scroll container.
+        //
+        // See: https://github.com/primer/view_components/issues/3175
+        const scrollUpdater = () => {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+                this.overlay?.update();
+            }
+        };
+        __classPrivateFieldSet(this, _ActionMenuElement_intersectionObserver, new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const elem = entry.target;
+                if (elem === this.invokerElement) {
+                    if (entry.isIntersecting) {
+                        // eslint-disable-next-line github/prefer-observers
+                        window.addEventListener('scroll', scrollUpdater, { capture: true });
+                    }
+                    else {
+                        window.removeEventListener('scroll', scrollUpdater, { capture: true });
+                    }
+                }
+            }
+        }), "f");
+        observeMutationsUntilConditionMet(this, () => Boolean(this.invokerElement), () => __classPrivateFieldGet(this, _ActionMenuElement_intersectionObserver, "f").observe(this.invokerElement));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
@@ -240,6 +266,7 @@ _ActionMenuElement_abortController = new WeakMap();
 _ActionMenuElement_originalLabel = new WeakMap();
 _ActionMenuElement_inputName = new WeakMap();
 _ActionMenuElement_invokerBeingClicked = new WeakMap();
+_ActionMenuElement_intersectionObserver = new WeakMap();
 _ActionMenuElement_instances = new WeakSet();
 _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
     const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
@@ -443,6 +470,9 @@ _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
 __decorate([
     target
 ], ActionMenuElement.prototype, "includeFragment", void 0);
+__decorate([
+    target
+], ActionMenuElement.prototype, "overlay", void 0);
 ActionMenuElement = __decorate([
     controller
 ], ActionMenuElement);

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

@@ -15,12 +15,13 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
+var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
 import { getAnchoredPosition } from '@primer/behaviors';
 import { controller, target } from '@github/catalyst';
 import { IncludeFragmentElement } from '@github/include-fragment-element';
 import '@primer/live-region-element';
 import '@oddbird/popover-polyfill';
+import { observeMutationsUntilConditionMet } from '../utils';
 const validSelectors = ['[role="option"]'];
 const menuItemSelectors = validSelectors.join(',');
 const visibleMenuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(',');
@@ -172,11 +173,11 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_softDisableItems).call(this);
         updateWhenVisible(this);
-        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.remoteInput), () => {
+        observeMutationsUntilConditionMet(this, () => Boolean(this.remoteInput), () => {
             this.remoteInput.addEventListener('loadstart', this, { signal });
             this.remoteInput.addEventListener('loadend', this, { signal });
         });
-        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.includeFragment), () => {
+        observeMutationsUntilConditionMet(this, () => Boolean(this.includeFragment), () => {
             this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
             this.includeFragment.addEventListener('error', this, { signal });
             this.includeFragment.addEventListener('loadend', this, { signal });
@@ -201,7 +202,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
                 }
             }
         }), "f");
-        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
+        observeMutationsUntilConditionMet(this, () => Boolean(this.dialog), () => {
             __classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
             this.dialog.addEventListener('close', this, { signal });
             if (this.getAttribute('data-open-on-load') === 'true') {
@@ -209,7 +210,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             }
         });
         if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
-            __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => this.items.length > 0, () => {
+            observeMutationsUntilConditionMet(this, () => this.items.length > 0, () => {
                 __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
                 __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
             });
@@ -399,20 +400,6 @@ _SelectPanelElement_loadingDelayTimeoutId = new WeakMap();
 _SelectPanelElement_loadingAnnouncementTimeoutId = new WeakMap();
 _SelectPanelElement_hasLoadedData = new WeakMap();
 _SelectPanelElement_instances = new WeakSet();
-_SelectPanelElement_waitForCondition = function _SelectPanelElement_waitForCondition(condition, body) {
-    if (condition()) {
-        body();
-    }
-    else {
-        const mutationObserver = new MutationObserver(() => {
-            if (condition()) {
-                body();
-                mutationObserver.disconnect();
-            }
-        });
-        mutationObserver.observe(this, { childList: true, subtree: true });
-    }
-};
 _SelectPanelElement_softDisableItems = function _SelectPanelElement_softDisableItems() {
     const { signal } = __classPrivateFieldGet(this, _SelectPanelElement_abortController, "f");
     for (const item of this.querySelectorAll(validSelectors.join(','))) {

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

@@ -8,6 +8,7 @@ import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
 import './shared_events';
+import './utils';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';

package/app/components/primer/primer.js

@@ -8,6 +8,7 @@ import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
 import './shared_events';
+import './utils';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';

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

@@ -0,0 +1 @@
+export declare const observeMutationsUntilConditionMet: (element: Element, condition: () => boolean, body: () => void) => void;

package/app/components/primer/utils.js

@@ -0,0 +1,16 @@
+// Waits for condition to return true. If it returns false initially, this function creates a
+// MutationObserver that calls body() whenever the contents of the component change.
+export const observeMutationsUntilConditionMet = (element, condition, body) => {
+    if (condition()) {
+        body();
+    }
+    else {
+        const mutationObserver = new MutationObserver(() => {
+            if (condition()) {
+                body();
+                mutationObserver.disconnect();
+            }
+        });
+        mutationObserver.observe(element, { childList: true, subtree: true });
+    }
+};

package/package.json

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