@txstate-mws/svelte-components 1.1.0 → 1.1.1

package/src/lib/components/MultiSelect.svelte

@@ -1,174 +0,0 @@
-<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/src/lib/components/PopupMenu.svelte

@@ -1,285 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, onDestroy, tick } from 'svelte'
-  import { randomid } from 'txstate-utils'
-  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
-  export let menuContainerClass = ''
-  export let menuClass = ''
-  export let menuItemClass = ''
-  export let menuItemHilitedClass = ''
-  export let menuItemSelectedClass = ''
-  export let items: PopupMenuItem[] = []
-  export let buttonelement: HTMLElement
-  export let align: GlueAlignOpts = 'auto'
-  export let cover = false
-  export let showSelected = true
-  export let width:string|undefined = undefined
-  export let computedalign = new Store<GlueAlignStore>({ valign: 'bottom', halign: 'left' })
-  export let usePortal: HTMLElement|true|undefined = undefined
-  export let emptyText: string|undefined = undefined
-  export let value: string|undefined = undefined
-  export let hilited: number|undefined = undefined
-  let menuelement: HTMLElement|undefined
-  const itemelements: HTMLElement[] = []
-  const menuid = randomid()
-  let firstactive = 0
-  let lastactive = items.length - 1
-
-  function hiddenItem (item: PopupMenuItem) {
-    return !!item && !showSelected && item.value === value
-  }
-
-  async function reactToItems (..._: any[]) {
-    firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm))
-    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1
-    if (hilited && items[hilited]?.disabled) hilited = firstactive
-  }
-  $: reactToItems(items, value)
-
-  async function reactToMenuShown (_: boolean) {
-    if (!buttonelement) {
-      hilited = undefined
-      return
-    }
-    await tick()
-    if (!menushown) {
-      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()
-    }
-  }
-  $: reactToMenuShown(menushown)
-
-  function move (idx: number) {
-    if (!menushown) return
-    if (items[idx]?.disabled) return
-    hilited = Math.max(firstactive, Math.min(lastactive, idx))
-    itemelements[hilited].scrollIntoView({ block: 'center' })
-    buttonelement.setAttribute('aria-activedescendant', `${menuid}-${hilited}`)
-  }
-
-  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++
-        move(i)
-      } else {
-        menushown = true
-        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--
-        move(i)
-      } else {
-        menushown = true
-        tick().then(() => move(lastactive))
-      }
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      if (menushown) {
-        menushown = false
-        if (typeof hilited !== 'undefined') {
-          value = items[hilited]?.value
-          dispatch('change', items[hilited])
-        }
-      } else {
-        menushown = true
-        tick().then(() => move(firstactive))
-      }
-    } else if (e.key === ' ') {
-      // buttonelement might be a text input if this popup is searchable,
-      // so we want to allow spaces to be entered without changing the menu situation
-      if (menushown) {
-        if (typeof hilited !== 'undefined') {
-          e.preventDefault()
-          menushown = false
-          value = items[hilited]?.value
-          dispatch('change', items[hilited])
-        } else {
-          if (buttonelement.tagName !== 'INPUT') {
-            e.preventDefault()
-            menushown = false
-          }
-        }
-      } else {
-        if (buttonelement.tagName !== 'INPUT') {
-          e.preventDefault()
-          menushown = true
-          tick().then(() => move(firstactive))
-        }
-      }
-    } else if (menushown && e.key === 'Escape') {
-      e.preventDefault()
-      e.stopPropagation()
-      menushown = false
-    }
-  }
-
-  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))) {
-      blurTimer = requestAnimationFrame(() => { menushown = false })
-    }
-  }
-
-  function cleanup (element: HTMLElement) {
-    if (element) {
-      element.removeEventListener('click', onbuttonclick)
-      element.removeEventListener('keydown', onkeydown)
-      element.removeEventListener('blur', onblur)
-      element.removeAttribute('aria-disabled')
-      element.removeAttribute('aria-haspopup')
-      element.removeAttribute('aria-expanded')
-      element.removeAttribute('aria-controls')
-      element.removeAttribute('aria-activedescendant')
-    }
-  }
-
-  onDestroy(() => cleanup(buttonelement))
-
-  // if buttonelement changes we need to handle listeners and aria
-  let lastbuttonelement: HTMLElement
-  function reactToButtonElement (buttonelement: HTMLElement) {
-    cleanup(lastbuttonelement)
-    lastbuttonelement = buttonelement
-    if (buttonelement) {
-      buttonelement.setAttribute('aria-haspopup', 'listbox')
-      buttonelement.addEventListener('click', onbuttonclick)
-      buttonelement.addEventListener('keydown', onkeydown)
-      buttonelement.addEventListener('blur', onblur)
-    }
-  }
-  $: reactToButtonElement(buttonelement)
-
-  const onclick = (item: PopupMenuItem) => (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    if (item.disabled) return
-    menushown = false
-    value = item.value
-    dispatch('change', item)
-  }
-
-  $: hasSelected = showSelected && items.some(itm => itm.value === value)
-</script>
-
-{#if menushown}
-  <div use:portal={usePortal === true ? document.body : (usePortal || null)} use:glue={{ target: buttonelement, align, cover, store: computedalign }} class={menuContainerClass}>
-    <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}
-          <li
-            id={`${menuid}-${i}`}
-            bind:this={itemelements[i]}
-            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${value === item.value ? menuItemSelectedClass || '' : ''}`}
-            class:disabled={!!item.disabled}
-            class:hilited={!menuItemHilitedClass && i === hilited}
-            class:selected={showSelected && !menuItemSelectedClass && value === item.value}
-            on:click={onclick(item)}
-            role="option"
-            tabindex=-1
-            aria-disabled={item.disabled}
-          ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
-        {/if}
-      {/each}
-      {#if items.length === 0}
-        <li role="option" class={`${menuItemClass} disabled`} aria-live="assertive">
-          <slot name="noresults">
-            {#if !emptyText}
-              <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'empty popup menu'}</ScreenReaderOnly>
-            {:else}
-              {emptyText}
-            {/if}
-          </slot>
-        </li>
-      {/if}
-    </ul>
-  </div>
-{/if}
-
-<style>
-  div {
-    position: absolute !important;
-  }
-  ul {
-    list-style: none;
-  }
-  ul.defaultmenu {
-    margin: 0;
-    padding: 0.4em;
-    background: white;
-    border: 1px solid slategray;
-    border-radius: 3px;
-    min-width: 10em;
-    max-height: 20em;
-    overflow-y: auto;
-  }
-  ul.defaultmenu li.disabled {
-    color: rgba(0,0,0,0.6);
-  }
-  ul.defaultmenu::-webkit-scrollbar {
-    appearance: none;
-    width: 7px;
-  }
-  ul.defaultmenu::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: rgba(0,0,0,.5);
-    box-shadow: 0 0 1px rgba(255,255,255,.5);
-  }
-  ul.defaultmenu::-webkit-scrollbar-track {
-    background-color: rgba(0,0,0,.1);
-  }
-  li {
-    cursor: pointer;
-  }
-  li.hilited {
-    background: lightblue;
-  }
-  li.disabled {
-    cursor: auto;
-  }
-  li.selected {
-    position: relative;
-  }
-  ul.hasSelected li {
-    padding-left: 1.4em;
-  }
-  li.selected:after {
-    content: ' ';
-    position: absolute;
-    left: 0.5em;
-    top: calc(50% - 0.11em);
-    transform: translateY(-50%) rotate(38deg);
-    display: block;
-    height: 0.786em;
-    width: 0.4286em;
-    border-bottom: 0.2em solid;
-    border-right: 0.2em solid;
-    box-sizing: border-box;
-  }
-</style>

package/src/lib/components/index.ts

@@ -1,9 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/src/lib/types/PopupMenu.ts

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

package/src/lib/types/index.ts

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

package/src/lib/util/bodyoffset.ts

@@ -1,77 +0,0 @@
-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

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

package/src/lib/util/repositioned.ts

@@ -1,91 +0,0 @@
-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
-  }
-}