@txstate-mws/svelte-components 1.0.1 → 1.1.0

package/src/lib/components/MultiSelect.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { randomid } from 'txstate-utils'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+  import DefaultPopupMenu from './PopupMenu.svelte'
+  import { debouncedPromise, modifierKey, selectionIsLeft } from '$lib/util'
+  import type { PopupMenuItem } from '$lib/types'
+
+  export let id = randomid()
+  export let name: string
+  export let getOptions: (search: string) => Promise<PopupMenuItem[]>|PopupMenuItem[]
+  export let menuContainerClass: string|undefined = undefined
+  export let menuClass: string|undefined = undefined
+  export let menuItemClass: string|undefined = undefined
+  export let menuItemHilitedClass: string|undefined = undefined
+  export let selected: { value: string, label: string }[] = []
+  export let placeholder = ''
+  export let emptyText: string|undefined = undefined
+  export let PopupMenu = DefaultPopupMenu
+
+  let menushown: boolean
+  let options = []
+  let hilitedpill: string|undefined
+  let inputvalue = ''
+  let popupvalue = undefined
+  let inputelement: HTMLInputElement
+  const descriptionid = randomid()
+
+  $: debouncedGetOptions = debouncedPromise(getOptions, 100, [])
+  $: selectedSet = new Set(selected.map(s => s.value))
+  async function reactToInput (..._: any) {
+    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))
+    if (typeof document !== 'undefined' && inputelement === document.activeElement) menushown = true
+  }
+  $: reactToInput(inputvalue, debouncedGetOptions, selectedSet)
+  $: availablemessage = options.filter(o => o.value).length + ' autocomplete choices available'
+
+  function addSelection (e: CustomEvent & { detail: PopupMenuItem }) {
+    inputvalue = ''
+    const opt = { ...e.detail, label: e.detail.label || e.detail.value }
+    selected = [...selected, opt]
+    popupvalue = undefined
+  }
+  function removeSelection (opt: typeof selected[number], idx: number, nextfocus = 1) {
+    if (hilitedpill === opt.value) {
+      hilitedpill = selected[idx + nextfocus]?.value
+    }
+    selected = selected.filter(s => s.value !== opt.value)
+  }
+
+  function inputkeydown (e) {
+    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()
+      } else if (e.key === 'Backspace' && selectionIsLeft(inputelement)) {
+        removeSelection(selected[selected.length - 1], selected.length - 1, -1)
+        e.preventDefault()
+      }
+    }
+  }
+  function inputfocus () {
+    reactToInput()
+  }
+
+  let popuphilited
+  $: 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)
+
+  const dispatch = createEventDispatcher()
+  $: dispatch('change', selected)
+</script>
+
+<fieldset>
+  <ul class="multiselect-selected" role="listbox" on:click={() => inputelement.focus()}>
+    {#each selected as option, i}
+      <li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
+        on:click|preventDefault|stopPropagation={() => removeSelection(option, i, 1)}
+        aria-selected="true">
+        {option.label || option.value}
+        <ScreenReaderOnly>, click to remove</ScreenReaderOnly>
+      </li>
+    {/each}
+    <li class="input">
+      <input type="text" id={id} name={name} placeholder={placeholder}
+        bind:this={inputelement} bind:value={inputvalue}
+        on:focus={inputfocus} on:keydown={inputkeydown}
+        autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
+        aria-describedby="{descriptionid}">
+    </li>
+  </ul>
+  <ScreenReaderOnly id={descriptionid} arialive="assertive">
+    <span>{selected.length ? selected.length + ' selected' : 'select multiple, none selected'}, 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>
+  <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>
+
+<style>
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+  fieldset * {
+    box-sizing: border-box;
+  }
+  .multiselect-selected {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    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 {
+    outline-width: var(--multiselect-focus-width, 2px);
+    outline-style: solid;
+    outline-color: var(--multiselect-focus-color, Highlight);
+  }
+  li.input {
+    flex-grow: 1;
+  }
+  input {
+    outline: 0;
+    border: 0;
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .multiselect-pill {
+    cursor: pointer;
+    flex-grow: 0;
+    margin-right: 0.3em;
+    line-height: 1;
+    border-radius: var(--multiselect-pill-radius, 0.8em);
+    border: var(--multiselect-pill-border, 1px solid gray);
+    background-color: var(--multiselect-pill-bg, transparent);
+    color: var(--multiselect-pill-text, black);
+    padding: var(--multiselect-pill-padding, 0.3em 0.5em);
+  }
+  .multiselect-pill.hilited {
+    outline: 0;
+    background-color: var(--multiselect-pill-selected, gray);
+    border: var(--multiselect-pill-selected-border, 1px solid transparent);
+    color: var(--multiselect-pill-selected-text, white);
+  }
+</style>

package/{dist/ts → src/lib}/components/PopupMenu.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import type { GlueAlignOpts, GlueAlignStore } from '../actions'
-  import { glue, portal } from '../actions'
   import { createEventDispatcher, onDestroy, tick } from 'svelte'
   import { randomid } from 'txstate-utils'
-  import type { PopupMenuItem } from '../types'
-  import { Store } from '../lib'
+  import { Store } from '@txstate-mws/svelte-store'
+  import { glue, portal } from '$lib/actions'
+  import type { GlueAlignOpts, GlueAlignStore } from '$lib/actions'
+  import type { PopupMenuItem } from '$lib/types'
   import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+  import { modifierKey } from '$lib/util'
   const dispatch = createEventDispatcher()
 
   export let menushown = false
@@ -24,10 +25,9 @@
   export let usePortal: HTMLElement|true|undefined = undefined
   export let emptyText: string|undefined = undefined
   export let value: string|undefined = undefined
-
-  let hilited: number|undefined = undefined
+  export let hilited: number|undefined = undefined
   let menuelement: HTMLElement|undefined
-  let itemelements: HTMLElement[] = []
+  const itemelements: HTMLElement[] = []
   const menuid = randomid()
   let firstactive = 0
   let lastactive = items.length - 1
@@ -50,14 +50,15 @@
     }
     await tick()
     if (!menushown) {
-      hilited = undefined
       buttonelement.removeAttribute('aria-controls')
       buttonelement.setAttribute('aria-expanded', 'false')
+      if (hilited) buttonelement.removeAttribute('aria-activedescendant')
+      hilited = undefined
     } else {
       buttonelement.setAttribute('aria-controls', menuid)
       buttonelement.setAttribute('aria-expanded', 'true')
+      buttonelement.focus()
     }
-    buttonelement.focus()
   }
   $: reactToMenuShown(menushown)
 
@@ -70,25 +71,26 @@
   }
 
   function onkeydown (e: KeyboardEvent) {
+    if (modifierKey(e)) return
     if (e.key === 'ArrowDown') {
       e.preventDefault()
       if (menushown) {
         let i = (hilited ?? firstactive - 1) + 1
-        while(items[i]?.disabled || hiddenItem(items[i])) i++
+        while (items[i]?.disabled || hiddenItem(items[i])) i++
         move(i)
       } else {
         menushown = true
-        move(firstactive)
+        tick().then(() => move(firstactive))
       }
     } else if (e.key === 'ArrowUp') {
       e.preventDefault()
       if (menushown) {
         let i = (hilited ?? lastactive + 1) - 1
-        while(items[i]?.disabled || hiddenItem(items[i])) i--
+        while (items[i]?.disabled || hiddenItem(items[i])) i--
         move(i)
       } else {
         menushown = true
-        move(lastactive)
+        tick().then(() => move(lastactive))
       }
     } else if (e.key === 'Enter') {
       e.preventDefault()
@@ -100,7 +102,7 @@
         }
       } else {
         menushown = true
-        move(firstactive)
+        tick().then(() => move(firstactive))
       }
     } else if (e.key === ' ') {
       // buttonelement might be a text input if this popup is searchable,
@@ -121,7 +123,7 @@
         if (buttonelement.tagName !== 'INPUT') {
           e.preventDefault()
           menushown = true
-          move(firstactive)
+          tick().then(() => move(firstactive))
         }
       }
     } else if (menushown && e.key === 'Escape') {
@@ -131,14 +133,18 @@
     }
   }
 
+  let blurTimer: any
   function onbuttonclick (e: MouseEvent) {
     e.preventDefault()
+    cancelAnimationFrame(blurTimer)
     menushown = !menushown
   }
 
   async function onblur (e: FocusEvent) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set
-    if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) menushown = false
+    if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) {
+      blurTimer = requestAnimationFrame(() => { menushown = false })
+    }
   }
 
   function cleanup (element: HTMLElement) {

package/{dist/ts → src/lib}/components/ScreenReaderOnly.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   export let id: string|undefined = undefined
-  export let arialive: svelte.JSX.AriaAttributes['aria-live'] = undefined
-  export let ariaatomic: svelte.JSX.AriaAttributes['aria-atomic'] = undefined
+  export let arialive: 'off' | 'assertive' | 'polite' | undefined = undefined
+  export let ariaatomic: boolean | 'false' | 'true' | undefined = undefined
 </script>
 
 <style>

package/src/lib/components/index.ts

@@ -0,0 +1,9 @@
+export { default as CardLayout } from './CardLayout.svelte'
+export { default as Card } from './Card.svelte'
+export { default as CollapsingTable } from './CollapsingTable.svelte'
+export { default as FocusLock } from './FocusLock.svelte'
+export { default as ConditionalWrapper } from './ConditionalWrapper.svelte'
+export { default as Modal } from './Modal.svelte'
+export { default as MultiSelect } from './MultiSelect.svelte'
+export { default as PopupMenu } from './PopupMenu.svelte'
+export { default as ScreenReaderOnly } from './ScreenReaderOnly.svelte'

package/src/lib/index.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js'
+export * from './actions/index.js'
+export * from './types/index.js'
+export * from './util/index.js'

package/src/lib/types/CardLayout.ts

@@ -0,0 +1,14 @@
+import type { SettableSubject } from '@txstate-mws/svelte-store'
+export const CARDLAYOUT = {}
+export interface Block {
+  element: HTMLElement
+  order?: SettableSubject<number>
+  linebreak?: SettableSubject<boolean>
+  width?: SettableSubject<string>
+  height?: number
+}
+export interface CardLayoutContext {
+  registerBlock: (block: Block) => Block
+  recalculate: () => void
+  gutter: SettableSubject<number>
+}

package/src/lib/types/CollapsingTable.ts

@@ -0,0 +1,8 @@
+export interface CollapsingTableColumn {
+  key: string
+  title?: string
+  width?: number
+  neverhide?: boolean
+  bodyCellClass?: string
+  headerCellClass?: string
+}

package/src/lib/types/PopupMenu.ts

@@ -0,0 +1,5 @@
+export interface PopupMenuItem {
+  value: string
+  label?: string
+  disabled?: boolean
+}

package/src/lib/types/index.ts

@@ -0,0 +1,3 @@
+export * from './CardLayout.js'
+export * from './CollapsingTable.js'
+export * from './PopupMenu.js'

package/src/lib/util/bodyoffset.ts

@@ -0,0 +1,77 @@
+export type ElementOffsets = Partial<ReturnType<typeof bodyOffset>>
+
+export function bodyOffset (ele: HTMLElement) {
+  return targetOffset(ele, document.body)
+}
+
+export function targetOffset (ele: HTMLElement, target: HTMLElement) {
+  const offset = targetOffsetRecursive(ele, target)
+  return {
+    ...offset,
+    right: target.offsetWidth - offset.left - ele.offsetWidth,
+    bottom: target.offsetHeight - offset.top - ele.offsetHeight
+  }
+}
+
+export function sharedOffsetParent (a: HTMLElement, b: HTMLElement) {
+  if (!a || !b) return undefined
+  if (a.contains(b) && (a.firstElementChild as HTMLElement).offsetParent === a) return a
+  if (b.contains(a) && (b.firstElementChild as HTMLElement).offsetParent === b) return b
+  let c = a.offsetParent as HTMLElement
+  while (c instanceof HTMLElement && !c.contains(b)) c = c.offsetParent as HTMLElement
+  return c
+}
+
+function targetOffsetRecursive (ele: HTMLElement, target: HTMLElement, currentOffset?: { top: number, left: number }): { top: number, left: number } {
+  const { x, y } = getTranslate(ele)
+  const offset = {
+    top: ele.offsetTop + (currentOffset?.top ?? 0) + y,
+    left: ele.offsetLeft + (currentOffset?.left ?? 0) + x
+  }
+  if (ele.offsetParent instanceof HTMLElement && target !== ele.offsetParent && target.contains(ele.offsetParent)) return targetOffsetRecursive(ele.offsetParent, target, offset)
+  return offset
+}
+
+function getTranslate (element: HTMLElement) {
+  const style = window.getComputedStyle(element)
+  const matrix = style.transform
+
+  // No transform property. Simply return 0 values.
+  if (matrix === 'none' || !matrix) {
+    return {
+      x: 0,
+      y: 0,
+      z: 0
+    }
+  }
+
+  // Can either be 2d or 3d transform
+  const matrixType = matrix.includes('3d') ? '3d' : '2d'
+  const matrixValues = matrix.match(/matrix.*\((.+)\)/)![1].split(', ')
+
+  // 2d matrices have 6 values
+  // Last 2 values are X and Y.
+  // 2d matrices does not have Z value.
+  if (matrixType === '2d') {
+    return {
+      x: Number(matrixValues[4]),
+      y: Number(matrixValues[5]),
+      z: 0
+    }
+  }
+
+  // 3d matrices have 16 values
+  // The 13th, 14th, and 15th values are X, Y, and Z
+  if (matrixType === '3d') {
+    return {
+      x: Number(matrixValues[12]),
+      y: Number(matrixValues[13]),
+      z: Number(matrixValues[14])
+    }
+  }
+  return {
+    x: 0,
+    y: 0,
+    z: 0
+  }
+}

package/src/lib/util/index.ts

@@ -0,0 +1,3 @@
+export * from './bodyoffset.js'
+export * from './repositioned.js'
+export * from './util.js'

package/src/lib/util/repositioned.ts

@@ -0,0 +1,91 @@
+import { equal, isNotNull, randomid, toArray } from 'txstate-utils'
+import { bodyOffset, targetOffset } from './bodyoffset.js'
+import type { ElementOffsets } from './bodyoffset.js'
+
+const observers = new Map<string, () => void>()
+let mutationobserver: MutationObserver
+export function watchForMutations (cb: () => void) {
+  function watch () {
+    for (const cb of observers.values()) cb()
+  }
+
+  if (observers.size === 0) {
+    mutationobserver ??= new MutationObserver(watch)
+    window.addEventListener('resize', watch, { passive: true })
+    mutationobserver.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    })
+  }
+
+  const id = randomid()
+  observers.set(id, cb)
+  cb()
+
+  return {
+    destroy () {
+      observers.delete(id)
+      if (observers.size === 0) {
+        window.removeEventListener('resize', watch)
+        mutationobserver.disconnect()
+      }
+    }
+  }
+}
+
+export function watchForPositionChange (el: (HTMLElement|undefined)[]|HTMLElement|undefined, cb: ((offset: Required<ElementOffsets>) => void)|((offsets: Required<ElementOffsets>[]) => void)) {
+  let lastoffsets: ElementOffsets[] = []
+  let els = toArray(el).filter(isNotNull)
+  function watch () {
+    const offsets = els.map(bodyOffset)
+    if (offsets.some((offset, i) => !equal(offset, lastoffsets[i]))) {
+      lastoffsets = offsets
+      Array.isArray(el) ? (cb as any)(offsets) : (cb as any)(offsets[0])
+    }
+  }
+
+  const { destroy } = watchForMutations(watch)
+
+  return {
+    update (newEl: (HTMLElement|undefined)[]|HTMLElement|undefined, newCb: ((offset: Required<ElementOffsets>) => void)|((offsets: Required<ElementOffsets>[]) => void)) {
+      const changed = newEl !== el || newCb !== cb
+      if (changed) {
+        el = newEl
+        els = toArray(el).filter(isNotNull)
+        cb = newCb
+        watch()
+      }
+    },
+    destroy
+  }
+}
+
+export function watchForPositionChangeInContainer (el: HTMLElement|undefined, container: HTMLElement|undefined, cb: (offset: Required<ElementOffsets>) => void) {
+  let lastoffset: ElementOffsets
+
+  function watch () {
+    if (!el || !container) return
+    const offset = targetOffset(el, container)
+    if (!equal(offset, lastoffset)) {
+      lastoffset = offset
+      cb(offset)
+    }
+  }
+
+  const { destroy } = watchForMutations(watch)
+
+  return {
+    update (newEl: HTMLElement|undefined, newContainer: HTMLElement|undefined, newCb: (offset: Required<ElementOffsets>) => void) {
+      const changed = newEl !== el || newContainer !== container || newCb !== cb
+      if (changed) {
+        el = newEl
+        container = newContainer
+        cb = newCb
+        watch()
+      }
+    },
+    destroy
+  }
+}

package/src/lib/util/util.ts

@@ -0,0 +1,36 @@
+export function classes (...classNames: (string | undefined)[]) {
+  return classNames.filter(Boolean).join(' ')
+}
+
+export function debounced (fn: Function, timeout: number) {
+  let timer: NodeJS.Timeout
+  return (...args: any[]) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), timeout)
+  }
+}
+
+export function debouncedPromise <T> (fn: (..._: any) => Promise<T>|T, timeout: number, defaultValue: T): (..._: any) => Promise<T> {
+  let version = 0
+  return async (...args: any[]) => {
+    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'
+}
+
+export function selectionIsLeft (ele: HTMLInputElement|HTMLTextAreaElement) {
+  return ele.selectionStart === 0 && ele.selectionEnd === 0
+}