@txstate-mws/svelte-components 1.3.2 → 1.3.4

package/components/MultiSelect.svelte

@@ -1,8 +1,8 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { randomid, sleep } from 'txstate-utils';
+import { randomid, Cache } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';
-import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
+import { modifierKey, selectionIsLeft } from '../util';
 export let id = randomid();
 export let name;
 export let disabled = false;
@@ -16,38 +16,48 @@ export let placeholder = '';
 export let emptyText = undefined;
 export let PopupMenu = DefaultPopupMenu;
 let menushown;
+let loading = false;
 let options = [];
 let hilitedpill;
 let inputvalue = '';
 let popupvalue = undefined;
 let inputelement;
 const descriptionid = randomid();
-$: debouncedGetOptions = debouncedPromise(getOptions, 100, []);
+const dispatch = createEventDispatcher();
+const optionsCache = new Cache(async (ipt) => {
+    return await getOptions(ipt);
+}, { freshseconds: 5 });
 $: selectedSet = new Set(selected.map(s => s.value));
+let optionsTimer;
 async function reactToInput(..._) {
-    const saveval = inputvalue;
-    const rawOptions = await debouncedGetOptions(saveval);
-    if (inputvalue !== saveval)
-        return; // ignore any results that are out of date
-    options = rawOptions.filter(o => !selectedSet.has(o.value));
-    await sleep(100);
-    // needed to sleep a little bit or this will turn the menu on only to have popupmenu's click handler toggle it back off
-    if (typeof document !== 'undefined' && inputelement === document.activeElement)
-        menushown = true;
+    loading = true;
+    clearTimeout(optionsTimer);
+    setTimeout(async () => {
+        const saveval = inputvalue;
+        const rawOptions = await optionsCache.get(saveval);
+        if (inputvalue !== saveval)
+            return; // ignore any results that are out of date
+        options = rawOptions.filter(o => !selectedSet.has(o.value));
+        if (typeof document !== 'undefined' && inputelement === document.activeElement && (options.length || inputvalue?.length))
+            menushown = true;
+        loading = false;
+    }, 250);
 }
-$: reactToInput(inputvalue, debouncedGetOptions, selectedSet);
+$: reactToInput(inputvalue, getOptions, selectedSet);
 $: availablemessage = options.filter(o => o.value).length + ' autocomplete choices available';
 function addSelection(e) {
     inputvalue = '';
     const opt = { ...e.detail, label: e.detail.label || e.detail.value };
     selected = [...selected, opt];
     popupvalue = undefined;
+    dispatch('change', selected);
 }
 function removeSelection(opt, idx, nextfocus = 1) {
     if (hilitedpill === opt.value) {
         hilitedpill = selected[idx + nextfocus]?.value;
     }
     selected = selected.filter(s => s.value !== opt.value);
+    dispatch('change', selected);
 }
 function inputkeydown(e) {
     if (modifierKey(e))
@@ -80,8 +90,8 @@ function inputkeydown(e) {
         }
     }
 }
-function inputfocus() {
-    reactToInput(true);
+async function inputfocus() {
+    reactToInput();
 }
 let popuphilited;
 $: if (popuphilited != null)
@@ -97,8 +107,6 @@ function reactToHilite(..._) {
         inputelement.removeAttribute('aria-activedescendant');
 }
 $: reactToHilite(hilitedpill, id);
-const dispatch = createEventDispatcher();
-$: dispatch('change', selected);
 </script>
 
 <fieldset>
@@ -126,7 +134,7 @@ $: dispatch('change', selected);
   </ScreenReaderOnly>
   <slot></slot>
 </fieldset>
-<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
+<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {loading} {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
 
 <style>
   fieldset {

package/components/PopupMenu.svelte

@@ -18,6 +18,7 @@ export let cover = false;
 export let showSelected = true;
 export let width = undefined;
 export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
+export let loading = false;
 export let usePortal = undefined;
 export let emptyText = undefined;
 export let value = undefined;
@@ -145,7 +146,8 @@ let blurTimer;
 function onbuttonclick(e) {
     e.preventDefault();
     cancelAnimationFrame(blurTimer);
-    menushown = !menushown;
+    if (!loading)
+        menushown = !menushown;
 }
 async function onblur(e) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set
@@ -197,6 +199,7 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
     <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''} class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass} on:keydown={onkeydown}>
       {#each items as item, i (item.value)}
         {#if showSelected || item.value !== value}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             id={`${menuid}-${i}`}
             bind:this={itemelements[i]}

package/components/PopupMenu.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         showSelected?: boolean;
         width?: string | undefined;
         computedalign?: Store<GlueAlignStore>;
+        loading?: boolean;
         usePortal?: HTMLElement | true | undefined;
         emptyText?: string | undefined;
         value?: string | undefined;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
     "tabbable": "^6.0.0",
-    "txstate-utils": "^1.7.6"
+    "txstate-utils": "^1.7.12"
   },
   "devDependencies": {
     "@playwright/test": "^1.18.1",

package/util/util.d.ts

@@ -1,5 +1,4 @@
 export declare function classes(...classNames: (string | undefined)[]): string;
 export declare function debounced(fn: Function, timeout: number): (...args: any[]) => void;
-export declare function debouncedPromise<T>(fn: (..._: any) => Promise<T> | T, timeout: number, defaultValue: T): (..._: any) => Promise<T>;
 export declare function modifierKey(e: any): any;
 export declare function selectionIsLeft(ele: HTMLInputElement | HTMLTextAreaElement): boolean;

package/util/util.js

@@ -8,23 +8,6 @@ export function debounced(fn, timeout) {
         timer = setTimeout(() => fn(...args), timeout);
     };
 }
-export function debouncedPromise(fn, timeout, defaultValue) {
-    let version = 0;
-    return async (...args) => {
-        const myversion = ++version;
-        return await new Promise(resolve => {
-            setTimeout(() => {
-                if (version === myversion) {
-                    version = 0;
-                    resolve(fn(...args));
-                }
-                else {
-                    resolve(defaultValue);
-                }
-            }, timeout);
-        });
-    };
-}
 export function modifierKey(e) {
     return e.ctrlKey || e.altKey || e.metaKey || e.key === 'Insert';
 }