@txstate-mws/svelte-components 1.5.5 → 1.5.7

package/dist/components/ButtonMenu.svelte

@@ -0,0 +1,52 @@
+<script>import { randomid } from 'txstate-utils';
+import { Store } from '@txstate-mws/svelte-store';
+import PopupMenu from './PopupMenu.svelte';
+export let buttonelement;
+export let items = [];
+export let menushown = false;
+export let value = undefined;
+export let align = 'auto';
+export let cover = false;
+export let showSelected = true;
+export let width = undefined;
+export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
+export let gap = 0;
+export let adjustparentheight = false;
+export let usePortal = undefined;
+export let loading = false;
+export let hilited = undefined;
+export let menuid = randomid();
+export let emptyText = undefined;
+export let menuContainerClass = '';
+export let menuClass = '';
+export let menuItemClass = '';
+export let menuItemHilitedClass = '';
+export let menuItemSelectedClass = '';
+export let menuDividerClass = '';
+const usemenurole = true;
+</script>
+
+<PopupMenu
+  {usemenurole}
+  {buttonelement}
+  {items}
+  {menushown}
+  {value}
+  {align}
+  {cover}
+  {showSelected}
+  {width}
+  {computedalign}
+  {gap}
+  {adjustparentheight}
+  {usePortal}
+  {loading}
+  {hilited}
+  {menuid}
+  {emptyText}
+  {menuContainerClass}
+  {menuClass}
+  {menuItemClass}
+  {menuItemHilitedClass}
+  {menuItemSelectedClass}
+  {menuDividerClass}/>

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

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+import { Store } from '@txstate-mws/svelte-store';
+import type { GlueAlignOpts, GlueAlignStore } from '../actions';
+import type { PopupMenuTypes } from '../types';
+declare const __propDef: {
+    props: {
+        buttonelement: HTMLButtonElement;
+        items?: PopupMenuTypes[] | undefined;
+        menushown?: boolean | undefined;
+        value?: string | undefined;
+        align?: GlueAlignOpts | undefined;
+        cover?: boolean | undefined;
+        showSelected?: boolean | undefined;
+        width?: string | undefined;
+        computedalign?: Store<GlueAlignStore> | undefined;
+        gap?: number | undefined;
+        adjustparentheight?: boolean | undefined;
+        usePortal?: HTMLElement | true | undefined;
+        loading?: boolean | undefined;
+        hilited?: number | undefined;
+        menuid?: string | undefined;
+        emptyText?: string | undefined;
+        menuContainerClass?: string | undefined;
+        menuClass?: string | undefined;
+        menuItemClass?: string | undefined;
+        menuItemHilitedClass?: string | undefined;
+        menuItemSelectedClass?: string | undefined;
+        menuDividerClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonMenuProps = typeof __propDef.props;
+export type ButtonMenuEvents = typeof __propDef.events;
+export type ButtonMenuSlots = typeof __propDef.slots;
+export default class ButtonMenu extends SvelteComponentTyped<ButtonMenuProps, ButtonMenuEvents, ButtonMenuSlots> {
+}
+export {};

package/dist/components/CardLayout.svelte

@@ -163,7 +163,7 @@ function triggerrecalc(width) {
         return;
     cancelAnimationFrame(timer);
     timer = requestAnimationFrame(() => {
-        recalculate(width);
+        void recalculate(width);
         savewidth = width;
     });
 }
@@ -178,7 +178,7 @@ function hardrecalc() {
 function onResize(e) {
     triggerrecalc(e.detail.clientWidth ?? 0);
 }
-onMount(() => triggerrecalc(layoutelement.clientWidth));
+onMount(() => { triggerrecalc(layoutelement.clientWidth); });
 </script>
 
 <ul class="cardlayout {className}" class:ssr style:height={ssr ? undefined : `${fullheight + gutter}px`} bind:this={layoutelement} use:resize on:resize={onResize} use:passActions={use}>

package/dist/components/FocusLock.svelte

@@ -16,7 +16,12 @@ When it goes away, they'll be trapped inside the previous `FocusLock`, and so on
 const waitAtick = typeof requestAnimationFrame !== 'undefined' ? resolve => requestAnimationFrame(resolve) : resolve => resolve(0);
 </script>
 
-<script>export let escapable = true;
+<script>import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+import { tabbable } from 'tabbable';
+import { randomid, sleep } from 'txstate-utils';
+import { buttonify } from '../actions';
+import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+export let escapable = true;
 export let hidefocus = true;
 export let hidefocuslabel = 'focus is above modal dialog, start tabbing';
 export let initialfocus = undefined;
@@ -28,11 +33,6 @@ export let includeselector = undefined;
 let className = '';
 export { className as class };
 export let focusId = randomid();
-import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
-import { tabbable } from 'tabbable';
-import { randomid, sleep } from 'txstate-utils';
-import { buttonify } from '../actions';
-import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 const dispatch = createEventDispatcher();
 let lockelement;
 let abovelockelement;
@@ -91,13 +91,13 @@ onDestroy(async () => {
 });
 const setInitialFocus = () => {
     const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined;
-    if (firstfocus && firstfocus.focus) {
+    if (firstfocus?.focus) {
         firstfocus.focus();
     }
 };
 const setLastFocus = () => {
     const lastfocus = lockelement ? tabbable(lockelement).slice(-1)[0] : undefined;
-    if (lastfocus && lastfocus.focus) {
+    if (lastfocus?.focus) {
         lastfocus.focus();
     }
 };
@@ -123,9 +123,11 @@ const windowclick = (e) => {
 };
 </script>
 <svelte:window on:mousedown={windowclick} />
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:mousedown|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div bind:this={abovelockelement} tabindex="0"></div>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div bind:this={lockelement} on:keydown={keydown}>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() => { hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}

package/dist/components/Modal.svelte

@@ -42,7 +42,8 @@ onMount(() => {
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div use:portal={usePortal} class="modal-backdrop" style:--modal-z={stackPosition * 10 + 3000} class:opaque on:mousedown|stopPropagation|preventDefault={() => escapable && endmodal()}>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div use:portal={usePortal} class="modal-backdrop" style:--modal-z={stackPosition * 10 + 3000} class:opaque on:mousedown|stopPropagation|preventDefault={() => { escapable && endmodal() }}>
   <FocusLock bind:focusId class="modal-container {containerClass}" {includeselector} {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:focuslockupdate={onFocusLockUpdate}>
     <slot></slot>
   </FocusLock>

package/dist/components/MultiSelect.svelte

@@ -73,7 +73,7 @@ async function reactToInput(..._) {
         loading = false;
     }, 250);
 }
-$: reactToInput(inputvalue, getOptions, selectedSet);
+$: void reactToInput(inputvalue, getOptions, selectedSet);
 $: availablemessage = options.filter(o => 'value' in o && o.value).length + ' autocomplete choices available';
 function addSelection(e) {
     inputvalue = '';
@@ -123,8 +123,8 @@ function inputkeydown(e) {
         e.preventDefault();
     }
 }
-async function inputfocus() {
-    reactToInput();
+function inputfocus() {
+    void reactToInput();
 }
 let popuphilited;
 $: if (popuphilited != null)
@@ -153,7 +153,7 @@ onMount(() => {
     {#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()}
+        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>

package/dist/components/PopupMenu.svelte

@@ -61,6 +61,7 @@ export let menuItemClass = '';
 export let menuItemHilitedClass = '';
 export let menuItemSelectedClass = '';
 export let menuDividerClass = '';
+export let usemenurole = false;
 let menuelement;
 const itemelements = [];
 let firstactive = 0;
@@ -74,7 +75,7 @@ async function reactToItems(..._) {
     if (hilited && items[hilited]?.disabled)
         hilited = firstactive;
 }
-$: reactToItems(items, value);
+$: void reactToItems(items, value);
 async function reactToMenuShown(_) {
     if (!buttonelement) {
         hilited = undefined;
@@ -99,7 +100,7 @@ async function reactToMenuShown(_) {
             buttonelement.focus();
     }
 }
-$: reactToMenuShown(menushown);
+$: void reactToMenuShown(menushown);
 function move(idx) {
     if (!menushown)
         return;
@@ -127,7 +128,7 @@ function onkeydown(e) {
         }
         else {
             menushown = true;
-            tick().then(() => move(firstactive));
+            tick().then(() => { move(firstactive); }).catch(console.error);
         }
     }
     else if (e.key === 'ArrowUp') {
@@ -140,7 +141,19 @@ function onkeydown(e) {
         }
         else {
             menushown = true;
-            tick().then(() => move(lastactive));
+            tick().then(() => { move(lastactive); }).catch(console.error);
+        }
+    }
+    else if (e.key === 'Home') {
+        e.preventDefault();
+        if (menushown) {
+            move(firstactive);
+        }
+    }
+    else if (e.key === 'End') {
+        e.preventDefault();
+        if (menushown) {
+            move(lastactive);
         }
     }
     else if (e.key === 'Enter') {
@@ -154,7 +167,7 @@ function onkeydown(e) {
         }
         else {
             menushown = true;
-            tick().then(() => move(firstactive));
+            tick().then(() => { move(firstactive); }).catch(console.error);
         }
     }
     else if (e.key === ' ') {
@@ -178,7 +191,7 @@ function onkeydown(e) {
             if (buttonelement.tagName !== 'INPUT') {
                 e.preventDefault();
                 menushown = true;
-                tick().then(() => move(firstactive));
+                tick().then(() => { move(firstactive); }).catch(console.error);
             }
         }
     }
@@ -195,7 +208,7 @@ function onbuttonclick(e) {
     if (!loading)
         menushown = !menushown;
 }
-async function onblur(e) {
+function onblur(e) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set
     if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) {
         blurTimer = requestAnimationFrame(() => { if (buttonelement !== document.activeElement)
@@ -217,7 +230,7 @@ function cleanup(element) {
         element.removeAttribute('aria-activedescendant');
     }
 }
-onDestroy(() => cleanup(buttonelement));
+onDestroy(() => { cleanup(buttonelement); });
 // if buttonelement changes we need to handle listeners and aria
 let lastbuttonelement;
 let observers = [];
@@ -225,7 +238,8 @@ function reactToButtonElement(buttonelement) {
     cleanup(lastbuttonelement);
     lastbuttonelement = buttonelement;
     if (buttonelement) {
-        buttonelement.setAttribute('aria-haspopup', 'listbox');
+        buttonelement.setAttribute('aria-haspopup', (usemenurole ? 'true' : 'listbox'));
+        buttonelement.setAttribute('aria-expanded', menushown ? 'true' : 'false');
         buttonelement.addEventListener('click', onbuttonclick);
         buttonelement.addEventListener('keydown', onkeydown);
         buttonelement.addEventListener('blur', onblur);
@@ -259,7 +273,7 @@ $: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value =
   <div use:portal={usePortal === true ? undefined : (usePortal || null)}
        use:glue={{ target: buttonelement, align, cover, gap, adjustparentheight, store: computedalign }}
        class={menuContainerClass}>
-    <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''}
+    <ul bind:this={menuelement} id={menuid} role={usemenurole ? 'menu' : 'listbox'} style={width ? `width: ${width}` : ''}
         class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass}
         on:keydown={onkeydown}>
       {#each items as item, i ('value' in item ? item.value : `popupmenu_divider_${i}`)}
@@ -273,17 +287,18 @@ $: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value =
             class:hilited={!menuItemHilitedClass && i === hilited}
             class:selected={showSelected && !menuItemSelectedClass && value === item.value}
             on:click={onclick(item)}
-            role='option'
+            role={usemenurole ? 'menuitem' : 'option'}
             tabindex=-1
-            aria-selected={value === item.value}
+            aria-selected={usemenurole ? undefined : (value === item.value)}
             aria-disabled={item.disabled}
           ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
         {:else if 'divider' in item && item.divider}
+          <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
           <li class={`divider ${menuDividerClass}`} on:mousedown|stopPropagation|preventDefault class:group={isNotBlank(item.label)}>{item.label}</li>
         {/if}
       {/each}
       {#if items.length === 0}
-        <li role="option" class={`${menuItemClass} disabled`} aria-live="assertive" aria-selected={false}>
+        <li role={usemenurole ? 'menuitem' : 'option'} class={`${menuItemClass} disabled`} aria-live="assertive" aria-selected={usemenurole ? undefined : false}>
           <slot name="noresults">
             {#if !emptyText}
               <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'no results found'}</ScreenReaderOnly>

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

@@ -42,6 +42,7 @@ declare const __propDef: {
         menuItemHilitedClass?: string | undefined;
         menuItemSelectedClass?: string | undefined;
         menuDividerClass?: string | undefined;
+        usemenurole?: boolean | undefined;
     };
     events: {
         mousedown: MouseEvent;

package/dist/components/index.d.ts

@@ -1,9 +1,11 @@
+export { default as ButtonMenu } from './ButtonMenu.svelte';
 export { default as CardLayout } from './CardLayout.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CollapsingTable } from './CollapsingTable.svelte';
 export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
 export { default as FocusLock } from './FocusLock.svelte';
 export { default as Loading } from './Loading.svelte';
+export { default as Lottie } from './Lottie.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as PopupMenu } from './PopupMenu.svelte';

package/dist/components/index.js

@@ -1,9 +1,11 @@
+export { default as ButtonMenu } from './ButtonMenu.svelte';
 export { default as CardLayout } from './CardLayout.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CollapsingTable } from './CollapsingTable.svelte';
 export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
 export { default as FocusLock } from './FocusLock.svelte';
 export { default as Loading } from './Loading.svelte';
+export { default as Lottie } from './Lottie.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as PopupMenu } from './PopupMenu.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",
@@ -26,7 +26,7 @@
     "@sveltejs/package": "^2.0.2",
     "@types/tabbable": "^3.1.2",
     "eslint-config-standard-with-typescript": "^39.0.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.0.0",
     "svelte-check": "^3.0.1",
     "svelte-preprocess": "^5.0.0",
     "svelte2tsx": "^0.6.0",