@txstate-mws/svelte-components 1.5.7 → 1.5.9

package/dist/components/PopupMenu.svelte

@@ -61,11 +61,13 @@ export let menuItemClass = '';
 export let menuItemHilitedClass = '';
 export let menuItemSelectedClass = '';
 export let menuDividerClass = '';
+export let hideSelectedIndicator = false;
 export let usemenurole = false;
 let menuelement;
 const itemelements = [];
 let firstactive = 0;
 let lastactive = items.length - 1;
+$: hasMeaningfulItems = showSelected ? !!items.filter(itm => 'value' in itm).length : !!items.filter(itm => 'value' in itm && itm.value !== value).length;
 function hiddenItem(item) {
     return !!item && !showSelected && item.value === value;
 }
@@ -74,6 +76,8 @@ async function reactToItems(..._) {
     lastactive = items.length - [...items].reverse().findIndex(itm => 'value' in itm && !itm.disabled && !hiddenItem(itm)) - 1;
     if (hilited && items[hilited]?.disabled)
         hilited = firstactive;
+    if (document.activeElement === buttonelement && hasMeaningfulItems && !loading)
+        menushown = true;
 }
 $: void reactToItems(items, value);
 async function reactToMenuShown(_) {
@@ -116,7 +120,7 @@ function isSelectable(itm) {
     return 'value' in itm && !itm.disabled && !hiddenItem(itm);
 }
 function onkeydown(e) {
-    if (modifierKey(e))
+    if (modifierKey(e) || loading)
         return;
     if (e.key === 'ArrowDown') {
         e.preventDefault();
@@ -266,7 +270,7 @@ const onclick = (item) => (e) => {
     value = item.value;
     dispatch('change', item);
 };
-$: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value === value);
+$: hasSelected = showSelected && !hideSelectedIndicator && items.some(itm => 'value' in itm && itm.value === value);
 </script>
 
 {#if menushown}
@@ -285,7 +289,7 @@ $: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value =
             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}
+            class:selected={showSelected && !hideSelectedIndicator && value === item.value}
             on:click={onclick(item)}
             role={usemenurole ? 'menuitem' : 'option'}
             tabindex=-1
@@ -297,7 +301,7 @@ $: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value =
           <li class={`divider ${menuDividerClass}`} on:mousedown|stopPropagation|preventDefault class:group={isNotBlank(item.label)}>{item.label}</li>
         {/if}
       {/each}
-      {#if items.length === 0}
+      {#if !hasMeaningfulItems}
         <li role={usemenurole ? 'menuitem' : 'option'} class={`${menuItemClass} disabled`} aria-live="assertive" aria-selected={usemenurole ? undefined : false}>
           <slot name="noresults">
             {#if !emptyText}

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

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

package/package.json

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