@txstate-mws/svelte-components 1.5.13 → 1.6.0

package/dist/actions/glue.js

@@ -78,6 +78,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
         store?.update(v => ({ ...v, valign, halign }));
     }
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { destroy: watchDestroy } = watchForMutations(reposition);
     document.addEventListener('scroll', reposition, { capture: true });
     return {

package/dist/components/FocusLock.svelte

@@ -13,7 +13,7 @@ When they do, the escape event will be fired, allowing you to remove the dialog.
 When it goes away, they'll be trapped inside the previous `FocusLock`, and so on.
 -->
 <script context="module">export const FocusLockStack = [];
-const waitAtick = typeof requestAnimationFrame !== 'undefined' ? resolve => requestAnimationFrame(resolve) : resolve => resolve(0);
+const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve) => requestAnimationFrame(resolve) : resolve => resolve(0);
 </script>
 
 <script>import { onMount, onDestroy, createEventDispatcher } from 'svelte';
@@ -53,7 +53,7 @@ onMount(async () => {
     for (const entry of FocusLockStack)
         entry.update();
     if (typeof returnfocusto === 'undefined') {
-        returnfocusto = document.querySelector(':focus');
+        returnfocusto = document.activeElement;
     }
     await sleep(1); // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
     if (!lockelement)

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

@@ -11,7 +11,7 @@ declare const __propDef: {
         hidefocus?: boolean | undefined;
         hidefocuslabel?: string | undefined;
         initialfocus?: string | undefined;
-        returnfocusto?: HTMLElement | null | undefined;
+        returnfocusto?: HTMLElement | undefined;
         /** If you expect any popup menus to be added to the body, we need to know that they
           are considered to be part of the focus lock, or else the modal will be dismissed
           when the user clicks inside. Use commas to include multiple selectors. */ includeselector?: string | undefined;

package/dist/components/MultiSelect.svelte

@@ -7,7 +7,7 @@
   debounced callback on the contents of the text input.
 -->
 <script>import { createEventDispatcher, onMount } from 'svelte';
-import { randomid, Cache } from 'txstate-utils';
+import { randomid, Cache, isNotBlank } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import { modifierKey, selectionIsLeft } from '../util';
@@ -45,9 +45,11 @@ let menushown;
 let loading = false;
 let options = [];
 let hilitedpill;
-let inputvalue = '';
 let popupvalue = undefined;
 let inputelement;
+let menuid;
+let announcement = '';
+const instructionid = randomid();
 const dispatch = createEventDispatcher();
 const optionsCache = new Cache(async (ipt) => {
     return await getOptions(ipt);
@@ -63,23 +65,23 @@ async function reactToInput(..._) {
     loading = true;
     clearTimeout(optionsTimer);
     setTimeout(async () => {
-        const saveval = inputvalue;
+        const saveval = inputelement?.value;
         const rawOptions = await optionsCache.get(saveval);
-        if (inputvalue !== saveval)
+        if (inputelement?.value !== saveval)
             return; // ignore any results that are out of date
         options = rawOptions.filter(o => !('value' in o) || !selectedSet.has(o.value));
-        if (typeof document !== 'undefined' && inputelement === document.activeElement && (options.length || inputvalue?.length))
+        if (typeof document !== 'undefined' && inputelement === document.activeElement && (options.length || inputelement?.value.length) && !menushown)
             menushown = true;
         loading = false;
     }, 250);
 }
-$: void reactToInput(inputvalue, getOptions, selectedSet);
-$: availablemessage = options.filter(o => 'value' in o && o.value).length + ' autocomplete choices available';
+$: void reactToInput(getOptions, selectedSet);
 function addSelection(e) {
-    inputvalue = '';
+    inputelement.value = '';
     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}`;
     dispatch('change', selected);
 }
 function removeSelection(opt, idx, nextfocus = 1) {
@@ -87,6 +89,9 @@ function removeSelection(opt, idx, nextfocus = 1) {
         hilitedpill = selected[idx + nextfocus]?.value;
     }
     selected = selected.filter(s => s.value !== opt.value);
+    if (document.activeElement !== inputelement)
+        inputelement.focus();
+    announcement = `removed ${opt.value}`;
     dispatch('change', selected);
 }
 function inputkeydown(e) {
@@ -114,17 +119,23 @@ function inputkeydown(e) {
             removeSelection(selected[idx], idx, e.key === 'Delete' ? 1 : -1);
             e.preventDefault();
         }
-        else if (e.key === 'Backspace' && selectionIsLeft(inputelement)) {
-            removeSelection(selected[selected.length - 1], selected.length - 1, -1);
-            e.preventDefault();
-        }
     }
     else if (e.key !== 'Tab' && maxSelections > 1 && selected.length >= maxSelections) {
         e.preventDefault();
     }
+    else if (e.key === 'ArrowDown') {
+        hilitedpill = undefined;
+    }
 }
+let active = false;
 function inputfocus() {
     void reactToInput();
+    active = true;
+    dispatch('focus');
+}
+function inputblur() {
+    active = false;
+    dispatch('blur');
 }
 let popuphilited;
 $: if (popuphilited != null)
@@ -140,6 +151,7 @@ function reactToHilite(..._) {
         inputelement.removeAttribute('aria-activedescendant');
 }
 $: reactToHilite(hilitedpill, id);
+$: ariainstructions = `${selected.length === 0 ? 'nothing' : selected.length} selected, ${maxSelections ? 'select up to ' + maxSelections + ',' : 'select multiple,'} up down to browse choices, ${selected.length ? 'left right to browse selected,' : ''} touch users must explore screen to find menu`;
 let gap = 0;
 onMount(() => {
     const ul = inputelement.closest('.multiselect-selected');
@@ -148,72 +160,64 @@ onMount(() => {
 });
 </script>
 
-<fieldset>
-  <ul class="multiselect-selected" class:disabled role="listbox">
-    {#each selected as option, i}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
-        on:click|preventDefault|stopPropagation={() => { !disabled && removeSelection(option, i, 1) }} on:mousedown={e => { disabled && e.preventDefault() }}
-        aria-selected="true">
-        {option.label || option.value}
-        <i aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg></i>
-        <ScreenReaderOnly>, click to deselect</ScreenReaderOnly>
-      </li>
-    {/each}
-    <li class={`input ${inputClass}`}>
-      <input type="text" {id} {name} {disabled} {placeholder}
-        bind:this={inputelement} bind:value={inputvalue} on:blur
-        on:focus={inputfocus} on:keydown={inputkeydown}
-        autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
-        aria-describedby={descid}>
-    </li>
-  </ul>
-  <ScreenReaderOnly arialive="assertive">
-    <span>{selected.length ? selected.length + ' selected' : 'none selected'}, select {maxSelections ? 'up to ' + maxSelections : 'multiple'}, up down to choose, left right to hilite existing choices</span>
-    {#if menushown}<span>{availablemessage}, touch users explore to find autocomplete menu</span>{/if}
-  </ScreenReaderOnly>
+<div class="multiselect" class:disabled role="combobox" aria-controls={menushown ? menuid : undefined} aria-expanded={menushown}>
+  {#if selected.length}
+    <div class="multiselect-selected" role="listbox" aria-label="selected options">
+      {#each selected as option, i (option.value)}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
+          on:click|preventDefault|stopPropagation={() => { !disabled && removeSelection(option, i, 1) }} on:mousedown={e => { disabled && e.preventDefault() }}
+          aria-selected="true" aria-posinset={i + 1} aria-setsize={selected.length}>
+          {option.label || option.value}
+          <i aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg></i>
+          <ScreenReaderOnly>, click to deselect</ScreenReaderOnly>
+        </div>
+      {/each}
+    </div>
+  {/if}
+  <!-- svelte-ignore a11y-role-has-required-aria-props -->
+  <input type="text" class={inputClass} {id} {name} {disabled} {placeholder}
+    bind:this={inputelement} on:input={reactToInput} on:blur={inputblur}
+    on:focus={inputfocus} on:keydown={inputkeydown}
+    autocomplete="off" autocorrect="off" spellcheck="false"
+    aria-describedby="{[descid, instructionid].filter(isNotBlank).join(' ')}">
   <slot></slot>
-</fieldset>
-<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft'
+  <ScreenReaderOnly id={instructionid}>{ariainstructions}</ScreenReaderOnly>
+  <ScreenReaderOnly arialive="polite">{announcement}</ScreenReaderOnly>
+</div>
+
+<svelte:component this={PopupMenu} bind:menushown bind:menuid bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft'
  {usePortal} {loading} {emptyText} {gap}
  {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} {menuDividerClass}
  items={options} buttonelement={inputelement}
  on:change={addSelection}/>
 
 <style>
-  fieldset {
-    border: 0;
-    padding: 0;
-    margin: 0;
-  }
-  fieldset * {
+  .multiselect, .multiselect * {
     box-sizing: border-box;
   }
-  .multiselect-selected {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  .multiselect {
     display: flex;
     flex-wrap: wrap;
-    align-items: stretch;
     padding: var(--multiselect-padding, 0.3em);
     border: var(--multiselect-border, 1px solid #666666);
     border-radius: var(--multiselect-radius, 0.3em);
   }
-  .multiselect-selected:focus-within {
+  .multiselect:focus-within {
     outline-width: var(--multiselect-focus-width, 2px);
     outline-style: solid;
     outline-color: var(--multiselect-focus-color, Highlight);
   }
-  li.input {
-    flex-grow: 1;
+  .multiselect-selected {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
   }
   input {
+    flex-grow: 1;
     outline: 0;
     border: 0;
     min-width: 0;
-    width: 100%;
-    height: 100%;
   }
   .multiselect-pill {
     position: relative;
@@ -244,7 +248,7 @@ onMount(() => {
   .multiselect-selected.disabled {
     opacity: 0.5;
   }
-  .multiselect-selected.disabled .multiselect-pill {
+  .multiselect.disabled .multiselect-pill {
     cursor: default;
   }
   .multiselect-pill.hilited {

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

@@ -28,8 +28,9 @@ declare const __propDef: {
         /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */ PopupMenu?: typeof DefaultPopupMenu | undefined;
     };
     events: {
-        blur: FocusEvent;
         change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/PopupMenu.svelte

@@ -107,9 +107,9 @@ $: void reactToMenuShown(menushown);
 function move(idx) {
     if (!menushown)
         return;
-    while (idx <= lastactive && 'divider' in items[idx])
+    while (idx <= lastactive && items[idx] != null && 'divider' in items[idx])
         idx++;
-    if (items[idx]?.disabled)
+    if (items[idx] == null || items[idx]?.disabled)
         return;
     hilited = Math.max(firstactive, Math.min(lastactive, idx));
     itemelements[hilited].scrollIntoView({ block: 'center' });
@@ -125,7 +125,7 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? firstactive - 1) + 1;
-            while (!isSelectable(items[i]))
+            while (items[i] && !isSelectable(items[i]))
                 i++;
             move(i);
         }
@@ -138,7 +138,7 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? lastactive + 1) - 1;
-            while (!isSelectable(items[i]))
+            while (items[i] && !isSelectable(items[i]))
                 i--;
             move(i);
         }

package/dist/stores/toasts.d.ts

@@ -0,0 +1,24 @@
+import { Store } from '@txstate-mws/svelte-store';
+export interface Toast {
+    message: string;
+    /** default is error */
+    type?: 'error' | 'warning' | 'info' | 'success';
+    /**
+     * how long the message should appear on screen in milliseconds
+     * default 15 seconds
+     * use Number.MAX_SAFE_INTEGER for permanent
+     */
+    ttlMs?: number;
+}
+export interface ToastStorage extends Required<Toast> {
+    /** each toast gets a random id so it can be dismissed by user interaction */
+    id: string;
+    /** when the toast was created, so we know when it expires */
+    stamp: Date;
+}
+export declare class ToastStore extends Store<ToastStorage[]> {
+    add(msg: string, type?: Toast['type'], ttlMs?: number): void;
+    close(id: string): void;
+    clean(): void;
+}
+export declare const toasts: ToastStore;

package/dist/stores/toasts.js

@@ -0,0 +1,23 @@
+import { Store } from '@txstate-mws/svelte-store';
+import { randomid } from 'txstate-utils';
+export class ToastStore extends Store {
+    add(msg, type, ttlMs) {
+        const stored = {
+            id: randomid(),
+            stamp: new Date(),
+            message: msg,
+            type: type ?? 'error',
+            ttlMs: ttlMs ?? 15000
+        };
+        this.update(v => [...v.filter(t => t.message !== stored.message), stored]);
+        setTimeout(() => { this.clean(); }, stored.ttlMs);
+    }
+    close(id) {
+        this.update(v => v.filter(t => t.id !== id));
+    }
+    clean() {
+        const now = new Date().getTime();
+        this.update(v => v.filter(t => now - t.stamp.getTime() < t.ttlMs));
+    }
+}
+export const toasts = new ToastStore([]);

package/dist/util/repositioned.d.ts

@@ -1,12 +1,12 @@
 import type { ElementOffsets } from './bodyoffset.js';
 export declare function watchForMutations(cb: () => void): {
-    destroy(): void;
+    destroy: () => void;
 };
 export declare function watchForPositionChange(el: (HTMLElement | undefined)[] | HTMLElement | undefined, cb: ((offset: Required<ElementOffsets>) => void) | ((offsets: Required<ElementOffsets>[]) => void)): {
-    update(newEl: (HTMLElement | undefined)[] | HTMLElement | undefined, newCb: ((offset: Required<ElementOffsets>) => void) | ((offsets: Required<ElementOffsets>[]) => void)): void;
+    update: (newEl: (HTMLElement | undefined)[] | HTMLElement | undefined, newCb: ((offset: Required<ElementOffsets>) => void) | ((offsets: Required<ElementOffsets>[]) => void)) => void;
     destroy: () => void;
 };
 export declare function watchForPositionChangeInContainer(el: HTMLElement | undefined, container: HTMLElement | undefined, cb: (offset: Required<ElementOffsets>) => void): {
-    update(newEl: HTMLElement | undefined, newContainer: HTMLElement | undefined, newCb: (offset: Required<ElementOffsets>) => void): void;
+    update: (newEl: HTMLElement | undefined, newContainer: HTMLElement | undefined, newCb: (offset: Required<ElementOffsets>) => void) => void;
     destroy: () => void;
 };

package/dist/util/repositioned.js

@@ -21,7 +21,7 @@ export function watchForMutations(cb) {
     observers.set(id, cb);
     cb();
     return {
-        destroy() {
+        destroy: () => {
             observers.delete(id);
             if (observers.size === 0) {
                 window.removeEventListener('resize', watch);
@@ -42,7 +42,7 @@ export function watchForPositionChange(el, cb) {
     }
     const { destroy } = watchForMutations(watch);
     return {
-        update(newEl, newCb) {
+        update: (newEl, newCb) => {
             const changed = newEl !== el || newCb !== cb;
             if (changed) {
                 el = newEl;
@@ -67,7 +67,7 @@ export function watchForPositionChangeInContainer(el, container, cb) {
     }
     const { destroy } = watchForMutations(watch);
     return {
-        update(newEl, newContainer, newCb) {
+        update: (newEl, newContainer, newCb) => {
             const changed = newEl !== el || newContainer !== container || newCb !== cb;
             if (changed) {
                 el = newEl;

package/dist/util/util.js

@@ -5,6 +5,7 @@ export function debounced(fn, timeout) {
     let timer;
     return (...args) => {
         clearTimeout(timer);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         timer = setTimeout(() => fn(...args), timeout);
     };
 }

package/package.json

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