@txstate-mws/svelte-components 1.6.11 → 1.6.13

package/dist/components/MultiSelect.svelte

@@ -6,179 +6,172 @@
   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 lang="ts">import { createEventDispatcher, onMount } from 'svelte';
-import { randomid, Cache, isNotBlank } 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
- * `PopupMenuItem[]` should be displayed in the `PopupMenu`. Items already 'selected' from the popup menu will
- * be tracked and automatically filtered from the popup if returned as one of the `PopupMenuItem[]` by `getOptions`. */
-export let getOptions;
-export let id = randomid();
-export let disabled = false;
-export let menuContainerClass = '';
-export let menuClass = '';
-export let menuItemClass = '';
-export let menuItemHilitedClass = '';
-export let inputClass = '';
-export let menuCategoryClass = '';
-/** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */
-export let maxSelections = 0;
-/** Consuming components may need to make decisions about what to display or return as options in the popup based
- * on what's already selected. This component property can be used to both pass an initial set of selections but
- * it can also be bound to provide a means to inspect what's selected. */
-export let selected = [];
-/** The text to be displayed in the input text box for contextual feedback on what the input text is expecting. */
-export let placeholder = '';
-/** When there are no items (e.g. it's a filtered search and there were no results), we still display one
-disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */
-export let emptyText = undefined;
-export let usePortal = undefined;
-export let descid = undefined;
-/** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */
-export let PopupMenu = DefaultPopupMenu;
-/** Add a Delete All button to clear all selected items */
-export let includeDeleteAll = false;
-/** Show a confirmation message before clearing all selections */
-export let confirmDelete = undefined;
-/** A function that can be used to customize the labels on the selected item pills. Default is a function
- * that takes a PopupMenuItem and returns its label, if available, or its value when no label is provided. */
-export let selectedItemLabel = (item) => item.label || item.value;
-let menushown;
-let loading = false;
-let options = [];
-let hilitedpill;
-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);
-}, { freshseconds: 5 });
-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;
-let optionsTimer;
-async function reactToInput(..._) {
-    loading = true;
-    clearTimeout(optionsTimer);
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { randomid, Cache, isNotBlank } from 'txstate-utils'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+  import DefaultPopupMenu from './PopupMenu.svelte'
+  import { modifierKey, selectionIsLeft } from '../util'
+  import type { PopupMenuItem } from '../types'
+  import { SafeStore } from '@txstate-mws/svelte-store'
+
+  export let name: string
+  /**
+   * Function to pass to the component that tells it how to use the text in the text input to determine what
+   * `PopupMenuItem[]` should be displayed in the `PopupMenu`. Items already 'selected' from the popup menu will
+   * be tracked and automatically filtered from the popup if returned as one of the `PopupMenuItem[]` by `getOptions`. */
+  export let getOptions: (search: string) => Promise<PopupMenuItem[]> | PopupMenuItem[]
+  export let id = randomid()
+  export let disabled = false
+  export let menuContainerClass = ''
+  export let menuClass = ''
+  export let menuItemClass = ''
+  export let menuItemHilitedClass = ''
+  export let inputClass = ''
+  export let menuCategoryClass = ''
+  /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */
+  export let maxSelections = 0
+  /** Consuming components may need to make decisions about what to display or return as options in the popup based
+   * on what's already selected. This component property can be used to both pass an initial set of selections but
+   * it can also be bound to provide a means to inspect what's selected. */
+  export let selected: PopupMenuItem[] = []
+  /** The text to be displayed in the input text box for contextual feedback on what the input text is expecting. */
+  export let placeholder = ''
+  /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
+  disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */
+  export let emptyText: string | undefined = undefined
+  export let usePortal: HTMLElement | true | undefined = undefined
+  export let descid: string | undefined = undefined
+  /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */
+  export let PopupMenu = DefaultPopupMenu
+  /** Add a Delete All button to clear all selected items */
+  export let includeDeleteAll = false
+  /** Show a confirmation message before clearing all selections */
+  export let confirmDelete: string | undefined = undefined
+  /** A function that can be used to customize the labels on the selected item pills. Default is a function
+   * that takes a PopupMenuItem and returns its label, if available, or its value when no label is provided. */
+  export let selectedItemLabel: (item: PopupMenuItem) => string = item => item.label || item.value
+
+  let menushown: boolean
+  let loading = false
+  let options: PopupMenuItem[] = []
+  let hilitedpill: string | undefined
+  let popupvalue: string | undefined = undefined
+  let inputelement: HTMLInputElement
+  let menuid: string
+  let announcement = ''
+  const instructionid = randomid()
+  const dispatch = createEventDispatcher()
+
+  const optionsCache = new Cache(async (ipt: string) => await getOptions(ipt), { freshseconds: 5 })
+
+  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
+  let optionsTimer: number | undefined
+  async function reactToInput (..._: any) {
+    loading = true
+    clearTimeout(optionsTimer)
     setTimeout(async () => {
-        const saveval = inputelement?.value;
-        const rawOptions = await optionsCache.get(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 || inputelement?.value.length) && !menushown)
-            menushown = true;
-        loading = false;
-    }, 250);
-}
-$: void reactToInput(getOptions, selectedSet);
-function addSelection(e) {
-    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.label}`;
-    dispatch('change', selected);
-}
-function removeSelection(opt, idx, nextfocus = 1) {
+      const saveval = inputelement?.value
+      const rawOptions = await optionsCache.get(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 || inputelement?.value.length) && !menushown) menushown = true
+      loading = false
+    }, 250)
+  }
+  $: void reactToInput(getOptions, selectedSet)
+  function addSelection (e: CustomEvent & { detail: PopupMenuItem }) {
+    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.label}`
+    dispatch('change', selected)
+  }
+  function removeSelection (opt: typeof selected[number], idx: number, nextfocus = 1) {
     if (hilitedpill === opt.value) {
-        hilitedpill = selected[idx + nextfocus]?.value;
+      hilitedpill = selected[idx + nextfocus]?.value
     }
-    selected = selected.filter(s => s.value !== opt.value);
-    if (document.activeElement !== inputelement)
-        inputelement.focus();
-    announcement = `removed ${opt.label ?? opt.value}`;
-    dispatch('change', selected);
-}
-function inputkeydown(e) {
-    if (modifierKey(e))
-        return;
+    selected = selected.filter(s => s.value !== opt.value)
+    if (document.activeElement !== inputelement) inputelement.focus()
+    announcement = `removed ${opt.label ?? opt.value}`
+    dispatch('change', selected)
+  }
+
+  function inputkeydown (e: KeyboardEvent) {
+    if (modifierKey(e)) return
     if (e.key === 'ArrowLeft' && selectionIsLeft(inputelement)) {
-        const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : selected.length;
-        if (idx !== 0)
-            hilitedpill = selected[idx - 1].value;
-    }
-    else if (e.key === 'ArrowRight' && selectionIsLeft(inputelement)) {
-        if (hilitedpill)
-            e.preventDefault();
-        const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : undefined;
-        if (idx != null) {
-            if (idx === selected.length - 1)
-                hilitedpill = undefined;
-            else
-                hilitedpill = selected[idx + 1].value;
-        }
-    }
-    else if (['Backspace', 'Delete', 'Clear', ' ', 'Enter'].includes(e.key)) {
-        if (hilitedpill) {
-            const idx = selected.findIndex(s => s.value === hilitedpill);
-            removeSelection(selected[idx], idx, e.key === 'Delete' ? 1 : -1);
-            e.preventDefault();
-        }
+      const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : selected.length
+      if (idx !== 0) hilitedpill = selected[idx - 1].value
+    } else if (e.key === 'ArrowRight' && selectionIsLeft(inputelement)) {
+      if (hilitedpill) e.preventDefault()
+      const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : undefined
+      if (idx != null) {
+        if (idx === selected.length - 1) hilitedpill = undefined
+        else hilitedpill = selected[idx + 1].value
+      }
+    } else if (['Backspace', 'Delete', 'Clear', ' ', 'Enter'].includes(e.key)) {
+      if (hilitedpill) {
+        const idx = selected.findIndex(s => s.value === hilitedpill)
+        removeSelection(selected[idx], idx, e.key === 'Delete' ? 1 : -1)
+        e.preventDefault()
+      }
+    } else if (e.key !== 'Tab' && maxSelections > 1 && selected.length >= maxSelections) {
+      e.preventDefault()
+    } else if (e.key === 'ArrowDown') {
+      hilitedpill = undefined
     }
-    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');
-}
-function removeAllSelections() {
-    selected = [];
-    dispatch('change', selected);
-}
-function confirmRemoveAllSelections() {
+  }
+  let active = false
+  function inputfocus () {
+    void reactToInput()
+    active = true
+    dispatch('focus')
+  }
+  function inputblur () {
+    active = false
+    hilitedpill = undefined
+    dispatch('blur')
+  }
+
+  function removeAllSelections () {
+    selected = []
+    dispatch('change', selected)
+  }
+
+  function confirmRemoveAllSelections () {
     if (confirmDelete) {
-        if (confirm(confirmDelete)) {
-            removeAllSelections();
-        }
-    }
-    else {
-        removeAllSelections();
+      // eslint-disable-next-line no-alert -- just doing something super simple here
+      if (window.confirm(confirmDelete)) {
+        removeAllSelections()
+      }
+    } else {
+      removeAllSelections()
     }
-}
-let popuphilited;
-$: if (popuphilited != null)
-    hilitedpill = undefined;
-function reactToHilite(..._) {
-    if (!inputelement)
-        return;
+  }
+
+  let popuphilited: number | undefined
+  $: if (popuphilited != null) hilitedpill = undefined
+  function reactToHilite (..._: any) {
+    if (!inputelement) return
     if (hilitedpill) {
-        popuphilited = undefined;
-        inputelement.setAttribute('aria-activedescendant', id + hilitedpill);
-    }
-    else
-        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');
-    if (ul != null)
-        gap = ((ul.offsetHeight - ul.clientHeight) / 2) + parseInt(window.getComputedStyle(ul).paddingBottom);
-});
+      popuphilited = undefined
+      inputelement.setAttribute('aria-activedescendant', id + hilitedpill)
+    } else 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<HTMLElement>('.multiselect-selected')
+    if (ul != null) gap = ((ul.offsetHeight - ul.clientHeight) / 2) + parseInt(window.getComputedStyle(ul).paddingBottom, 10)
+  })
 </script>
 
 <div class="multiselect" class:disabled role="combobox" aria-controls={menushown ? menuid : undefined} aria-expanded={menushown}>
@@ -203,7 +196,6 @@ onMount(() => {
       {/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}