@txstate-mws/svelte-components 1.6.1 → 1.6.3

package/dist/actions/glue.js

@@ -4,16 +4,16 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
     let halign;
     let valign;
     const parent = el.offsetParent;
-    const formerMinHeight = parent.style.minHeight;
+    const formerMinHeight = parent?.style.minHeight;
     if (target)
         el.style.position = 'fixed';
     function adjustParentHeight() {
         if (!adjustparentheight)
             return;
-        if (parent.style.overflowY === 'auto')
+        if (parent?.style.overflowY === 'auto')
             return;
         const minHeight = el.offsetTop + el.offsetHeight;
-        if (minHeight > parent.clientHeight) {
+        if (minHeight > (parent?.clientHeight ?? 0)) {
             requestAnimationFrame(() => {
                 parent.style.minHeight = String(minHeight) + 'px';
             });
@@ -21,8 +21,14 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
     }
     let lastrect;
     function reposition() {
+        const fixedParent = fixedContainingBlock(el);
+        let fixedRect = { left: 0, top: 0, right: 0, bottom: 0 };
+        if (fixedParent) {
+            const tmpRect = fixedParent.getBoundingClientRect();
+            fixedRect = { left: tmpRect.left, right: window.innerWidth - tmpRect.right, top: tmpRect.top, bottom: window.innerHeight - tmpRect.bottom };
+        }
         const tmpRect = target.getBoundingClientRect();
-        const rect = { left: tmpRect.left, right: window.innerWidth - tmpRect.right, top: tmpRect.top, bottom: window.innerHeight - tmpRect.bottom, width: tmpRect.width, height: tmpRect.height };
+        const rect = { left: tmpRect.left - fixedRect.left, right: window.innerWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: window.innerHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
         if (equal(rect, lastrect))
             return;
         let autoalign = align;
@@ -109,3 +115,26 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
     };
 }
+const isHTMLElement = (e) => !!e && 'offsetParent' in e;
+function isFixedContainer(el) {
+    const css = getComputedStyle(el);
+    if (css.getPropertyValue('transform') !== 'none' || css.getPropertyValue('perspective') !== 'none')
+        return true; // A transform or perspective value other than none
+    if (['transform', 'perspective', 'filter'].includes(css.getPropertyValue('will-change')))
+        return true; // A will-change value of transform, filter, or perspective
+    if (css.getPropertyValue('filter') !== 'none')
+        return true; // A filter value other than none
+    if (['layout', 'paint', 'strict', 'content'].includes(css.getPropertyValue('contain')))
+        return true; // A contain value of layout, paint, strict or content (e.g. contain: paint;)
+    if (css.getPropertyValue('container-type') !== 'normal')
+        return true; // A container-type value other than normal
+    if (css.getPropertyValue('backdrop-filter') !== 'none')
+        return true; // A backdrop-filter other than none (e.g. backdrop-filter: blur(10px);)
+    return false;
+}
+function fixedContainingBlock(el) {
+    let parent = el.parentElement;
+    while (isHTMLElement(parent) && !isFixedContainer(parent))
+        parent = parent.parentElement;
+    return parent;
+}

package/dist/components/MultiSelect.svelte

@@ -81,7 +81,7 @@ function addSelection(e) {
     const opt = { ...e.detail, label: e.detail.label || e.detail.value };
     selected = maxSelections === 1 ? [opt] : [...selected, opt];
     popupvalue = undefined;
-    announcement = `${maxSelections === 1 ? 'selected' : 'added'} ${opt.value}`;
+    announcement = `${maxSelections === 1 ? 'selected' : 'added'} ${opt.label}`;
     dispatch('change', selected);
 }
 function removeSelection(opt, idx, nextfocus = 1) {
@@ -91,7 +91,7 @@ function removeSelection(opt, idx, nextfocus = 1) {
     selected = selected.filter(s => s.value !== opt.value);
     if (document.activeElement !== inputelement)
         inputelement.focus();
-    announcement = `removed ${opt.value}`;
+    announcement = `removed ${opt.label ?? opt.value}`;
     dispatch('change', selected);
 }
 function inputkeydown(e) {

package/dist/components/PopupMenu.svelte

@@ -281,7 +281,7 @@ $: hasSelected = showSelected && !hideSelectedIndicator && items.some(itm => 'va
   <div use:portal={usePortal === true ? undefined : (usePortal || null)}
        use:glue={{ target: buttonelement, align, cover, gap, adjustparentheight, store: computedalign }}
        class={menuContainerClass}>
-    <ul bind:this={menuelement} id={menuid} role={usemenurole ? 'menu' : 'listbox'} style={width ? `width: ${width}` : ''}
+    <ul bind:this={menuelement} id={menuid} role={usemenurole ? 'menu' : 'listbox'} tabindex="-1" style={width ? `width: ${width}` : ''}
         class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass}
         on:keydown={onkeydown}>
       {#each items as item, i ('value' in item ? item.value : `popupmenu_divider_${i}`)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",
@@ -34,7 +34,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "svelte": "^3.53.1 || ^4.0.0"
+    "svelte": "^3.53.1 || ^4.0.0 || ^5.0.0"
   },
   "type": "module",
   "main": "./dist/index.js",