@txstate-mws/svelte-components 1.5.1 → 1.5.2

package/dist/components/PopupMenu.svelte

@@ -7,7 +7,7 @@ import { isNotBlank, randomid } from 'txstate-utils';
 import { Store } from '@txstate-mws/svelte-store';
 import { glue, portal } from '../actions';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
-import { modifierKey } from '../util';
+import { getScrollParents, modifierKey } from '../util';
 const dispatch = createEventDispatcher();
 /** The DOM element that will act as the "button" for this menu. The menu will be placed next to the
 button and be controlled by the button. Keyboard access will be enabled when the button has focus.
@@ -201,6 +201,9 @@ async function onblur(e) {
     }
 }
 function cleanup(element) {
+    for (const observer of observers)
+        observer.disconnect();
+    observers = [];
     if (element) {
         element.removeEventListener('click', onbuttonclick);
         element.removeEventListener('keydown', onkeydown);
@@ -215,6 +218,7 @@ function cleanup(element) {
 onDestroy(() => cleanup(buttonelement));
 // if buttonelement changes we need to handle listeners and aria
 let lastbuttonelement;
+let observers = [];
 function reactToButtonElement(buttonelement) {
     cleanup(lastbuttonelement);
     lastbuttonelement = buttonelement;
@@ -223,6 +227,17 @@ function reactToButtonElement(buttonelement) {
         buttonelement.addEventListener('click', onbuttonclick);
         buttonelement.addEventListener('keydown', onkeydown);
         buttonelement.addEventListener('blur', onblur);
+        const parents = getScrollParents(buttonelement);
+        for (const parent of [...parents, undefined]) {
+            const observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    if (entry.intersectionRatio < 1)
+                        menushown = false;
+                }
+            }, { root: parent, threshold: 1 });
+            observer.observe(buttonelement);
+            observers.push(observer);
+        }
     }
 }
 $: reactToButtonElement(buttonelement);

package/dist/util/util.d.ts

@@ -2,3 +2,4 @@ export declare function classes(...classNames: (string | undefined)[]): string;
 export declare function debounced(fn: (..._: any[]) => any, timeout: number): (...args: any[]) => void;
 export declare function modifierKey(e: any): any;
 export declare function selectionIsLeft(ele: HTMLInputElement | HTMLTextAreaElement): boolean;
+export declare function getScrollParents(element: HTMLElement): any;

package/dist/util/util.js

@@ -14,3 +14,18 @@ export function modifierKey(e) {
 export function selectionIsLeft(ele) {
     return ele.selectionStart === 0 && ele.selectionEnd === 0;
 }
+export function getScrollParents(element) {
+    let style = getComputedStyle(element);
+    const excludeStaticParent = style.position === 'absolute';
+    if (style.position === 'fixed')
+        return [document.body];
+    for (let parent = element; (parent = parent.parentElement);) {
+        style = getComputedStyle(parent);
+        if (excludeStaticParent && style.position === 'static') {
+            continue;
+        }
+        if (/(auto|scroll|hidden)/.test(style.overflow + style.overflowY + style.overflowX))
+            return [parent, ...getScrollParents(parent)];
+    }
+    return [document.body];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",