@txstate-mws/svelte-components 1.5.1 → 1.5.3

package/dist/actions/glue.d.ts

@@ -4,6 +4,7 @@ export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
     target: HTMLElement;
     align?: GlueAlignOpts;
     cover?: boolean;
+    gap?: number;
     adjustparentheight?: boolean;
     store?: SettableSubject<T>;
 }
@@ -11,7 +12,7 @@ export interface GlueAlignStore {
     valign: 'bottom' | 'top';
     halign: 'left' | 'right';
 }
-export declare function glue(el: HTMLElement, { target, align, cover, adjustparentheight, store }: GlueArgs): {
-    update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
+export declare function glue(el: HTMLElement, { target, align, cover, gap, adjustparentheight, store }: GlueArgs): {
+    update({ target: utarget, align: ualign, cover: ucover, gap: ugap, store: ustore }: GlueArgs): void;
     destroy(): void;
 };

package/dist/actions/glue.js

@@ -1,6 +1,6 @@
 import { watchForMutations } from '../util/index.js';
 import { equal } from 'txstate-utils';
-export function glue(el, { target, align = 'auto', cover = false, adjustparentheight = false, store }) {
+export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjustparentheight = false, store }) {
     let halign;
     let valign;
     const parent = el.offsetParent;
@@ -34,7 +34,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
         const targetHeight = rect.height;
         if (autoalign === 'bottomleft') {
             requestAnimationFrame(() => {
-                el.style.top = `${rect.top + (cover ? 0 : targetHeight)}px`;
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = '';
                 el.style.right = '';
@@ -45,7 +45,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
         }
         else if (autoalign === 'bottomright') {
             requestAnimationFrame(() => {
-                el.style.top = `${rect.top + (cover ? 0 : targetHeight)}px`;
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = '';
                 el.style.bottom = '';
                 el.style.right = `${rect.right}px`;
@@ -58,7 +58,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
             requestAnimationFrame(() => {
                 el.style.top = '';
                 el.style.left = `${rect.left}px`;
-                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight)}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = '';
                 adjustParentHeight();
             });
@@ -69,7 +69,7 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
             requestAnimationFrame(() => {
                 el.style.top = '';
                 el.style.left = '';
-                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight)}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight();
             });
@@ -81,9 +81,10 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
     const { destroy: watchDestroy } = watchForMutations(reposition);
     document.addEventListener('scroll', reposition, { capture: true });
     return {
-        update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
+        update({ target: utarget, align: ualign = 'auto', cover: ucover = false, gap: ugap = 0, store: ustore }) {
             align = ualign;
             cover = ucover;
+            gap = ugap;
             if (ustore && ustore !== store) {
                 ustore.update(v => ({ ...v, valign, halign }));
                 store = ustore;

package/dist/components/MultiSelect.svelte

@@ -6,11 +6,12 @@
   controlled by the parent component via the `getOptions` function that will be used as a
   debounced callback on the contents of the text input.
 -->
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher, onMount } from 'svelte';
 import { randomid, Cache } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import { modifierKey, selectionIsLeft } from '../util';
+import { SafeStore } from '@txstate-mws/svelte-store';
 export let name;
 /**
  * Function to pass to the component that tells it how to use the text in the text input to determine what
@@ -51,7 +52,9 @@ const dispatch = createEventDispatcher();
 const optionsCache = new Cache(async (ipt) => {
     return await getOptions(ipt);
 }, { freshseconds: 5 });
-$: selectedSet = new Set(selected.map(s => s.value));
+const selectedStore = new SafeStore(selected);
+$: $selectedStore = selected;
+$: selectedSet = new Set($selectedStore.map(s => s.value));
 // Stop showing our menu if the maxSelections limit has been reached.
 $: if (maxSelections > 1 && selected.length >= maxSelections && menushown)
     menushown = false;
@@ -137,6 +140,12 @@ function reactToHilite(..._) {
         inputelement.removeAttribute('aria-activedescendant');
 }
 $: reactToHilite(hilitedpill, id);
+let gap = 0;
+onMount(() => {
+    const ul = inputelement.closest('.multiselect-selected');
+    if (ul != null)
+        gap = ((ul.offsetHeight - ul.clientHeight) / 2) + parseInt(window.getComputedStyle(ul).paddingBottom);
+});
 </script>
 
 <fieldset>
@@ -166,7 +175,7 @@ $: reactToHilite(hilitedpill, id);
   <slot></slot>
 </fieldset>
 <svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft'
- {usePortal} {loading} {emptyText}
+ {usePortal} {loading} {emptyText} {gap}
  {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} {menuDividerClass}
  items={options} buttonelement={inputelement}
  on:change={addSelection}/>

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.
@@ -34,6 +34,8 @@ of when this is useful is when you are trying to round corners of your button an
 menu is above or below your button so you know which corners to round and which to leave square. Note that
 the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */
 export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
+/** Create some spacing between the specified button element and the menu, in pixels */
+export let gap = 0;
 /** Set to `true` if you want the parent element's styling to increase its minHeight when necessary. Useful
 for parent elements not styled for variable size children and which you want override the the size of. */
 export let adjustparentheight = false;
@@ -201,6 +203,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 +220,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 +229,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);
@@ -240,7 +257,7 @@ $: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value =
 
 {#if menushown}
   <div use:portal={usePortal === true ? undefined : (usePortal || null)}
-       use:glue={{ target: buttonelement, align, cover, adjustparentheight, store: computedalign }}
+       use:glue={{ target: buttonelement, align, cover, gap, adjustparentheight, store: computedalign }}
        class={menuContainerClass}>
     <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''}
         class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass}

package/dist/components/PopupMenu.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
           of when this is useful is when you are trying to round corners of your button and need to know whether the
           menu is above or below your button so you know which corners to round and which to leave square. Note that
           the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */ computedalign?: Store<GlueAlignStore> | undefined;
+        /** Create some spacing between the specified button element and the menu, in pixels */ gap?: number | undefined;
         /** Set to `true` if you want the parent element's styling to increase its minHeight when necessary. Useful
           for parent elements not styled for variable size children and which you want override the the size of. */ adjustparentheight?: boolean | undefined;
         /**  If the menu would be clipped by an `overflow: hidden`, you can set this prop and it will be placed in

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.3",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",